@doyourjob/gravity-ui-page-constructor-addons 2.1.8

package/build/esm/context/theme/ThemeContext.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { DEFAULT_THEME } from '../../constants';
+export var Theme;
+(function (Theme) {
+    Theme["Light"] = "light";
+    Theme["Dark"] = "dark";
+})(Theme || (Theme = {}));
+export const initialValue = {
+    theme: DEFAULT_THEME,
+};
+export const ThemeContext = React.createContext(initialValue);

package/build/esm/context/theme/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ThemeContext';
+export * from './useTheme';
+export * from './withTheme';

package/build/esm/context/theme/index.js

@@ -0,0 +1,3 @@
+export * from './ThemeContext';
+export * from './useTheme';
+export * from './withTheme';

package/build/esm/context/theme/useTheme.d.ts

@@ -0,0 +1,2 @@
+import { ThemeContextProps } from './ThemeContext';
+export declare function useTheme(): ThemeContextProps['theme'];

package/build/esm/context/theme/useTheme.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import { ThemeContext } from './ThemeContext';
+export function useTheme() {
+    const { theme } = React.useContext(ThemeContext);
+    return theme;
+}

package/build/esm/context/theme/withTheme.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Subtract } from 'utility-types';
+import { ThemeContextProps } from './ThemeContext';
+export interface WithThemeProps extends ThemeContextProps {
+}
+export declare function withTheme<T extends WithThemeProps>(WrappedComponent: React.ComponentType<T>): React.ComponentType<Subtract<T, WithThemeProps>>;

package/build/esm/context/theme/withTheme.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ThemeContext } from './ThemeContext';
+export function withTheme(WrappedComponent) {
+    var _a;
+    const componentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
+    return _a = class WithThemeComponent extends React.Component {
+            render() {
+                return React.createElement(WrappedComponent, Object.assign({}, this.props, { theme: this.context.theme }));
+            }
+        },
+        _a.displayName = `withTheme(${componentName})`,
+        _a.contextType = ThemeContext,
+        _a;
+}

package/build/esm/hooks/useIsCurrentPage.d.ts

@@ -0,0 +1 @@
+export declare const useIsCurrentPage: (url?: string) => boolean;

package/build/esm/hooks/useIsCurrentPage.js

@@ -0,0 +1,8 @@
+import React, { useEffect } from 'react';
+export const useIsCurrentPage = (url) => {
+    const [isCurrentPage, setIsCurrentPage] = React.useState(false);
+    useEffect(() => {
+        setIsCurrentPage(Boolean(url && location.href.includes(url)));
+    }, [url]);
+    return isCurrentPage;
+};

package/build/esm/hooks/useIsIPhone.d.ts

@@ -0,0 +1 @@
+export declare function useIsIPhone(): boolean;

package/build/esm/hooks/useIsIPhone.js

@@ -0,0 +1,6 @@
+import { useContext } from 'react';
+import { DeviceContext } from '../components/Navigation/contexts/device';
+export function useIsIPhone() {
+    const device = useContext(DeviceContext);
+    return (device === null || device === void 0 ? void 0 : device.model) === 'iPhone';
+}

package/build/esm/i18n.d.ts

@@ -0,0 +1,2 @@
+import { I18N } from '@gravity-ui/i18n';
+export declare const i18n: I18N;

package/build/esm/i18n.js

@@ -0,0 +1,9 @@
+import { I18N } from '@gravity-ui/i18n';
+import { Lang, getConfig, subscribeConfigure } from './utils/configure';
+export const i18n = new I18N();
+i18n.setLang(getConfig().lang || Lang.En);
+subscribeConfigure((config) => {
+    if (config.lang) {
+        i18n.setLang(config.lang);
+    }
+});

package/build/esm/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export { configure } from './utils/configure';

package/build/esm/index.js

@@ -0,0 +1,3 @@
+export * from './components';
+//i18n setup
+export { configure } from './utils/configure';

package/build/esm/models/index.d.ts

@@ -0,0 +1,3 @@
+export interface ClassNameProps {
+    className?: string;
+}

