@fibery/ui-kit 1.38.0 → 1.38.1

package/src/kbd.tsx

@@ -0,0 +1,46 @@
+import {css, cx} from "@linaria/core";
+import {border, lineHeight, space, textStyles, themeVars} from "./design-system";
+import {useIsSupportHardwareKeyboard} from "./use-is-support-hardware-keyboard";
+
+export const kbdCss = css`
+  ${{
+    ...textStyles.small,
+    ...textStyles.numeric.tabularOn,
+  }}
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: ${space.s18}px;
+  height: ${space.s18}px;
+  padding: ${space.s2}px;
+  border-radius: ${border.radius4}px;
+  border: ${themeVars.shortcutBorderColor};
+  color: ${themeVars.shortcutTextColor};
+  line-height: ${lineHeight.nowrap};
+  white-space: nowrap;
+  user-select: none;
+`;
+
+export const Kbd = ({className, ...props}: React.ComponentProps<"kbd">): JSX.Element | null => {
+  const isSupportHardwareKeyboard = useIsSupportHardwareKeyboard();
+  if (!isSupportHardwareKeyboard) {
+    return null;
+  }
+  return <kbd className={cx(kbdCss, className)} {...props} />;
+};
+
+export const KbdGroup = ({className, ...props}: React.ComponentProps<"kbd">) => {
+  return (
+    <kbd
+      className={cx(
+        className,
+        css`
+          display: flex;
+          align-items: center;
+          gap: ${space.s2}px;
+        `
+      )}
+      {...props}
+    />
+  );
+};

package/src/modal-menu/modal-menu-item.tsx

@@ -4,11 +4,12 @@ import {space, textStyles} from "../design-system";
 import {useModalMenu} from "./contexts/modal-menu-context";
 
 interface ModalMenuItemProps extends Omit<ComponentProps<"div">, "onSelect"> {
+  disabled?: boolean;
   onSelect?: (event: Event) => void;
   children?: ReactNode;
 }
 
