@fibery/ui-kit 1.38.2 → 1.39.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @fibery/ui-kit
 
+## 1.39.0
+
+### Minor Changes
+
+- 004d205: make prosemirror code block node resizable
+
 ## 1.38.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.38.2",
+  "version": "1.39.0",
   "private": false,
   "license": "UNLICENSED",
   "dependencies": {
@@ -47,9 +47,9 @@
     "screenfull": "6.0.2",
     "tabbable": "5.2.1",
     "ua-parser-js": "1.0.39",
-    "@fibery/emoji-data": "2.7.1",
     "@fibery/helpers": "1.3.4",
-    "@fibery/react": "1.4.6"
+    "@fibery/react": "1.4.6",
+    "@fibery/emoji-data": "2.7.1"
   },
   "peerDependencies": {
     "react": "18.3.1",

package/src/card-container.tsx

@@ -283,6 +283,8 @@ type Props = {
   after?: ReactNode;
   floating?: ReactNode;
   cover?: ReactNode;
+  // TODO: refactor. Extract Cover container
+  autoCoverHeight?: boolean;
   size: CardSize;
   contentStyle?: CSSProperties;
   backgroundColors?: string[] | null;
@@ -298,6 +300,7 @@ const cardContent = css`
 
 export const CardContainer = ({
   cover,
+  autoCoverHeight,
   before,
   title,
   after,
@@ -333,7 +336,7 @@ export const CardContainer = ({
       {showCover && (
         <div
           className={cx(coverClassName, hasContent && coverWithContentClassName)}
-          style={{height: coverHeightBySize[size] || 0}}
+          style={!autoCoverHeight ? {height: coverHeightBySize[size] || 0} : undefined}
         >
           {cover}
         </div>

package/src/collapsible-section.tsx

@@ -55,6 +55,7 @@ export const CollapsibleSection = ({
         headerCss,
         css`
           cursor: pointer;
+          user-select: none;
         `
       )}
       onClick={onToggle}

package/src/use-is-phone.tsx

@@ -24,25 +24,26 @@ function isVerticalMobileBreakpointDisabled() {
   return urlParams.has("no-vertical-mobile-breakpoint");
 }
 
-export const isPhoneApp = Boolean(
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore - injected by consumer app
-  window.__FIBERY_MOBILE_APP_API
-);
+export const isPhoneApp = () =>
+  Boolean(
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore - injected by consumer app
+    window.__FIBERY_MOBILE_APP_API
+  );
 
 export const phoneMediaQuery = isVerticalMobileBreakpointDisabled()
   ? "(max-width: 450px)"
   : "(max-width: 450px), (max-height: 450px)";
 
 export function isPhoneMode() {
-  return isPhoneApp || getMediaQueryList(phoneMediaQuery).matches;
+  return isPhoneApp() || getMediaQueryList(phoneMediaQuery).matches;
 }
 
 export function IsPhoneProvider({children}: {children: ReactNode}) {
   const isPhone = useIsMediaQueryMatched(phoneMediaQuery);
   useLayoutEffect(() => {
     const htmlElement = document.querySelector("html");
-    if (!htmlElement || isPhoneApp) {
+    if (!htmlElement || isPhoneApp()) {
       if (htmlElement) {
         htmlElement.classList.add(mobileRootClassName);
         return () => {
@@ -61,5 +62,5 @@ export function IsPhoneProvider({children}: {children: ReactNode}) {
       htmlElement.classList.remove(mobileRootClassName);
     };
   }, [isPhone]);
-  return <Provider value={isPhoneApp || isPhone}>{children}</Provider>;
+  return <Provider value={isPhoneApp() || isPhone}>{children}</Provider>;
 }

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

@@ -1,7 +1,7 @@
 import {ReactNode, useEffect, useState} from "react";
 import {createContext} from "@fibery/react/src/create-context";
 import _ from "lodash";
-import {useIsPhone} from "./use-is-phone";
+import {isPhoneApp} from "./use-is-phone";
 import {keyboardHeightVar, mobileKeyboardOpenClassName} from "./mobile-styles";
 
 const defaultKeyboardHeight = 350;
@@ -17,13 +17,12 @@ const [IsOnScreenKeyboardOpenedValueProvider, useIsOnScreenKeyboardOpened] = cre
 );
 
 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) {
+    if (!viewport || !isPhoneApp()) {
       return _.noop;
     }
 
@@ -55,7 +54,7 @@ export function OnScreenKeyboardContextProvider({children}: {children: ReactNode
     return () => {
       viewport.removeEventListener("resize", viewportHandler);
     };
-  }, [initialViewPortHeight, isPhone, keyboardHeight, keyboardVisible]);
+  }, [initialViewPortHeight, keyboardHeight, keyboardVisible]);
   return (
     <OnScreenKeyboardHeightValueProvider value={keyboardHeight}>
       <IsOnScreenKeyboardOpenedValueProvider value={keyboardVisible}>{children}</IsOnScreenKeyboardOpenedValueProvider>