package/build/esm/models/index.js

@@ -0,0 +1 @@
+export {};

package/build/esm/utils/FocusTrap.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export interface FocusTrapProps {
+    enabled?: boolean;
+    /** @deprecated Use autoFocus instead */
+    disableAutoFocus?: boolean;
+    autoFocus?: boolean;
+    children: React.ReactElement;
+}
+export declare function FocusTrap({ children, enabled, disableAutoFocus, autoFocus, }: FocusTrapProps): React.JSX.Element;
+export declare function useParentFocusTrap(): ((node: HTMLElement | null) => void) | undefined;

package/build/esm/utils/FocusTrap.js

@@ -0,0 +1,99 @@
+import React from 'react';
+import { useForkRef, useUniqId } from '@gravity-ui/uikit';
+import { createFocusTrap } from 'focus-trap';
+const focusTrapContext = React.createContext(undefined);
+export function FocusTrap({ children, enabled = true, disableAutoFocus, autoFocus = true, }) {
+    const nodeRef = React.useRef(null);
+    const setAutoFocusRef = React.useRef(!disableAutoFocus && autoFocus);
+    React.useEffect(() => {
+        setAutoFocusRef.current = !disableAutoFocus && autoFocus;
+    });
+    const focusTrapRef = React.useRef();
+    const containersRef = React.useRef({});
+    const updateContainerElements = React.useCallback(() => {
+        var _a;
+        (_a = focusTrapRef.current) === null || _a === void 0 ? void 0 : _a.updateContainerElements([
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            nodeRef.current,
+            ...Object.values(containersRef.current),
+        ]);
+    }, []);
+    const actions = React.useMemo(() => ({
+        addNode(id, node) {
+            var _a;
+            if (containersRef.current[id] !== node && !((_a = nodeRef.current) === null || _a === void 0 ? void 0 : _a.contains(node))) {
+                containersRef.current[id] = node;
+                updateContainerElements();
+            }
+        },
+        removeNode(id) {
+            if (containersRef.current[id]) {
+                delete containersRef.current[id];
+                updateContainerElements();
+            }
+        },
+    }), [updateContainerElements]);
+    const handleNodeRef = React.useCallback((node) => {
+        var _a;
+        if (enabled && node) {
+            nodeRef.current = node;
+            if (!focusTrapRef.current) {
+                focusTrapRef.current = createFocusTrap([], {
+                    initialFocus: () => setAutoFocusRef.current && getFocusElement(node),
+                    fallbackFocus: () => node,
+                    returnFocusOnDeactivate: false,
+                    escapeDeactivates: false,
+                    clickOutsideDeactivates: false,
+                    allowOutsideClick: true,
+                });
+            }
+            updateContainerElements();
+            focusTrapRef.current.activate();
+        }
+        else {
+            (_a = focusTrapRef.current) === null || _a === void 0 ? void 0 : _a.deactivate();
+            nodeRef.current = null;
+        }
+    }, [enabled, updateContainerElements]);
+    const child = React.Children.only(children);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    if (!React.isValidElement(child)) {
+        throw new Error('Children must contain only one valid element');
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const childRef = child.ref;
+    const ref = useForkRef(handleNodeRef, childRef);
+    return (React.createElement(focusTrapContext.Provider, { value: actions }, React.cloneElement(child, { ref })));
+}
+export function useParentFocusTrap() {
+    const actions = React.useContext(focusTrapContext);
+    const id = useUniqId();
+    return React.useMemo(() => {
+        if (!actions) {
+            return undefined;
+        }
+        return (node) => {
+            if (node) {
+                actions.addNode(id, node);
+            }
+            else {
+                actions.removeNode(id);
+            }
+        };
+    }, [actions, id]);
+}
+function getFocusElement(root) {
+    if (!(document.activeElement instanceof HTMLElement) ||
+        !root.contains(document.activeElement)) {
+        if (!root.hasAttribute('tabIndex')) {
+            if (process.env.NODE_ENV !== 'production') {
+                // used only in dev build
+                // eslint-disable-next-line no-console
+                console.error('@gravity-ui/uikit: focus-trap content node does node accept focus.');
+            }
+            root.setAttribute('tabIndex', '-1');
+        }
+        return root;
+    }
+    return document.activeElement;
+}

package/build/esm/utils/cn.d.ts

@@ -0,0 +1,5 @@
+export declare const NAMESPACE = "pc-addons-";
+export declare const cn: import("@bem-react/classname").ClassNameInitilizer;
+export declare const block: import("@bem-react/classname").ClassNameInitilizer;
+export declare const rootCn: import("@bem-react/classname").ClassNameFormatter;
+export type CnBlock = ReturnType<typeof cn>;

package/build/esm/utils/cn.js

@@ -0,0 +1,6 @@
+import { withNaming } from '@bem-react/classname';
+import { UIKIT_ROOT_CLASS } from '../constants';
+export const NAMESPACE = 'pc-addons-';
+export const cn = withNaming({ e: '__', m: '_' });
+export const block = withNaming({ n: NAMESPACE, e: '__', m: '_' });
+export const rootCn = cn(UIKIT_ROOT_CLASS);

package/build/esm/utils/configure.d.ts

@@ -0,0 +1,12 @@
+export declare enum Lang {
+    Ru = "ru",
+    En = "en"
+}
+interface Config {
+    lang?: Lang;
+}
+type Subscriber = (config: Config) => void;
+export declare const configure: (newConfig: Config) => void;
+export declare const subscribeConfigure: (sub: Subscriber) => () => void;
+export declare const getConfig: () => Config;
+export {};

package/build/esm/utils/configure.js

@@ -0,0 +1,20 @@
+export var Lang;
+(function (Lang) {
+    Lang["Ru"] = "ru";
+    Lang["En"] = "en";
+})(Lang || (Lang = {}));
+let subs = [];
+const config = {};
+export const configure = (newConfig) => {
+    Object.assign(config, newConfig);
+    subs.forEach((sub) => {
+        sub(config);
+    });
+};
+export const subscribeConfigure = (sub) => {
+    subs.push(sub);
+    return () => {
+        subs = subs.filter((item) => item !== sub);
+    };
+};
+export const getConfig = () => config;

package/build/esm/utils/registerKeyset.d.ts

@@ -0,0 +1,5 @@
+import { i18n } from '../i18n';
+import { Lang } from './configure';
+type KeysData = Parameters<typeof i18n.registerKeyset>[2];
+export declare function registerKeyset<T extends KeysData>(data: Record<Lang, T>, keysetName: string): (key: string, params?: import("@gravity-ui/i18n").Params | undefined) => string;
+export {};

package/build/esm/utils/registerKeyset.js

@@ -0,0 +1,5 @@
+import { i18n } from '../i18n';
+export function registerKeyset(data, keysetName) {
+    Object.entries(data).forEach(([lang, keys]) => i18n.registerKeyset(lang, keysetName, keys));
+    return i18n.keyset(keysetName);
+}

package/package.json

@@ -0,0 +1,152 @@
+{
+  "name": "@doyourjob/gravity-ui-page-constructor-addons",
+  "version": "2.1.8",
+  "description": "Components and plugins for @doyourjob/gravity-ui-page-constructor",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/doyourjob-agency/page-constructor-addons"
+  },
+  "exports": {
+    ".": {
+      "types": "./build/esm/index.d.ts",
+      "require": "./build/cjs/index.js",
+      "import": "./build/esm/index.js"
+    },
+    "./navigation": {
+      "types": "./build/esm/navigation/index.d.ts",
+      "require": "./build/cjs/navigation/index.js",
+      "import": "./build/esm/navigation/index.js"
+    },
+    "./styles/*": "./styles/*"
+  },
+  "main": "./build/cjs/index.js",
+  "module": "./build/esm/index.js",
+  "types": "./build/esm/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "index.d.ts": [
+        "./build/esm/index.d.ts"
+      ],
+      "navigation": [
+        "./build/esm/navigation/index.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "build",
+    "styles"
+  ],
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
+  "scripts": {
+    "deps:install": "npm ci",
+    "deps:truncate": "npm prune --production",
+    "lint:fix": "run-s lint:js:fix lint:styles:fix lint:prettier:fix typecheck",
+    "lint:js": "eslint '**/*.{js,jsx,ts,tsx}' --max-warnings=0",
+    "lint:js:fix": "eslint '**/*.{js,jsx,ts,tsx}' --max-warnings=0 --quiet --fix",
+    "lint:styles": "stylelint '{styles,src}/**/*.scss'",
+    "lint:styles:fix": "stylelint **/*.scss --fix",
+    "lint:prettier": "prettier --check '**/*.{js,jsx,ts,tsx,css,scss,json,yaml,yml,md}'",
+    "lint:prettier:fix": "prettier --write '**/*.{js,jsx,ts,tsx,css,scss,json,yaml,yml,md}'",
+    "lint": "run-p lint:js lint:styles lint:prettier typecheck",
+    "typecheck": "tsc --noEmit",
+    "dev": "npm run storybook:start",
+    "storybook:start": "sb dev -p 7009",
+    "storybook:build": "sb build -c .storybook -o storybook-static",
+    "start": "node dist",
+    "clean": "gulp clean",
+    "build": "gulp",
+    "prepublishOnly": "npm run lint && npm run build",
+    "prepare": "husky install",
+    "test": "jest --passWithNoTests",
+    "test:coverage": "jest --coverage",
+    "test:watch": "jest --watchAll"
+  },
+  "dependencies": {
+    "@bem-react/classname": "^1.6.0",
+    "@gravity-ui/icons": "^2.8.1",
+    "lodash": "^4.17.21",
+    "react-transition-group": "^4.4.5"
+  },
+  "peerDependencies": {
+    "@doyourjob/gravity-ui-page-constructor": "^5.31.32",
+    "@gravity-ui/uikit": "^6.23.1",
+    "react": "^16.0.0 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.22.5",
+    "@commitlint/cli": "^17.1.2",
+    "@commitlint/config-conventional": "^17.1.0",
+    "@gravity-ui/eslint-config": "^2.0.0",
+    "@gravity-ui/prettier-config": "^1.0.1",
+    "@gravity-ui/stylelint-config": "^1.0.0",
+    "@gravity-ui/tsconfig": "^1.0.0",
+    "@gravity-ui/uikit": "^6.23.1",
+    "@storybook/addon-actions": "^7.1.0",
+    "@storybook/addon-essentials": "^7.1.0",
+    "@storybook/addon-knobs": "^7.0.2",
+    "@storybook/addon-viewport": "^7.1.0",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^7.1.0",
+    "@storybook/react-webpack5": "^7.1.0",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.2.4",
+    "@types/lodash": "^4.14.176",
+    "@types/react": "^18.0.27",
+    "@types/react-dom": "^18.0.10",
+    "@types/webpack-env": "^1.18.1",
+    "es5-ext": "0.10.53",
+    "eslint": "^8.34.0",
+    "eslint-plugin-no-not-accumulator-reassign": "^0.1.0",
+    "eslint-plugin-react": "^7.33.0",
+    "eslint-plugin-testing-library": "^5.9.1",
+    "gulp": "^4.0.2",
+    "gulp-dart-sass": "^1.0.2",
+    "gulp-replace": "^1.1.4",
+    "gulp-ts-alias": "^2.0.0",
+    "gulp-typescript": "^6.0.0-alpha.1",
+    "html-loader": "^1.3.2",
+    "htmlparser2": "^6.1.0",
+    "husky": "^7.0.4",
+    "jest": "^29.3.1",
+    "jest-environment-jsdom": "^29.3.1",
+    "jest-transform-css": "^6.0.0",
+    "lint-staged": "^11.2.6",
+    "move-file-cli": "^3.0.0",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.16",
+    "postcss-preset-env": "^9.0.0",
+    "postcss-scss": "^4.0.4",
+    "prettier": "2.4.1",
+    "react": "^18.2.0",
+    "react-docgen-typescript": "^2.2.2",
+    "react-dom": "^18.2.0",
+    "rimraf": "^3.0.2",
+    "sass": "^1.63.6",
+    "storybook": "^7.1.0",
+    "stylelint": "^14.11.0",
+    "ts-jest": "^29.0.3",
+    "tslib": "^2.4.0",
+    "typescript": "^4.9.4"
+  },
+  "lint-staged": {
+    "*.{css,scss}": [
+      "stylelint --fix",
+      "prettier --write"
+    ],
+    "*.{js,jsx,ts,tsx}": [
+      "eslint --fix --quiet",
+      "prettier --write"
+    ],
+    "*.{json,yaml,yml,md}": [
+      "prettier --write"
+    ]
+  }
+}

