@manuscripts/style-guide 1.5.0-LEAN-2992 → 1.5.0-LEAN-3180-3

package/dist/cjs/components/SimpleModal.js

@@ -1,95 +0,0 @@
-"use strict";
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SimpleModal = exports.ModalMain = exports.CloseButton = exports.ModalHeader = exports.ModalContainer = void 0;
-const react_1 = __importDefault(require("react"));
-const react_modal_1 = __importDefault(require("react-modal"));
-const styled_components_1 = __importDefault(require("styled-components"));
-const Button_1 = require("./Button");
-exports.ModalContainer = styled_components_1.default.div `
-  background: ${(props) => props.theme.colors.background.primary};
-  border-radius: ${(props) => props.theme.grid.radius.default};
-  box-shadow: ${(props) => props.theme.shadow.dropShadow};
-  font-family: ${(props) => props.theme.font.family.sans};
-  overflow: hidden;
-  margin: ${(props) => props.theme.grid.unit * 3}px;
-`;
-exports.ModalHeader = styled_components_1.default.div `
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 1;
-`;
-exports.CloseButton = (0, styled_components_1.default)(Button_1.RoundIconButton) `
-  box-shadow: none;
-  text-indent: -99999px;
-
-  ::before,
-  ::after {
-    background-color: ${(props) => props.theme.colors.text.secondary};
-    border-radius: 2px;
-    content: ' ';
-    display: block;
-    height: 14px;
-    transform: rotate(-45deg);
-    width: 2px;
-    position: absolute;
-    top: calc(50% - 7px);
-    left: calc(50% - 1px);
-  }
-  ::after {
-    transform: rotate(45deg);
-  }
-`;
-exports.ModalMain = styled_components_1.default.div `
-  padding: ${(props) => props.theme.grid.unit * 4}px;
-`;
-const SimpleModal = ({ children, closeWithOverlay, handleClose, width = 'auto', }) => (react_1.default.createElement(react_modal_1.default, { isOpen: true, onRequestClose: handleClose, shouldCloseOnOverlayClick: closeWithOverlay, appElement: document.getElementById('root'), style: {
-        overlay: {
-            alignItems: 'center',
-            backgroundColor: 'rgba(0,0,0,0.5)',
-            bottom: 0,
-            display: 'flex',
-            justifyContent: 'center',
-            left: 0,
-            position: 'fixed',
-            right: 0,
-            top: 0,
-        },
-        content: {
-            background: 'transparent',
-            border: 'none',
-            bottom: 0,
-            left: 0,
-            margin: 'auto',
-            maxHeight: '70vh',
-            maxWidth: '70vw',
-            padding: 0,
-            position: 'relative',
-            right: 0,
-            top: 0,
-            width,
-        },
-    } },
-    react_1.default.createElement(exports.ModalContainer, null,
-        react_1.default.createElement(exports.ModalHeader, null,
-            react_1.default.createElement(exports.CloseButton, { onClick: handleClose })),
-        react_1.default.createElement(exports.ModalMain, null, children))));
-exports.SimpleModal = SimpleModal;

package/dist/cjs/hooks/use-menus.js

