Sessings button wa added

Author: vkruglikov

Diff for: .changeset/lemon-apes-hunt.md

@@ -0,0 +1,5 @@
+---
+'@vkruglikov/react-telegram-web-app': minor
+---
+
+Add SettingsButton

Diff for: README.md

@@ -48,6 +48,7 @@ const Content = () => {
 - [WebAppProvider](./docs/README.md#webappprovider) -
   WebAppProvider provide context with WebApp for components and hooks.
   You can try to pass an object with options
+- [SettingsButton](./docs/README.md#settingsbutton) Settings button (mvp)
 
   ```jsx
   import { WebAppProvider, MainButton, BackButton } from '@vkruglikov/react-telegram-web-app';

Diff for: docs/README.md

@@ -9,6 +9,7 @@
 - [BackButtonProps](interfaces/BackButtonProps.md)
 - [MainButtonProps](interfaces/MainButtonProps.md)
 - [ScanQrPopupParams](interfaces/ScanQrPopupParams.md)
+- [SettingsButtonProps](interfaces/SettingsButtonProps.md)
 - [ShowPopupButton](interfaces/ShowPopupButton.md)
 - [ShowPopupParams](interfaces/ShowPopupParams.md)
 - [ThemeParams](interfaces/ThemeParams.md)
@@ -55,6 +56,7 @@
 
 - [BackButton](README.md#backbutton)
 - [MainButton](README.md#mainbutton)
+- [SettingsButton](README.md#settingsbutton)
 - [WebAppProvider](README.md#webappprovider)
 
 ## Type Aliases
@@ -245,6 +247,7 @@ This object describe options be able to set through WebAppProvider
 
 | Name                         | Type      | Description                                                                                                                                                                                                                                   |
 | :--------------------------- | :-------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `async?`                     | `boolean` | -                                                                                                                                                                                                                                             |
 | `smoothButtonsTransition?`   | `boolean` | When is `true`, we can smooth button transitions due to show(), hide() calls. So when you use MainButton or BackButton on multiple pages, there will be no noticeable flickering of the button during transitions **`Default Value`** `false` |
 | `smoothButtonsTransitionMs?` | `number`  | **`Default Value`** `10` **`Remarks`**                                                                                                                                                                                                        |
 
@@ -493,9 +496,10 @@ You have to look original description switchInlineQuery in [telegram!WebApp](htt
 | `first_name`                | `string`  |
 | `id`                        | `number`  |
 | `is_bot?`                   | `boolean` |
+| `is_premium?`               | `boolean` |
 | `language_code?`            | `string`  |
 | `last_name?`                | `string`  |
-| `photo_url?`                | `true`    |
+| `photo_url?`                | `string`  |
 | `username?`                 | `string`  |
 
 ## Hooks
@@ -574,7 +578,7 @@ readonly [[`ImpactOccurredFunction`](README.md#impactoccurredfunction), [`Notifi
 
 ### useInitData
 
-▸ **useInitData**(): readonly [[`InitDataUnsafe`](README.md#initdataunsafe), `string`]
+▸ **useInitData**(): readonly [`undefined` \| [`InitDataUnsafe`](README.md#initdataunsafe), `undefined` \| `string`]
 
 This hook provides `initDataUnsafe` and `initData`
 You have to look original description in [telegram!WebApp](https://core.telegram.org/bots/webapps#initializing-mini-apps), because hook just return this.
@@ -588,7 +592,7 @@ const [initDataUnsafe, initData] = useInitData();
 
 #### Returns
 
-readonly [[`InitDataUnsafe`](README.md#initdataunsafe), `string`]
+readonly [`undefined` \| [`InitDataUnsafe`](README.md#initdataunsafe), `undefined` \| `string`]
 
 ---
 
@@ -757,6 +761,30 @@ import { MainButton } from '@vkruglikov/react-telegram-web-app';
 
 ---
 
+### SettingsButton
+
+▸ **SettingsButton**(`props`): `null`
+
+Renders a [telegram!SettingsButton](https://core.telegram.org/bots/webapps#settingsbutton) component in React app as [react!Component](https://reactjs.org/docs/react-component.html)
+
+```tsx
+import { SettingsButton } from '@vkruglikov/react-telegram-web-app';
+
+<SettingsButton onClick={() => console.log('Hello, I am settings button!')} />;
+```
+
+#### Parameters
+
+| Name    | Type                                                       |
+| :------ | :--------------------------------------------------------- |
+| `props` | [`SettingsButtonProps`](interfaces/SettingsButtonProps.md) |
+
+#### Returns
+
+`null`
+
+---
+
 ### WebAppProvider
 
 ▸ **WebAppProvider**(`props`): `ReactElement`<`any`, `string` \| `JSXElementConstructor`<`any`\>\>

Diff for: docs/interfaces/SettingsButtonProps.md

@@ -20,8 +20,6 @@ The props type of [`SettingsButton`](../README.md#settingsbutton).
 
 ▸ (): `void`
 
-The settings button press event handler
-
 ##### Returns
 
 `void`

Diff for: src/SettingsButton.tsx

@@ -1,13 +1,27 @@
-import { useContext, useEffect, useId } from 'react';
-import { useWebApp, useSmoothButtonsTransition, systemContext } from './core';
+import { useEffect } from 'react';
+import { useWebApp } from './core';
 
+/**
+ * The props type of {@link SettingsButton | `SettingsButton`}.
+ */
 export interface SettingsButtonProps {
   onClick?: () => void;
 }
 
+/**
+ * Renders a {@link telegram!SettingsButton} component in React app as {@link react!Component}
+ *
+ * ```tsx
+ * import { SettingsButton } from "@vkruglikov/react-telegram-web-app";
+ *
+ * <SettingsButton
+ *     onClick={() => console.log('Hello, I am settings button!')}
+ * />
+ * ```
+ * @param props
+ * @group React Components
+ */
 const SettingsButton = ({ onClick }: SettingsButtonProps): null => {
-  const system = useContext(systemContext);
-  const buttonId = useId();
   const WebApp = useWebApp();
 
   useEffect(() => {
@@ -21,12 +35,17 @@ const SettingsButton = ({ onClick }: SettingsButtonProps): null => {
     };
   }, [onClick, WebApp]);
 
-  useSmoothButtonsTransition({
-    show: WebApp?.SettingsButton?.show,
-    hide: WebApp?.SettingsButton?.hide,
-    currentShowedIdRef: system.SettingsButton,
-    id: buttonId,
-  });
+  useEffect(() => {
+    if (!WebApp?.SettingsButton) {
+      return;
+    }
+
+    WebApp.SettingsButton.show?.();
+
+    return () => {
+      WebApp.SettingsButton.hide?.();
+    };
+  }, [WebApp]);
 
   return null;
 };

Diff for: src/core/context.ts

@@ -38,13 +38,11 @@ export const optionsContext = createContext<Options>(DEFAULT_OPTIONS);
 type SystemContext = {
   MainButton: MutableRefObject<null | string>;
   BackButton: MutableRefObject<null | string>;
-  SettingsButton: MutableRefObject<null | string>;
 };
 
 export const createSystemContextValue = () => ({
   MainButton: { current: null },
   BackButton: { current: null },
-  SettingsButton: { current: null },
 });
 
 export const systemContext = createContext<SystemContext>(

Diff for: src/core/twa-types/WebApp.d.ts

@@ -56,7 +56,7 @@ export declare namespace TelegramWebApp {
     last_name?: string;
     username?: string;
     language_code?: string;
-    photo_url?: true;
+    photo_url?: string;
   }
 
   /**

Diff for: src/core/twa-types/WebAppVersion_7.0.d.ts

@@ -0,0 +1,6 @@
+export declare namespace TelegramWebAppVersion7_0 {
+  interface WebApp extends TelegramWebAppVersion6_9.WebApp {
+    // TODO Fix types SettingsButton
+    SettingsButton?: any;
+  }
+}

Diff for: src/core/twa-types/index.d.ts

@@ -4,10 +4,12 @@ import { TelegramWebAppVersion6_2 } from './WebAppVersion_6.2';
 import { TelegramWebAppVersion6_4 } from './WebAppVersion_6.4';
 import { TelegramWebAppVersion6_7 } from './WebAppVersion_6.7';
 import { TelegramWebAppVersion6_9 } from './WebAppVersion_6.9';
+import { TelegramWebAppVersion7_0 } from './WebAppVersion_7.0';
 
 export type WebApp = TelegramWebApp.WebApp &
   Partial<TelegramWebAppVersion6_1.WebApp> &
   Partial<TelegramWebAppVersion6_2.WebApp> &
   Partial<TelegramWebAppVersion6_4.WebApp> &
   Partial<TelegramWebAppVersion6_7.WebApp> &
-  Partial<TelegramWebAppVersion6_9.WebApp>;
+  Partial<TelegramWebAppVersion6_9.WebApp> &
+  Partial<TelegramWebAppVersion7_0.WebApp>;

Diff for: tests/__snapshots__/package.test.ts.snap

@@ -4,6 +4,7 @@ exports[`Package /lib should have correct /lib structure 1`] = `
 [
   "/BackButton.d.ts",
   "/MainButton.d.ts",
+  "/SettingsButton.d.ts",
   "/WebAppProvider.d.ts",
   [
     "/core/context.d.ts",
@@ -15,6 +16,7 @@ exports[`Package /lib should have correct /lib structure 1`] = `
       "/core/twa-types/WebAppVersion_6.4.d.ts",
       "/core/twa-types/WebAppVersion_6.7.d.ts",
       "/core/twa-types/WebAppVersion_6.9.d.ts",
+      "/core/twa-types/WebAppVersion_7.0.d.ts",
       "/core/twa-types/index.d.ts",
     ],
     "/core/useAsyncMode.d.ts",
@@ -43,6 +45,7 @@ exports[`Package /lib should have exports from modules 1`] = `
 {
   "BackButton": [Function],
   "MainButton": [Function],
+  "SettingsButton": [Function],
   "WebAppProvider": [Function],
   "useCloudStorage": [Function],
   "useExpand": [Function],

Diff for: typedoc.json

@@ -9,6 +9,7 @@
     "telegram": {
       "CloudStorage": "https://core.telegram.org/bots/webapps#cloudstorage",
       "MainButton": "https://core.telegram.org/bots/webapps#mainbutton",
+      "SettingsButton": "https://core.telegram.org/bots/webapps#settingsbutton",
       "ScanQrPopupParams": "https://core.telegram.org/bots/webapps#scanqrpopupparams",
       "BackButton": "https://core.telegram.org/bots/webapps#backbutton",
       "PopupParams": "https://core.telegram.org/bots/webapps#popupparams",