package/styles/mixins.scss

@@ -0,0 +1 @@
+@import 'node_modules/@doyourjob/gravity-ui-page-constructor/styles/mixins.scss';

package/styles/storybook/common.scss

@@ -0,0 +1,37 @@
+.demo-container {
+    min-height: calc(100vh - 1px);
+    padding: 50px;
+}
+
+.demo-header {
+    margin-bottom: 20px;
+    font-size: var(--g-text-body-1-font-size);
+    font-weight: bold;
+    text-transform: uppercase;
+    color: var(--g-color-text-primary);
+}
+
+.demo-description {
+    margin-bottom: 25px;
+    font-size: var(--g-text-body-2-font-size);
+    line-height: var(--g-text-body-2-line-height);
+}
+
+.demo-markdown {
+    .markdown-body {
+        padding: 20px;
+        color: var(--g-color-text-primary);
+
+        a {
+            color: var(--g-color-text-link);
+        }
+    }
+}
+
+.pc-page-constructor {
+    // @deprecated
+    --pc-first-block-mobile-indent: 32px;
+    // @deprecated
+    --pc-first-block-indent: 64px;
+    margin-bottom: 120px;
+}

package/styles/storybook/index.scss

@@ -0,0 +1,20 @@
+// stylelint-disable declaration-no-important
+
+@import './common';
+@import './palette';
+@import './typography';
+/**
+ * storybook-host container style overrides
+ * @see {@link https://github.com/philcockfield/storybook-host/issues/43}
+ */
+
+[data-css-18sl43g] {
+    font-family: inherit !important;
+    line-height: inherit !important;
+    background: none !important;
+}
+
+.docs-story {
+    // to display in docs elements with z-index less than 0
+    z-index: 0 !important;
+}

