@fibery/ui-kit 1.34.4 → 1.34.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fibery/ui-kit",
-  "version": "1.34.4",
+  "version": "1.34.6",
   "private": false,
   "files": [
     "src/antd/styles.ts",
@@ -28,10 +28,13 @@
     "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",
+    "src/use-is-media-query-matched.ts"
   ],
   "license": "UNLICENSED",
   "dependencies": {
@@ -74,9 +77,9 @@
     "screenfull": "6.0.1",
     "tabbable": "5.2.1",
     "ua-parser-js": "1.0.39",
-    "@fibery/react": "1.4.0",
     "@fibery/emoji-data": "2.6.0",
-    "@fibery/helpers": "1.3.0"
+    "@fibery/helpers": "1.3.0",
+    "@fibery/react": "1.4.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/icons/ast/UserGroup.ts

@@ -0,0 +1,8 @@
+
+// This icon file is generated automatically.
+
+import { IconDefinition } from '../types';
+
+const UserGroup: 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.5 2A2.5 2.5 0 0 0 2 4.5v11A2.5 2.5 0 0 0 4.5 18h11a2.5 2.5 0 0 0 2.5-2.5v-11A2.5 2.5 0 0 0 15.5 2h-11Zm0 1.5c-.552 0-1 .557-1 1.11V15.5a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-11a1 1 0 0 0-1-1h-11Zm3.917 4.083a1.583 1.583 0 1 1 3.167 0 1.583 1.583 0 0 1-3.167 0ZM10 11.667c-.982 0-1.64.563-1.772 1.097a.75.75 0 1 1-1.456-.362c.34-1.367 1.742-2.235 3.228-2.235 1.486 0 2.888.868 3.228 2.235a.75.75 0 1 1-1.456.362c-.133-.534-.79-1.097-1.772-1.097Z"},"children":[]}],"metadata":""}]},"name":"user-group"};
+
+export default UserGroup;

package/src/icons/ast/index.tsx

@@ -317,6 +317,7 @@ export { default as UnlockFilled } from './UnlockFilled';
 export { default as UnlockOutline } from './UnlockOutline';
 export { default as Upgrade } from './Upgrade';
 export { default as UsbFlashDrive } from './UsbFlashDrive';
+export { default as UserGroup } from './UserGroup';
 export { default as UserRole } from './UserRole';
 export { default as ViewBoard } from './ViewBoard';
 export { default as ViewCalendar } from './ViewCalendar';

package/src/icons/react/UserGroup.tsx

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

package/src/icons/react/index.tsx

@@ -317,6 +317,7 @@ export { default as UnlockFilled } from './UnlockFilled';
 export { default as UnlockOutline } from './UnlockOutline';
 export { default as Upgrade } from './Upgrade';
 export { default as UsbFlashDrive } from './UsbFlashDrive';
+export { default as UserGroup } from './UserGroup';
 export { default as UserRole } from './UserRole';
 export { default as ViewBoard } from './ViewBoard';
 export { default as ViewCalendar } from './ViewCalendar';

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-media-query-matched.ts

@@ -0,0 +1,18 @@
+import {useEffect, useState} from "react";
+import {getMediaQueryList, subscribeOnChange} from "./media-query-utils";
+
+export function useIsMediaQueryMatched(mediaQuery: string) {
+  const [isMediaQueryMatched, setIsMediaQueryMatched] = useState(() => {
+    const mediaQueryList = getMediaQueryList(mediaQuery);
+    return mediaQueryList.matches;
+  });
+  useEffect(() => {
+    const unsubscribe = subscribeOnChange(getMediaQueryList(mediaQuery), (evt) => {
+      setIsMediaQueryMatched(evt.matches);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [mediaQuery]);
+  return isMediaQueryMatched;
+}

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();
+}