@@ -1,89 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMenus = void 0;
-const react_1 = require("react");
-const menus_1 = require("../lib/menus");
-const initialPointer = [-1, -1, -1];
-const transformPointer = (depth, index) => (pointer) => pointer.map((pointerPart, i) => {
-    if (i === depth) {
-        return index;
-    }
-    if (i > depth) {
-        return -1;
-    }
-    return pointerPart;
-});
-const isPart = (pointer, position) => {
-    const limit = position.length < 3 ? position.length : 3;
-    for (let i = 0; i < limit; i++) {
-        if (position[i] !== pointer[i]) {
-            return false;
-        }
-    }
-    return true;
-};
-const getSubmenuState = (specs, pointer, position) => {
-    return specs.map((spec, index) => {
-        if ((0, menus_1.isMenuSeparator)(spec)) {
-            return spec;
-        }
-        const current = [...position, index];
-        return Object.assign(Object.assign({}, spec), { submenu: spec.submenu && getSubmenuState(spec.submenu, pointer, current), isOpen: isPart(pointer, current) });
-    });
-};
-const getMenuState = (specs, pointer) => {
-    return specs.map((spec, index) => {
-        const position = [index];
-        return Object.assign(Object.assign({}, spec), { submenu: spec.submenu && getSubmenuState(spec.submenu, pointer, position), isOpen: isPart(pointer, position) });
-    });
-};
-const getMenuAt = (state, position) => {
-    const [head, ...tail] = position.filter((i) => i !== -1);
-    const menu = state[head];
-    if ((0, menus_1.isMenuSeparator)(menu)) {
-        return;
-    }
-    if (!tail.length) {
-        return menu;
-    }
-    else if (menu.submenu) {
-        return getMenuAt(menu.submenu, tail);
-    }
-};
-const useMenus = (menus) => {
-    const [pointer, setPointer] = (0, react_1.useState)(initialPointer);
-    const state = getMenuState(menus, pointer);
-    const handleClick = (0, react_1.useCallback)((indices) => {
-        const menu = getMenuAt(state, indices);
-        if (!menu || !menu.isEnabled) {
-            return;
-        }
-        if (menu.run) {
-            menu.run();
-            setPointer([-1, -1, -1]);
-        }
-        else if (menu.submenu) {
-            const depth = indices.length - 1;
-            const index = indices[depth];
-            setPointer(transformPointer(depth, index));
-        }
-    }, [state]);
-    const ref = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
-        const handleClickOutside = (event) => {
-            if (ref.current && !ref.current.contains(event.target)) {
-                setPointer([-1, -1, -1]);
-            }
-        };
-        document.addEventListener('click', handleClickOutside);
-        return () => {
-            document.removeEventListener('click', handleClickOutside);
-        };
-    }, []);
-    return {
-        menus: state,
-        handleClick,
-        ref,
-    };
-};
-exports.useMenus = useMenus;

package/dist/es/components/Menus/Menus.js

@@ -1,55 +0,0 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-import Modal from 'react-modal';
-import styled from 'styled-components';
-import { Submenu, SubmenusContainer, Text } from './Submenu';
-Modal.setAppElement('#root');
-const MenusContainer = styled.div `
-  display: flex;
-  font-size: 14px;
-`;
-const MenuHeading = styled.div `
-  padding: 4px 8px;
-  cursor: pointer;
-  border: 1px solid transparent;
-  border-bottom: none;
-`;
-const MenuContainer = styled.div `
-  position: relative;
-
-  & ${MenuHeading} {
-    background-color: #fff;
-    color: ${(props) => (props.isEnabled ? '#353535' : '#e2e2e2')};
-
-    &:hover {
-      background-color: ${(props) => (props.isEnabled ? '#f2fbfc' : '#fff')};
-    }
-  }
-`;
-export const Menus = ({ menus, innerRef, handleClick, }) => {
-    return (React.createElement(MenusContainer, { ref: innerRef }, menus.map((menu, index) => {
-        return (React.createElement(MenuContainer, { key: `menu-${index}`, isEnabled: menu.isEnabled },
-            React.createElement(MenuHeading, { onMouseDown: (e) => {
-                    e.preventDefault();
-                    handleClick([index]);
-                }, isOpen: menu.isOpen },
-                React.createElement(Text, null, menu.label)),
-            menu.isEnabled && menu.isOpen && menu.submenu && (React.createElement(SubmenusContainer, null, menu.submenu.map((submenu, sindex) => {
-                return (React.createElement(Submenu, { key: `${index}-${sindex}`, menu: submenu, handleClick: (i) => handleClick([index, sindex, ...i]) }));
-            })))));
-    })));
-};

package/dist/es/components/Menus/Shortcut.js