-export const ModalMenuItem = ({children, onSelect, ...otherProps}: ModalMenuItemProps) => {
+export const ModalMenuItem = ({children, disabled, onSelect, ...otherProps}: ModalMenuItemProps) => {
   const {onOpenChange} = useModalMenu();
 
   return (
@@ -20,10 +21,17 @@ export const ModalMenuItem = ({children, onSelect, ...otherProps}: ModalMenuItem
         css`
           ${textStyles.big}
           padding: ${space.s10}px ${space.s16}px ${space.s10}px ${space.s16}px;
-        `
+        `,
+        disabled &&
+          css`
+            opacity: 0.4;
+          `
       )}
       onClick={(event) => {
         otherProps.onClick?.(event);
+        if (disabled) {
+          return;
+        }
         const selectionEvent = new CustomEvent("modal-menu-select", {bubbles: true, cancelable: true});
         onSelect?.(selectionEvent);
         if (!selectionEvent.defaultPrevented) {

package/src/modal-menu/modal-menu-trigger.tsx

@@ -4,11 +4,20 @@ import {useModalMenu} from "./contexts/modal-menu-context";
 
 interface ModalMenuTriggerProps extends ComponentProps<"div"> {
   asChild?: boolean;
+  triggerEvent?: "click" | "context-menu";
   children: ReactHTMLElement<HTMLDivElement> | ReactNode;
 }
 
-export const ModalMenuTrigger = ({asChild, children, onClick, ...otherProps}: ModalMenuTriggerProps) => {
+export const ModalMenuTrigger = ({
+  asChild,
+  triggerEvent,
+  children,
+  onClick,
+  onContextMenu,
+  ...otherProps
+}: ModalMenuTriggerProps) => {
   const {open, onOpenChange} = useModalMenu();
+
   if (asChild) {
     const className = (children as ReactHTMLElement<HTMLDivElement>)?.props?.className;
     return cloneElement(children as ReactHTMLElement<HTMLDivElement>, {
@@ -16,7 +25,15 @@ export const ModalMenuTrigger = ({asChild, children, onClick, ...otherProps}: Mo
       className: cx(className, otherProps.className),
       onClick: (event) => {
         onClick?.(event);
-        onOpenChange(!open);
+        if (triggerEvent === "click") {
+          onOpenChange(!open);
+        }
+      },
+      onContextMenu: (event) => {
+        onContextMenu?.(event);
+        if (triggerEvent === "context-menu") {
+          onOpenChange(!open);
+        }
       },
     });
   }

package/src/notification-dot.tsx

@@ -10,14 +10,23 @@ const activityIndicatorStyle = css`
   }}
 `;
 
-export const NotificationDot = ({big = true, color = themeVars.active}: {big: boolean; color: string}) => {
+type PropsType = {
+  big?: boolean;
+  color?: string;
+  style?: Record<string, string | number | null>;
+};
+
+export const NotificationDot = ({big = true, color = themeVars.active, style}: PropsType) => {
   const size = big ? space.s6 : space.s4;
   const marginTop = big ? -6 : -1;
   const marginRight = big ? -1 : 0;
-  return (
-    <div
-      className={activityIndicatorStyle}
-      style={{backgroundColor: color, width: size, height: size, marginTop, marginRight}}
-    />
-  );
+  const styleObject = {
+    backgroundColor: color,
+    width: size,
+    height: size,
+    marginTop,
+    marginRight,
+    ...style,
+  };
+  return <div className={activityIndicatorStyle} style={styleObject} />;
 };

package/src/platform-symbols.ts

@@ -0,0 +1,9 @@
+import {isMac} from "./platform";
+
+export const ctrlSymbol = isMac ? "⌘" : "Ctrl";
+export const explicitCtrlSymbol = isMac ? "⌃" : "Ctrl";
+export const winSymbol = isMac ? "⌘" : "Win";
+export const shiftSymbol = isMac ? "⇧" : "⇧";
+export const altSymbol = isMac ? "⌥" : "Alt";
+export const deleteSymbol = isMac ? "⌫" : "Delete";
+export const enterSymbol = isMac ? "↵" : "↵";

package/src/platform.ts

@@ -1,4 +1,6 @@
 import {UAParser} from "ua-parser-js";
 
 export const isMac = navigator.platform.startsWith("Mac");
+export const isWindows = navigator.platform.startsWith("Win");
+export const isLinux = navigator.platform.startsWith("Linux");
 export const isMobile = new UAParser(navigator.userAgent).getDevice().type === "mobile";

package/src/popover/index.tsx

@@ -36,7 +36,7 @@ import {useTheme} from "../theme-provider";
 import {$TSFixMe} from "../tsfixme";
 import {useIsPhone} from "../use-is-phone";
 import {usePopupModifiers} from "./popup-modifiers-context";
-import {getMaxSize, observeWidth} from "./modifiers";
+import {applyMaxSize, makeMaxSizeModifier, observeWidth} from "./modifiers";
 import {isElementReference, Reference} from "./reference";
 import {basicPopupClassName, basicPopupContainerClassName, hidePopupWhenTriggerIsHiddenClassName} from "./styles";
 import {MobilePopupProvider, useMobilePopup} from "./mobile-popup-context";
@@ -249,13 +249,13 @@ const Trigger = ({asChild = false, reference, children}: TriggerProps) => {
     }
   }, [reference, setTriggerElement]);
 
-  if (reference) {
+  // Reference is passed
+  if (reference !== undefined) {
     return null;
   }
 
   if (asChild && isValidElement(children)) {
     return cloneElement(children, {
-      // @ts-expect-error: React.cloneElement typing does not include `ref`, but it's valid at runtime
       ref: setTriggerElement,
       "aria-expanded": open,
       "aria-haspopup": true,
@@ -307,6 +307,8 @@ type ContentProps = {
 
 export type ContentRef = {update: (() => Promise<unknown>) | null};
 
+const padding = space.s8;
+
 const Content = forwardRef<ContentRef, ContentProps>(function PopoverContentInner(
   {
     children,
@@ -341,23 +343,44 @@ const Content = forwardRef<ContentRef, ContentProps>(function PopoverContentInne
 
   // We get infinite popup renders if this is not in a separate memo
   const shrinkableModifiers = useMemo(() => {
-    return shrinkable ? getMaxSize(preventOverflowOptions) : [];
+    return shrinkable
+      ? [
+          makeMaxSizeModifier({
+            padding,
+            ...preventOverflowOptions,
+          }),
+          applyMaxSize,
+        ]
+      : [];
   }, [preventOverflowOptions, shrinkable]);
 
   const modifiers = useMemo(() => {
     return _.compact([
-      {name: "flip", options: {...popupModifiers.flipOptions, ...flipOptions}},
+      {
+        name: "flip",
+        options: {
+          padding,
+          ...popupModifiers.flipOptions,
+          ...flipOptions,
+        },
+      },
       {
         name: "preventOverflow",
         options: {
           tether: false,
-          padding: space.s6,
+          padding,
           ...popupModifiers.preventOverflowOptions,
           ...preventOverflowOptions,
         },
       },
-      {name: "offset", options: {offset: offset}},
-      !transform && {name: "computeStyles", options: {gpuAcceleration: false}},
+      {
+        name: "offset",
+        options: {offset},
+      },
+      !transform && {
+        name: "computeStyles",
+        options: {gpuAcceleration: false},
+      },
       observeWidth,
       ...shrinkableModifiers,
       ...additionalModifiers,

package/src/popover/modifiers.tsx

@@ -1,30 +1,37 @@
 import {Options as PreventOverflowOptions} from "@popperjs/core/lib/modifiers/preventOverflow";
-import {$TSFixMe} from "../tsfixme";
-import {Modifier, ModifierArguments} from "@popperjs/core";
+import {Modifier, ModifierArguments, Placement, Boundary, RootBoundary, Padding, Context} from "@popperjs/core";
 import maxSize from "popper-max-size-modifier";
 import {getResizeListener} from "@fibery/helpers/utils/resize-listener";
 import {isElementReference} from "./reference";
 import _ from "lodash";
 
-type PopupModifier = Modifier<$TSFixMe, $TSFixMe>;
+type MaxSizeOptions = {
+  placement: Placement;
+  boundary: Boundary;
+  rootBoundary: RootBoundary;
+  elementContext: Context;
+  altBoundary: boolean;
+  padding: Padding;
+};
 
-export const getMaxSize = (overflowOptions: Partial<PreventOverflowOptions>): PopupModifier[] => [
-  {
+export const makeMaxSizeModifier = (options: Partial<PreventOverflowOptions>): Modifier<"maxSize", MaxSizeOptions> => {
+  return {
     ...maxSize,
-    options: overflowOptions,
-  },
-  {
-    name: "applyMaxSize",
-    enabled: true,
-    phase: "beforeWrite",
-    requires: ["maxSize"],
-    fn({state}) {
-      const {width, height} = state.modifiersData.maxSize;
-      state.styles.popper.maxWidth = `${width}px`;
-      state.styles.popper.maxHeight = `${height}px`;
-    },
+    options,
+  };
+};
+
+export const applyMaxSize: Modifier<"applyMaxSize", Record<string, never>> = {
+  name: "applyMaxSize",
+  enabled: true,
+  phase: "beforeWrite",
+  requires: ["maxSize"],
+  fn({state}) {
+    const {width, height} = state.modifiersData.maxSize;
+    state.styles.popper.maxWidth = `${width}px`;
+    state.styles.popper.maxHeight = `${height}px`;
   },
-];
+};
 
 const observeWidthEffect: (arg0: ModifierArguments<Record<string, unknown>>) => void = ({state, instance}) => {
   const {popper, reference} = state.elements;
@@ -54,7 +61,7 @@ const observeWidthEffect: (arg0: ModifierArguments<Record<string, unknown>>) =>
   };
 };
 
-export const observeWidth: PopupModifier = {
+export const observeWidth: Modifier<"observeWidth", Record<string, never>> = {
   name: "observeWidth",
   enabled: true,
   phase: "main",