@gravity-ui/navigation 0.0.7 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## [0.2.0](https://github.com/gravity-ui/navigation/compare/v0.1.0...v0.2.0) (2022-10-31)
+
+
+### Features
+
+* add Settings component ([b7ad550](https://github.com/gravity-ui/navigation/commit/b7ad550825d5cc0ac416b57d0c35f6ccd459793d))
+
+
+### Bug Fixes
+
+* component AsideHeader should be stateless ([e2cbd15](https://github.com/gravity-ui/navigation/commit/e2cbd15921d051aada9246f27f34c60ca8169ec9))
+* onClosePanel should be called before onItemClick ([8d0acb5](https://github.com/gravity-ui/navigation/commit/8d0acb5603129817aea929f881f85a264b074fe7))
+* package-lock.json ([#26](https://github.com/gravity-ui/navigation/issues/26)) ([14f012e](https://github.com/gravity-ui/navigation/commit/14f012eeda4f97bbd0e4e48e7b83bf195cb3c0ab))
+* set z-index for .ycn-aside-header__content ([b793bc6](https://github.com/gravity-ui/navigation/commit/b793bc63ca760f608a4f5f2961af1947b0972fc2))
+* sticky-element should not be restrict by an extra parent element ([5ecfac3](https://github.com/gravity-ui/navigation/commit/5ecfac3da2b390255485aef63718b6a2c4c4a8c0))
+
+## [0.1.0](https://github.com/gravity-ui/navigation/compare/v0.0.7...v0.1.0) (2022-10-17)
+
+
+### Features
+
+* add ActionBar component ([#19](https://github.com/gravity-ui/navigation/issues/19)) ([595d418](https://github.com/gravity-ui/navigation/commit/595d4189f005615e4ba504cef4689d48fb6a798a))
+* **CompositeBar:** divider item type ([#11](https://github.com/gravity-ui/navigation/issues/11)) ([89f3b85](https://github.com/gravity-ui/navigation/commit/89f3b854ac9348837352809101502a876def8940))
+
 ## [0.0.7](https://github.com/gravity-ui/navigation/compare/v0.0.6...v0.0.7) (2022-10-11)
 
 

package/build/cjs/components/ActionBar/ActionBar.d.ts

@@ -0,0 +1,28 @@
+import { PropsWithChildren } from 'react';
+import './ActionBar.scss';
+export declare type Props = PropsWithChildren<{
+    'aria-label'?: string;
+    className?: string;
+}>;
+declare const PublicActionBar: {
+    ({ children, className, "aria-label": ariaLabel }: Props): JSX.Element;
+    displayName: string;
+} & {
+    Section: {
+        ({ children, type }: import("./Section/ActionBarSection").Props): JSX.Element;
+        displayName: string;
+    };
+    Group: {
+        ({ children, className, pull }: import("./Group/ActionBarGroup").Props): JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        ({ children, className, pull, spacing }: import("./Item/ActionBarItem").Props): JSX.Element;
+        displayName: string;
+    };
+    Separator: {
+        (): JSX.Element;
+        displayName: string;
+    };
+};
+export { PublicActionBar as ActionBar };

package/build/cjs/components/ActionBar/Group/ActionBarGroup.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from 'react';
+import { PropsWithPull } from '../types';
+import './ActionBarGroup.scss';
+export declare type Props = PropsWithChildren<PropsWithPull<{
+    className?: string;
+}>>;
+export declare const ActionBarGroup: {
+    ({ children, className, pull }: Props): JSX.Element;
+    displayName: string;
+};

package/build/cjs/components/ActionBar/Item/ActionBarItem.d.ts

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+import { PropsWithPull } from '../types';
+import './ActionBarItem.scss';
+export declare type Props = PropsWithChildren<PropsWithPull<{
+    spacing?: boolean;
+    className?: string;
+}>>;
+export declare const ActionBarItem: {
+    ({ children, className, pull, spacing }: Props): JSX.Element;
+    displayName: string;
+};

package/build/cjs/components/ActionBar/Section/ActionBarSection.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+import './ActionBarSection.scss';
+export declare type Props = PropsWithChildren<{
+    type?: 'primary' | 'secondary';
+}>;
+export declare const ActionBarSection: {
+    ({ children, type }: Props): JSX.Element;
+    displayName: string;
+};

package/build/cjs/components/ActionBar/Separator/ActionBarSeparator.d.ts

@@ -0,0 +1,5 @@
+import './ActionBarSeparator.scss';
+export declare const ActionBarSeparator: {
+    (): JSX.Element;
+    displayName: string;
+};

package/build/cjs/components/ActionBar/__stories__/ActionBar.stories.d.ts

@@ -0,0 +1,44 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+declare const _default: ComponentMeta<{
+    ({ children, className, "aria-label": ariaLabel }: import("../ActionBar").Props): JSX.Element;
+    displayName: string;
+} & {
+    Section: {
+        ({ children, type }: import("..").ActionBarSectionProps): JSX.Element;
+        displayName: string;
+    };
+    Group: {
+        ({ children, className, pull }: import("..").ActionBarGroupProps): JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        ({ children, className, pull, spacing }: import("..").ActionBarItemProps): JSX.Element;
+        displayName: string;
+    };
+    Separator: {
+        (): JSX.Element;
+        displayName: string;
+    };
+}>;
+export default _default;
+export declare const Showcase: ComponentStory<{
+    ({ children, className, "aria-label": ariaLabel }: import("../ActionBar").Props): JSX.Element;
+    displayName: string;
+} & {
+    Section: {
+        ({ children, type }: import("..").ActionBarSectionProps): JSX.Element;
+        displayName: string;
+    };
+    Group: {
+        ({ children, className, pull }: import("..").ActionBarGroupProps): JSX.Element;
+        displayName: string;
+    };
+    Item: {
+        ({ children, className, pull, spacing }: import("..").ActionBarItemProps): JSX.Element;
+        displayName: string;
+    };
+    Separator: {
+        (): JSX.Element;
+        displayName: string;
+    };
+}>;

package/build/cjs/components/ActionBar/__stories__/ActionBarShowcase.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function ActionBarShowcase(): JSX.Element;

package/build/cjs/components/ActionBar/index.d.ts

@@ -0,0 +1,5 @@
+export { ActionBar } from './ActionBar';
+export type { Props as ActionBarProps } from './ActionBar';
+export type { Props as ActionBarGroupProps } from './Group/ActionBarGroup';
+export type { Props as ActionBarItemProps } from './Item/ActionBarItem';
+export type { Props as ActionBarSectionProps } from './Section/ActionBarSection';

package/build/cjs/components/ActionBar/types.d.ts

@@ -0,0 +1,3 @@
+export declare type PropsWithPull<T> = T & {
+    pull?: 'left' | 'right' | 'center';
+};

package/build/cjs/{types/components → components}/AsideHeader/AsideHeader.d.ts

@@ -27,14 +27,9 @@ interface AsideHeaderDefaultProps {
 export interface AsideHeaderProps extends AsideHeaderGeneralProps, Partial<AsideHeaderDefaultProps> {
 }
 declare type AsideHeaderInnerProps = AsideHeaderGeneralProps & AsideHeaderDefaultProps;
-interface AsideHeaderState {
-    compact: boolean;
-}
-export declare class AsideHeader extends React.Component<AsideHeaderInnerProps, AsideHeaderState> {
+export declare class AsideHeader extends React.Component<AsideHeaderInnerProps> {
     static defaultProps: AsideHeaderDefaultProps;
     asideRef: React.RefObject<HTMLDivElement>;
-    constructor(props: AsideHeaderInnerProps);
-    componentDidUpdate(prevProps: AsideHeaderInnerProps): void;
     render(): JSX.Element;
     private renderFirstPane;
     private renderSecondPane;
@@ -45,6 +40,6 @@ export declare class AsideHeader extends React.Component<AsideHeaderInnerProps,
     private renderCollapseButton;
     private onCollapseButtonClick;
     private onCloseDrawer;
-    private onCompositeBarClick;
+    private onItemClick;
 }
 export {};

package/build/cjs/components/AsideHeader/__stories__/getAsideHeaderWrapper.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { AsideHeaderProps } from '../AsideHeader';
+export declare function getAsideHeaderWrapper(props?: AsideHeaderProps): (Story: FC) => JSX.Element;

package/build/cjs/{types/components → components}/CompositeBar/CompositeBar.d.ts

@@ -6,7 +6,7 @@ export interface CompositeBarProps {
     compact: boolean;
     enableCollapsing: boolean;
     dict?: AsideHeaderDict;
-    onItemClick?: (item: MenuItem) => void;
+    onItemClick?: (item: MenuItem, collapsed: boolean) => void;
 }
 interface CompositeBarState {
     activeItemIndex?: number;
@@ -14,9 +14,10 @@ interface CompositeBarState {
 export declare class CompositeBar extends React.Component<CompositeBarProps> {
     state: CompositeBarState;
     private listRef;
-    render(): JSX.Element;
+    render(): JSX.Element | null;
     private renderAutosizeMenu;
     private renderMenu;
     private getMoreButtonItem;
+    private getAutosizeListItems;
 }
 export {};

package/build/{esm/types → cjs}/components/CompositeBar/Item/Item.d.ts

@@ -13,6 +13,7 @@ interface ItemPopup {
 export interface ItemProps extends ItemPopup {
     item: MenuItem;
     enableTooltip?: boolean;
+    onItemClick?: (item: MenuItem, collapsed: boolean) => void;
 }
 interface ItemInnerProps extends ItemProps {
     compact: boolean;

package/build/cjs/components/CompositeBar/utils.d.ts

@@ -0,0 +1,6 @@
+import { MenuItem } from './../types';
+export declare function getItemHeight(item: MenuItem): 15 | 40 | 50;
+export declare function getItemsHeight(items: MenuItem[]): number;
+export declare function getSelectedItemIndex(items: MenuItem[]): number | undefined;
+export declare function getPinnedItems(items: MenuItem[]): MenuItem[];
+export declare function getItemsMinHeight(items: MenuItem[]): number;

package/build/cjs/{types/components → components}/FooterItem/FooterItem.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ItemProps } from '../CompositeBar/Item/Item';
 import './FooterItem.scss';
-export interface FooterItemProps extends ItemProps {
+export interface FooterItemProps extends Omit<ItemProps, 'onItemClick'> {
     compact: boolean;
 }
 export declare const FooterItem: React.FC<FooterItemProps>;

package/build/cjs/components/Settings/Settings.d.ts

@@ -0,0 +1,49 @@
+import React from 'react';
+import { IconProps } from '@gravity-ui/uikit';
+import './Settings.scss';
+interface SettingsProps {
+    initialPage?: string;
+    onPageChange?: (page: string | undefined) => void;
+    children: React.ReactNode;
+    renderNotFound?: () => React.ReactNode;
+    renderLoading?: () => React.ReactNode;
+    loading?: boolean;
+    dict?: SettingsDict;
+}
+declare type SettingsDict = Record<SettingsDictKeys, string>;
+declare type SettingsDictKeys = 'heading_settings' | 'placeholder_search' | 'not_found';
+interface SettingsGroupProps {
+    id?: string;
+    groupTitle: string;
+    children: React.ReactNode;
+}
+interface SettingsPageProps {
+    id?: string;
+    title: string;
+    icon: IconProps;
+    children: React.ReactNode;
+}
+interface SettingsSectionProps {
+    title: string;
+    header?: React.ReactNode;
+    children: React.ReactNode;
+    withBadge?: boolean;
+}
+interface SettingsItemProps {
+    title: string;
+    renderTitleComponent?: (highlightedTitle: React.ReactNode | null) => React.ReactNode;
+    align?: 'top' | 'center';
+    children: React.ReactNode;
+    withBadge?: boolean;
+}
+export declare function Settings({ loading, renderLoading, children, ...props }: SettingsProps): JSX.Element;
+export declare namespace Settings {
+    var defaultProps: {
+        dict: SettingsDict;
+    };
+    var Group: ({ children }: SettingsGroupProps) => JSX.Element;
+    var Page: ({ children }: SettingsPageProps) => JSX.Element;
+    var Section: ({ children }: SettingsSectionProps) => JSX.Element;
+    var Item: ({ title, children, align, withBadge, renderTitleComponent, }: SettingsItemProps) => JSX.Element;
+}
+export {};

package/build/cjs/components/Settings/SettingsMenu/SettingsMenu.d.ts

@@ -0,0 +1,27 @@
+import React from 'react';
+import { IconProps } from '@gravity-ui/uikit';
+import './SettingsMenu.scss';
+interface GroupItem {
+    groupTitle: string;
+    items: Item[];
+}
+interface Item {
+    id: string;
+    title: string;
+    icon?: IconProps;
+    disabled?: boolean;
+    withBadge?: boolean;
+}
+export declare type SettingsMenuItems = (GroupItem | Item)[];
+interface SettingsMenuProps {
+    items: SettingsMenuItems;
+    onChange: (id: string) => void;
+    activeItem?: string;
+    focusItem?: string;
+}
+export interface SettingsMenuInstance {
+    handleKeyDown(event: React.KeyboardEvent): boolean;
+    clearFocus(): void;
+}
+export declare const SettingsMenu: React.ForwardRefExoticComponent<SettingsMenuProps & React.RefAttributes<SettingsMenuInstance>>;
+export {};

package/build/cjs/components/Settings/SettingsSearch/SettingsSearch.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface SettingsSearchProps {
+    className?: string;
+    onChange: (search: string) => void;
+    debounce?: number;
+    inputRef?: React.Ref<HTMLInputElement>;
+    placeholder?: string;
+}
+export declare function SettingsSearch({ className, onChange, debounce, inputRef, placeholder, }: SettingsSearchProps): JSX.Element;
+export {};

package/build/cjs/components/Settings/__stories__/SettingsDemo.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import './SettingsDemo.scss';
+export interface DemoProps {
+    title: string;
+}
+export interface DemoRowProps {
+    title: string;
+}
+export declare const SettingsComponent: React.MemoExoticComponent<({ initialPage, withBadge }: {
+    initialPage?: string | undefined;
+    withBadge?: boolean | undefined;
+}) => JSX.Element>;
+export declare function SettingsDemo(): JSX.Element;

package/build/cjs/components/Settings/collect-settings.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { IconProps } from '@gravity-ui/uikit';
+declare type SettingsMenu = (SettingsMenuGroup | SettingsMenuItem)[];
+interface SettingsMenuGroup {
+    groupTitle: string;
+    items: SettingsMenuItem[];
+}
+interface SettingsMenuItem {
+    id: string;
+    title: string;
+    icon?: IconProps;
+    withBadge?: boolean;
+    disabled?: boolean;
+}
+export interface SettingsPage {
+    id: string;
+    sections: SettingsPageSection[];
+    hidden?: boolean;
+    withBadge?: boolean;
+}
+interface SettingsPageSection {
+    title: string;
+    header?: React.ReactNode;
+    items: SettingsItem[];
+    hidden?: boolean;
+    withBadge?: boolean;
+}
+interface SettingsItem {
+    title: string;
+    element: React.ReactElement;
+    hidden: boolean;
+    titleComponent?: React.ReactNode;
+    renderTitleComponent?: (highlightedTitle: React.ReactNode | null) => React.ReactNode;
+}
+interface SettingsDescription {
+    menu: SettingsMenu;
+    pages: Record<string, SettingsPage>;
+}
+export declare function getSettingsFromChildren(children: React.ReactNode, searchText?: string): SettingsDescription;
+export {};

package/build/cjs/components/Settings/helpers.d.ts

@@ -0,0 +1,6 @@
+declare type AnyFunc = (...args: any[]) => any;
+export declare function useStableCallback<T extends AnyFunc>(func: T): (...args: Parameters<T>) => ReturnType<T> | undefined;
+export declare function useCurrent<T>(value: T): () => T;
+export declare function invariant(cond: boolean, message: string): void;
+export declare function escapeStringForRegExp(input: string): string;
+export {};

package/build/cjs/components/Settings/index.d.ts

@@ -0,0 +1 @@
+export * from './Settings';

package/build/cjs/{types/components → components}/index.d.ts

@@ -1,4 +1,6 @@
+export { ActionBar } from './ActionBar';
 export { AsideHeader, AsideHeaderProps } from './AsideHeader/AsideHeader';
 export { Drawer, DrawerProps, DrawerItemProps, DrawerItem } from './Drawer/Drawer';
 export { FooterItem, FooterItemProps } from './FooterItem/FooterItem';
+export * from './Settings';
 export * from './types';

package/build/cjs/{types/components → components}/types.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IconProps } from '@gravity-ui/uikit';
-export declare type MenuItemType = 'regular' | 'action';
+export declare type MenuItemType = 'regular' | 'action' | 'divider';
 export interface MenuItem {
     id: string;
     title: React.ReactNode;