@@ -1,57 +0,0 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-import styled from 'styled-components';
-const isMac = /Mac/.test(window.navigator.platform);
-export const ShortcutContainer = styled.div `
-  display: inline-flex;
-  color: #6e6e6e;
-  margin-left: 16px;
-  flex-shrink: 0;
-  justify-content: flex-end;
-`;
-const macModifiers = {
-    Option: '⌥',
-    CommandOrControl: '⌘',
-    Shift: '⇧',
-};
-const pcModifiers = {
-    Option: 'Alt',
-    CommandOrControl: 'Ctrl',
-    Shift: 'Shift',
-};
-const modifiers = isMac ? macModifiers : pcModifiers;
-const system = isMac ? 'mac' : 'pc';
-const separator = isMac ? '' : '-';
-const Character = styled.span `
-  display: inline-block;
-  min-width: 1ch;
-`;
-const parts = (shortcut) => {
-    const nodes = [];
-    for (const part of shortcut[system].split('+')) {
-        const modifier = modifiers[part];
-        if (modifier) {
-            nodes.push(modifier);
-            nodes.push(separator);
-        }
-        else {
-            nodes.push(React.createElement(Character, { key: part }, part));
-        }
-    }
-    return nodes;
-};
-export const Shortcut = ({ shortcut }) => (React.createElement(ShortcutContainer, null, parts(shortcut)));

package/dist/es/components/Menus/Submenu.js

@@ -1,112 +0,0 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import TriangleCollapsed from '@manuscripts/assets/react/TriangleCollapsed';
-import React from 'react';
-import styled from 'styled-components';
-import { isMenuSeparator } from '../../lib/menus';
-import { Shortcut } from './Shortcut';
-export const Text = styled.div `
-  flex: 1 0 auto;
-`;
-const SubmenuContainer = styled.div `
-  position: relative;
-`;
-export const SubmenusContainer = styled.div `
-  background: #fff;
-  border: 1px solid #e2e2e2;
-  border-radius: 4px;
-  box-shadow: 0 4px 9px 0 rgba(84, 83, 83, 0.3);
-  color: #353535;
-  min-width: 150px;
-  max-height: 70vh;
-  overflow-y: auto;
-  padding: 4px 0;
-  white-space: nowrap;
-  width: auto;
-  z-index: 10;
-
-  position: absolute;
-
-  &[data-placement='bottom-start'] {
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
-  }
-
-  &[data-placement='right-start'] {
-    top: 8px;
-  }
-`;
-const NestedSubmenusContainer = styled(SubmenusContainer) `
-  top: 0;
-  left: 100%;
-`;
-const Separator = styled.div `
-  height: 0;
-  border-bottom: 1px solid #e2e2e2;
-  margin: 4px 0;
-`;
-const Active = styled.div `
-  width: 16px;
-  display: inline-flex;
-  flex-shrink: 0;
-  justify-content: center;
-  align-items: center;
-`;
-const Arrow = styled(TriangleCollapsed) `
-  margin-left: 8px;
-`;
-const Container = styled.div `
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  padding: 8px 16px 8px 4px;
-  position: relative;
-  ${(props) => props.isOpen && 'background: #f2fbfc;'}
-
-  &:hover {
-    background: #f2fbfc;
-  }
-
-  &.disabled {
-    cursor: default;
-    opacity: 0.4;
-  }
-`;
-const activeContent = (menu) => (menu.isActive ? '✓' : '');
-export const Submenu = ({ menu, handleClick }) => {
-    if (isMenuSeparator(menu)) {
-        return React.createElement(Separator, null);
-    }
-    if (!menu.submenu) {
-        return (React.createElement(Container, { isOpen: menu.isOpen, className: menu.isEnabled ? '' : 'disabled', onMouseDown: (e) => {
-                e.preventDefault();
-                handleClick([]);
-            } },
-            React.createElement(Active, null, activeContent(menu)),
-            React.createElement(Text, null, menu.label),
-            menu.shortcut && React.createElement(Shortcut, { shortcut: menu.shortcut })));
-    }
-    return (React.createElement(SubmenuContainer, null,
-        React.createElement(Container, { onMouseDown: (e) => {
-                e.preventDefault();
-                handleClick([]);
-            }, isOpen: menu.isOpen, className: menu.isEnabled ? '' : 'disabled' },
-            React.createElement(Active, null, activeContent(menu)),
-            React.createElement(Text, null, menu.label),
-            menu.submenu && React.createElement(Arrow, null),
-            menu.shortcut && React.createElement(Shortcut, { shortcut: menu.shortcut })),
-        menu.submenu && menu.isOpen && (React.createElement(NestedSubmenusContainer, null, menu.submenu.map((submenu, index) => (React.createElement(Submenu, { key: `menu-${index}`, menu: submenu, handleClick: (i) => handleClick([index, ...i]) })))))));
-};