package/styles/storybook/palette.scss

@@ -0,0 +1,75 @@
+.palette {
+    &__section {
+        margin: auto auto 40px;
+        position: relative;
+        z-index: 1;
+    }
+
+    &__section-message {
+        color: var(--g-color-text-brand);
+        margin-bottom: 10px;
+        margin-top: -10px;
+    }
+
+    &__section-content {
+        margin-left: -20px;
+        padding-left: 20px;
+        padding-bottom: 35px;
+        position: relative;
+        display: inline-flex;
+    }
+
+    &__section-contrast-layer {
+        z-index: -5;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 135px;
+    }
+
+    &__color {
+        &-block {
+            &:not(:last-child) {
+                margin-right: 20px;
+            }
+            width: 118px;
+            height: 158px;
+        }
+
+        &-description {
+            margin-top: 8px;
+            height: 40px;
+            color: var(--g-color-text-primary);
+            font-size: 13px;
+        }
+        &-caption {
+            opacity: 0.5;
+        }
+
+        &-value {
+            width: 118px;
+            height: 118px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &_border_yes {
+                border: 1px solid var(--g-color-line-generic);
+            }
+
+            &_skip_yes {
+                color: var(--g-color-text-info);
+            }
+        }
+    }
+}
+
+.g-root_theme_light .palette__section-contrast-layer {
+    background: #000;
+    opacity: 0.02;
+}
+
+.g-root_theme_dark .palette__section-contrast-layer {
+    background: #323138;
+}