@fibery/ui-kit 1.34.4 → 1.34.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.34.4",
+  "version": "1.34.5",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -28,10 +28,12 @@
     "src/a11y-color.ts",
     "src/integration-compact-info-button.tsx",
     "src/dropdown-menu",
-    "src/shortcut-badge",
-    "src/tsfixme",
+    "src/shortcut-badge.tsx",
+    "src/tsfixme.ts",
     "src/toggle.tsx",
-    "src/toggle-on-off.tsx"
+    "src/toggle-on-off.tsx",
+    "src/use-is-support-hardware-keyboard.ts",
+    "src/use-is-phone.ts"
   ],
   "license": "UNLICENSED",
   "dependencies": {

package/src/shortcut-badge.tsx

@@ -0,0 +1,28 @@
+import {css, cx} from "@linaria/core";
+import {textStyles, border, space, lineHeight, themeVars} from "./design-system";
+import {useIsSupportHardwareKeyboard} from "./use-is-support-hardware-keyboard";
+
+export const shortcutCss = css`
+  ${{
+    ...textStyles.small,
+    borderRadius: border.radius4,
+    border: themeVars.shortcutBorderColor,
+    color: themeVars.shortcutTextColor,
+    paddingTop: space.s2,
+    paddingBottom: space.s2,
+    paddingLeft: space.s4,
+    paddingRight: space.s4,
+    lineHeight: lineHeight.nowrap,
+    whiteSpace: "nowrap",
+    display: "inline-block",
+    userSelect: "none",
+  }}
+`;
+
+export const ShortcutBadge = ({className, shortcut}: {className?: string; shortcut: string}): JSX.Element | null => {
+  const isSupportHardwareKeyboard = useIsSupportHardwareKeyboard();
+  if (!isSupportHardwareKeyboard) {
+    return null;
+  }
+  return <div className={cx(shortcutCss, className)}>{shortcut}</div>;
+};

package/src/tsfixme.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type $TSFixMe = any;

package/src/use-is-phone.ts

@@ -0,0 +1,5 @@
+import {useIsMediaQueryMatched} from "./use-is-media-query-matched";
+
+export function useIsPhone() {
+  return useIsMediaQueryMatched("(max-width: 420px), (max-height: 420px)");
+}

package/src/use-is-support-hardware-keyboard.ts

@@ -0,0 +1,6 @@
+import {useIsPhone} from "./use-is-phone";
+
+export function useIsSupportHardwareKeyboard() {
+  // now we don't have media query for hardware keyboard support https://github.com/w3c/csswg-drafts/issues/3871
+  return !useIsPhone();
+}