package/dist/es/components/Menus/index.js

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

package/dist/es/components/SimpleModal.js

@@ -1,88 +0,0 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-import Modal from 'react-modal';
-import styled from 'styled-components';
-import { RoundIconButton } from './Button';
-export const ModalContainer = styled.div `
-  background: ${(props) => props.theme.colors.background.primary};
-  border-radius: ${(props) => props.theme.grid.radius.default};
-  box-shadow: ${(props) => props.theme.shadow.dropShadow};
-  font-family: ${(props) => props.theme.font.family.sans};
-  overflow: hidden;
-  margin: ${(props) => props.theme.grid.unit * 3}px;
-`;
-export const ModalHeader = styled.div `
-  position: absolute;
-  right: 0;
-  top: 0;
-  z-index: 1;
-`;
-export const CloseButton = styled(RoundIconButton) `
-  box-shadow: none;
-  text-indent: -99999px;
-
-  ::before,
-  ::after {
-    background-color: ${(props) => props.theme.colors.text.secondary};
-    border-radius: 2px;
-    content: ' ';
-    display: block;
-    height: 14px;
-    transform: rotate(-45deg);
-    width: 2px;
-    position: absolute;
-    top: calc(50% - 7px);
-    left: calc(50% - 1px);
-  }
-  ::after {
-    transform: rotate(45deg);
-  }
-`;
-export const ModalMain = styled.div `
-  padding: ${(props) => props.theme.grid.unit * 4}px;
-`;
-export const SimpleModal = ({ children, closeWithOverlay, handleClose, width = 'auto', }) => (React.createElement(Modal, { isOpen: true, onRequestClose: handleClose, shouldCloseOnOverlayClick: closeWithOverlay, appElement: document.getElementById('root'), style: {
-        overlay: {
-            alignItems: 'center',
-            backgroundColor: 'rgba(0,0,0,0.5)',
-            bottom: 0,
-            display: 'flex',
-            justifyContent: 'center',
-            left: 0,
-            position: 'fixed',
-            right: 0,
-            top: 0,
-        },
-        content: {
-            background: 'transparent',
-            border: 'none',
-            bottom: 0,
-            left: 0,
-            margin: 'auto',
-            maxHeight: '70vh',
-            maxWidth: '70vw',
-            padding: 0,
-            position: 'relative',
-            right: 0,
-            top: 0,
-            width,
-        },
-    } },
-    React.createElement(ModalContainer, null,
-        React.createElement(ModalHeader, null,
-            React.createElement(CloseButton, { onClick: handleClose })),
-        React.createElement(ModalMain, null, children))));

package/dist/es/hooks/use-menus.js

