@fibery/ui-kit 1.33.3 → 1.33.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.33.3",
+  "version": "1.33.5",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -41,6 +41,7 @@
     "@radix-ui/react-collapsible": "1.1.0",
     "@radix-ui/react-context-menu": "2.2.1",
     "@radix-ui/react-dropdown-menu": "2.1.1",
+    "@radix-ui/react-navigation-menu": "1.2.0",
     "@radix-ui/react-toast": "1.2.1",
     "@radix-ui/react-tooltip": "1.1.2",
     "@types/d3-shape": "^3.1.3",
@@ -72,8 +73,8 @@
     "react-virtuoso": "4.6.0",
     "screenfull": "6.0.1",
     "ua-parser-js": "0.7.24",
-    "@fibery/emoji-data": "2.6.0",
     "@fibery/helpers": "1.3.0",
+    "@fibery/emoji-data": "2.6.0",
     "@fibery/react": "1.4.0"
   },
   "peerDependencies": {
@@ -108,8 +109,8 @@
     "svgo": "2.8.0",
     "typescript": "5.4.3",
     "unist-util-reduce": "0.2.2",
-    "@fibery/babel-preset": "7.4.0",
-    "@fibery/eslint-config": "8.6.0"
+    "@fibery/eslint-config": "8.6.0",
+    "@fibery/babel-preset": "7.4.0"
   },
   "jest": {
     "testEnvironment": "jsdom",

package/src/design-system.ts

@@ -555,7 +555,7 @@ export const themeColors = {
   colorBorderButtonOutlineNeutralDefault: [slate.slate8, slateDark.slate8],
   colorBorderButtonOutlineDestructiveDefault: [red.red7, redDark.red7],
   colorBgButtonOutlineAccentDefault: [whiteA.whiteA0, slateDark.slate1],
-  colorBgButtonOutlineAccentHover: [indigo.indigo3, indigoDark.indigo8],
+  colorBgButtonOutlineAccentHover: [indigo.indigo3, indigoDark.indigo3],
   colorBgButtonOutlineNeutralDefault: [whiteA.whiteA0, slateDark.slate1],
   colorBgButtonOutlineNeutralHover: [slate.slate4, slateDark.slate4],
   colorBgButtonOutlineDestructiveDefault: [whiteA.whiteA0, slateDark.slate1],
@@ -622,6 +622,8 @@ export const themeColors = {
   colorBgDbTabHover: [slate.slate3, slateDark.slate4],
   colorBgDbTabFocus: [slate.slate6, slateDark.slate6],
 
+  colorBgTabHover: [getOpacities(slate.slate11).opacity10, getOpacities(slateDark.slate11).opacity10],
+
   // Chat
   colorBgMessageContainer: [slate.slate3, slateDark.slate6],
   colorBgMessageContainerHover: [slate.slate2, slateDark.slate3],

package/src/icons/ast/FitToScreen.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const FitToScreen: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M2.75 3.75a.75.75 0 0 0-1.5 0v12.5a.75.75 0 0 0 1.5 0V3.75ZM18 3a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-1.5 0V3.75A.75.75 0 0 1 18 3ZM7.78 8.03a.75.75 0 0 0-1.06-1.06l-2.5 2.5a.75.75 0 0 0 0 1.06l2.5 2.5a.75.75 0 0 0 1.06-1.06l-1.22-1.22h2.69a.747.747 0 0 0 .125-.01c.04.006.082.01.125.01h3.94l-1.22 1.22a.75.75 0 1 0 1.06 1.06l2.5-2.5a.75.75 0 0 0 0-1.06l-2.5-2.5a.75.75 0 1 0-1.06 1.06l1.22 1.22H9.5a.755.755 0 0 0-.125.01.755.755 0 0 0-.125-.01H6.56l1.22-1.22Z"},"children":[]}],"metadata":""}]},"name":"fit-to-screen"};
+
+export default FitToScreen;

package/src/icons/ast/FullscreenModeOffIcon.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const FullscreenModeOffIcon: 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":"M1.97 1.97a.75.75 0 0 1 1.06 0l3.72 3.72V4.166a.75.75 0 1 1 1.5 0V7.5a.75.75 0 0 1-.75.75H4.167a.75.75 0 1 1 0-1.5h1.522L1.97 3.03a.75.75 0 0 1 0-1.06Zm16.06 0a.75.75 0 0 1 0 1.06l-3.72 3.72h1.523a.75.75 0 0 1 0 1.5H12.5a.75.75 0 0 1-.75-.75V4.167a.75.75 0 0 1 1.5 0v1.522l3.72-3.72a.75.75 0 0 1 1.06 0ZM3.417 12.5a.75.75 0 0 1 .75-.75H7.5a.75.75 0 0 1 .75.75v3.333a.75.75 0 0 1-1.5 0v-1.522l-3.72 3.72a.75.75 0 0 1-1.06-1.061l3.72-3.72H4.166a.75.75 0 0 1-.75-.75Zm9.083-.75h3.333a.75.75 0 0 1 0 1.5h-1.522l3.72 3.72a.75.75 0 1 1-1.061 1.06l-3.72-3.72v1.523a.75.75 0 0 1-1.5 0V12.5a.75.75 0 0 1 .75-.75Z"},"children":[]}],"metadata":""}]},"name":"fullscreen-mode-off-icon"};
+
+export default FullscreenModeOffIcon;

package/src/icons/ast/FullscreenModeOn.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const FullscreenModeOn: IconDefinition = {"icon":{"type":"root","children":[{"type":"element","tagName":"svg","properties":{"viewBox":"0 0 20 20"},"children":[{"type":"element","tagName":"path","properties":{"d":"M16.25 3H12a.75.75 0 0 0 0 1.5h2.44l-3.47 3.47a.75.75 0 0 0 1.06 1.06l3.47-3.47V8A.75.75 0 0 0 17 8V3.75a.75.75 0 0 0-.75-.75ZM3.75 17H8a.75.75 0 0 0 0-1.5H5.56l3.47-3.47a.75.75 0 1 0-1.06-1.06L4.5 14.44V12A.75.75 0 0 0 3 12v4.25a.75.75 0 0 0 .75.75Z"},"children":[]}],"metadata":""}]},"name":"fullscreen-mode-on"};
+
+export default FullscreenModeOn;

package/src/icons/ast/FullscreenModeOnIcon.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const FullscreenModeOnIcon: 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":"M3.333 2.583h3.334a.75.75 0 1 1 0 1.5H5.144l3.72 3.72a.75.75 0 1 1-1.061 1.06l-3.72-3.719v1.523a.75.75 0 1 1-1.5 0V3.333a.75.75 0 0 1 .75-.75Zm11.523 1.5h-1.523a.75.75 0 0 1 0-1.5h3.334a.75.75 0 0 1 .75.75v3.334a.75.75 0 0 1-1.5 0V5.144l-3.72 3.72a.75.75 0 0 1-1.06-1.061l3.719-3.72Zm-5.992 7.053a.75.75 0 0 1 0 1.061l-3.72 3.72h1.523a.75.75 0 1 1 0 1.5H3.333a.75.75 0 0 1-.75-.75v-3.334a.75.75 0 0 1 1.5 0v1.523l3.72-3.72a.75.75 0 0 1 1.06 0Zm2.272 0a.75.75 0 0 1 1.061 0l3.72 3.72v-1.523a.75.75 0 0 1 1.5 0v3.334a.75.75 0 0 1-.75.75h-3.334a.75.75 0 0 1 0-1.5h1.523l-3.72-3.72a.75.75 0 0 1 0-1.06Z"},"children":[]}],"metadata":""}]},"name":"fullscreen-mode-on-icon"};
+
+export default FullscreenModeOnIcon;

package/src/icons/ast/MapMode.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const MapMode: 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.106 2.695a.75.75 0 0 1 .73-.032L7.5 4.995l4.665-2.332a.75.75 0 0 1 .67 0l5 2.5a.75.75 0 0 1 .415.67v10.834a.75.75 0 0 1-1.085.67L12.5 15.005l-4.665 2.332a.75.75 0 0 1-.67 0l-5-2.5a.75.75 0 0 1-.415-.67V3.333a.75.75 0 0 1 .356-.638ZM13.25 13.703l3.5 1.75V6.297l-3.5-1.75v9.156Zm-1.5-9.156v9.156l-3.5 1.75V6.297l3.5-1.75Zm-5 1.75-3.5-1.75v9.156l3.5 1.75V6.297Z"},"children":[]}],"metadata":""}]},"name":"map-mode"};
+
+export default MapMode;

package/src/icons/ast/ZoomIn.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const ZoomIn: 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":"M10 4.25a.75.75 0 0 1 .75.75v4.25H15a.75.75 0 0 1 0 1.5h-4.25V15a.75.75 0 0 1-1.5 0v-4.25H5a.75.75 0 0 1 0-1.5h4.25V5a.75.75 0 0 1 .75-.75Z"},"children":[]}],"metadata":""}]},"name":"zoom-in"};
+
+export default ZoomIn;

package/src/icons/ast/ZoomOut.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const ZoomOut: 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":"M4.25 10A.75.75 0 0 1 5 9.25h10a.75.75 0 0 1 0 1.5H5a.75.75 0 0 1-.75-.75Z"},"children":[]}],"metadata":""}]},"name":"zoom-out"};
+
+export default ZoomOut;

package/src/icons/ast/index.tsx

@@ -93,11 +93,15 @@ export { default as Fields } from './Fields';
 export { default as Figma } from './Figma';
 export { default as FileUpload } from './FileUpload';
 export { default as Filter } from './Filter';
+export { default as FitToScreen } from './FitToScreen';
 export { default as FocusModeOff } from './FocusModeOff';
 export { default as FocusMode } from './FocusMode';
 export { default as Folder } from './Folder';
 export { default as FormWithCover } from './FormWithCover';
 export { default as FormWithoutCover } from './FormWithoutCover';
+export { default as FullscreenModeOffIcon } from './FullscreenModeOffIcon';
+export { default as FullscreenModeOnIcon } from './FullscreenModeOnIcon';
+export { default as FullscreenModeOn } from './FullscreenModeOn';
 export { default as Github } from './Github';
 export { default as Gitlab } from './Gitlab';
 export { default as GlobeSimple } from './GlobeSimple';
@@ -134,6 +138,7 @@ export { default as LineDivider } from './LineDivider';
 export { default as Link } from './Link';
 export { default as Lock } from './Lock';
 export { default as Loom } from './Loom';
+export { default as MapMode } from './MapMode';
 export { default as MenuCollapser } from './MenuCollapser';
 export { default as MessagePlusSquare } from './MessagePlusSquare';
 export { default as Milestones } from './Milestones';
@@ -302,3 +307,5 @@ export { default as Views } from './Views';
 export { default as WarningTriangle } from './WarningTriangle';
 export { default as Warning } from './Warning';
 export { default as Youtube } from './Youtube';
+export { default as ZoomIn } from './ZoomIn';
+export { default as ZoomOut } from './ZoomOut';

package/src/icons/react/FitToScreen.tsx

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

package/src/icons/react/FullscreenModeOffIcon.tsx

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

package/src/icons/react/FullscreenModeOn.tsx

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

package/src/icons/react/FullscreenModeOnIcon.tsx

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

package/src/icons/react/MapMode.tsx

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

package/src/icons/react/ZoomIn.tsx

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

package/src/icons/react/ZoomOut.tsx

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

package/src/icons/react/index.tsx

@@ -93,11 +93,15 @@ export { default as Fields } from './Fields';
 export { default as Figma } from './Figma';
 export { default as FileUpload } from './FileUpload';
 export { default as Filter } from './Filter';
+export { default as FitToScreen } from './FitToScreen';
 export { default as FocusModeOff } from './FocusModeOff';
 export { default as FocusMode } from './FocusMode';
 export { default as Folder } from './Folder';
 export { default as FormWithCover } from './FormWithCover';
 export { default as FormWithoutCover } from './FormWithoutCover';
+export { default as FullscreenModeOffIcon } from './FullscreenModeOffIcon';
+export { default as FullscreenModeOnIcon } from './FullscreenModeOnIcon';
+export { default as FullscreenModeOn } from './FullscreenModeOn';
 export { default as Github } from './Github';
 export { default as Gitlab } from './Gitlab';
 export { default as GlobeSimple } from './GlobeSimple';
@@ -134,6 +138,7 @@ export { default as LineDivider } from './LineDivider';
 export { default as Link } from './Link';
 export { default as Lock } from './Lock';
 export { default as Loom } from './Loom';
+export { default as MapMode } from './MapMode';
 export { default as MenuCollapser } from './MenuCollapser';
 export { default as MessagePlusSquare } from './MessagePlusSquare';
 export { default as Milestones } from './Milestones';
@@ -302,3 +307,5 @@ export { default as Views } from './Views';
 export { default as WarningTriangle } from './WarningTriangle';
 export { default as Warning } from './Warning';
 export { default as Youtube } from './Youtube';
+export { default as ZoomIn } from './ZoomIn';
+export { default as ZoomOut } from './ZoomOut';

package/src/select/custom-select-partials/drop-down-indicator.tsx

@@ -10,17 +10,26 @@ import {GroupBase} from "../index";
 const expanderStyle = css`
   transition: transform ${transition};
 `;
-export function DropdownIndicator<
+
+export function AlwaysVisibleDropdownIndicator<
   TOption,
   IsMulti extends boolean = boolean,
   Group extends GroupBase<TOption> = GroupBase<TOption>
 >(props: DropdownIndicatorProps<TOption, IsMulti, Group>) {
-  if (props.selectProps.isDisabled) {
-    return null;
-  }
   return (
     <div className={cn(expanderStyle, props.selectProps.menuIsOpen && expanderExpandedStyle)}>
       <ArrowCollapseVertical color={themeVars.disabledTextColor} />
     </div>
   );
 }
+
+export function DropdownIndicator<
+  TOption,
+  IsMulti extends boolean = boolean,
+  Group extends GroupBase<TOption> = GroupBase<TOption>
+>(props: DropdownIndicatorProps<TOption, IsMulti, Group>) {
+  if (props.selectProps.isDisabled) {
+    return null;
+  }
+  return <AlwaysVisibleDropdownIndicator {...props} />;
+}

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

@@ -182,6 +182,7 @@ type Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> = {
   onMenuOpen?: () => void;
   onMenuClose?: () => void | boolean;
   getPopupContainer?: () => HTMLElement;
+  onSelectKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
 };
 
 function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
@@ -217,6 +218,7 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
     onMenuOpen,
     onMenuClose,
     getPopupContainer,
+    onSelectKeyDown,
   } = props;
   const [triggerElement, setTriggerElement] = useState<HTMLDivElement | null>(null);
   const [visible, setVisible] = useControllableState({
@@ -365,6 +367,7 @@ function SelectInPopoverInner<Option, IsMulti extends boolean, Group extends Gro
                   event.preventDefault();
                   event.stopPropagation();
                 }
+                onSelectKeyDown?.(event);
               }}
               autoFocus={autoFocus}
               onBlur={() => {