@@ -1,85 +0,0 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { isMenuSeparator, } from '../lib/menus';
-const initialPointer = [-1, -1, -1];
-const transformPointer = (depth, index) => (pointer) => pointer.map((pointerPart, i) => {
-    if (i === depth) {
-        return index;
-    }
-    if (i > depth) {
-        return -1;
-    }
-    return pointerPart;
-});
-const isPart = (pointer, position) => {
-    const limit = position.length < 3 ? position.length : 3;
-    for (let i = 0; i < limit; i++) {
-        if (position[i] !== pointer[i]) {
-            return false;
-        }
-    }
-    return true;
-};
-const getSubmenuState = (specs, pointer, position) => {
-    return specs.map((spec, index) => {
-        if (isMenuSeparator(spec)) {
-            return spec;
-        }
-        const current = [...position, index];
-        return Object.assign(Object.assign({}, spec), { submenu: spec.submenu && getSubmenuState(spec.submenu, pointer, current), isOpen: isPart(pointer, current) });
-    });
-};
-const getMenuState = (specs, pointer) => {
-    return specs.map((spec, index) => {
-        const position = [index];
-        return Object.assign(Object.assign({}, spec), { submenu: spec.submenu && getSubmenuState(spec.submenu, pointer, position), isOpen: isPart(pointer, position) });
-    });
-};
-const getMenuAt = (state, position) => {
-    const [head, ...tail] = position.filter((i) => i !== -1);
-    const menu = state[head];
-    if (isMenuSeparator(menu)) {
-        return;
-    }
-    if (!tail.length) {
-        return menu;
-    }
-    else if (menu.submenu) {
-        return getMenuAt(menu.submenu, tail);
-    }
-};
-export const useMenus = (menus) => {
-    const [pointer, setPointer] = useState(initialPointer);
-    const state = getMenuState(menus, pointer);
-    const handleClick = useCallback((indices) => {
-        const menu = getMenuAt(state, indices);
-        if (!menu || !menu.isEnabled) {
-            return;
-        }
-        if (menu.run) {
-            menu.run();
-            setPointer([-1, -1, -1]);
-        }
-        else if (menu.submenu) {
-            const depth = indices.length - 1;
-            const index = indices[depth];
-            setPointer(transformPointer(depth, index));
-        }
-    }, [state]);
-    const ref = useRef(null);
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (ref.current && !ref.current.contains(event.target)) {
-                setPointer([-1, -1, -1]);
-            }
-        };
-        document.addEventListener('click', handleClickOutside);
-        return () => {
-            document.removeEventListener('click', handleClickOutside);
-        };
-    }, []);
-    return {
-        menus: state,
-        handleClick,
-        ref,
-    };
-};

package/dist/types/components/Menus/index.d.ts

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

package/dist/types/components/SimpleModal.d.ts

@@ -1,41 +0,0 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-import React from 'react';
-export declare const ModalContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const ModalHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const CloseButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {
-    type: "button" | "reset" | "submit";
-} & {
-    danger?: boolean | undefined;
-    disabled?: boolean | undefined;
-    mini?: boolean | undefined;
-} & {
-    defaultColor?: boolean | undefined;
-    size?: number | undefined;
-    iconColor?: string | undefined;
-} & {
-    defaultColor: boolean;
-} & {
-    size?: number | undefined;
-}, "type" | "defaultColor">;
-export declare const ModalMain: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-interface Props {
-    handleClose: () => void;
-    closeWithOverlay: boolean;
-    width?: string;
-}
-export declare const SimpleModal: React.FunctionComponent<Props>;
-export {};

package/dist/types/hooks/use-menus.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { Menu, MenuSpec } from '../lib/menus';
-export declare const useMenus: (menus: MenuSpec[]) => {
-    menus: Menu[];
-    handleClick: (indices: number[]) => void;
-    ref: import("react").RefObject<HTMLDivElement>;
-};

package/dist/types/lib/menus.d.ts

@@ -1,38 +0,0 @@
-/*!
- * © 2024 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-export interface MenuShortcut {
-    mac: string;
-    pc: string;
-}
-export interface MenuSpec {
-    id: string;
-    label: string;
-    role?: string;
-    shortcut?: MenuShortcut;
-    isActive?: boolean;
-    isEnabled: boolean;
-    run?: () => void;
-    submenu?: (MenuSpec | MenuSeparator)[];
-}
-export interface Menu extends MenuSpec {
-    isOpen: boolean;
-    submenu?: (Menu | MenuSeparator)[];
-}
-export type MenuSeparator = {
-    role: 'separator';
-};
-export declare const isMenuSeparator: (menu: any) => menu is MenuSeparator;
-export type MenuPointer = [number, number, number];