@via-profit/ui-kit 0.1.0-rc.2 → 0.1.0-rc.21

package/PhoneField/usePhoneUtils.js

@@ -0,0 +1,172 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePhoneUtils = void 0;
+const react_1 = __importDefault(require("react"));
+const UnknownFlag_1 = __importDefault(require("./UnknownFlag"));
+const usePhoneUtils = (params) => {
+    const { templates } = params;
+    const templatesList = templates.concat([
+        [
+            null,
+            react_1.default.createElement(UnknownFlag_1.default, { key: "unknnown" }),
+            null,
+            '+x xxx xxx-xx-xx',
+            '+30 987 654-32-10',
+            /^\+{0,1}.*/,
+        ],
+    ]);
+    /**
+     * Get template info by parset value
+     */
+    const getTemplateInfo = react_1.default.useCallback(parsedValue => {
+        const [countryCode, CountryFlag, callingCode, template, placeholder, regexp] = templatesList.find(template => new RegExp(template[5]).test(parsedValue.trim())) ||
+            templatesList[0];
+        return {
+            countryCode,
+            CountryFlag,
+            callingCode,
+            template,
+            placeholder,
+            regexp,
+        };
+    }, [templatesList]);
+    /**
+     * Get phone validation status
+     */
+    const validateParsedInput = react_1.default.useCallback((inputValue, template) => {
+        const xLength = template.replace(/[^x\d]/g, '').split('').length;
+        const digitLength = inputValue.replace(/[^\d]/g, '').split('').length;
+        return xLength === digitLength;
+    }, []);
+    /**
+     * Format phone string
+     */
+    const formatParsedInput = react_1.default.useCallback((inputValue, caret, defaultCountry) => {
+        const defaultTemplateRecord = templatesList.find(t => t[0] === (defaultCountry || null));
+        const [defaultCountryCode, DefaultCountryFlag, defaultCountryCalling, defaultTemplate, defaultPlaceholder,] = defaultTemplateRecord || templatesList[templatesList.length - 1];
+        const data = {
+            text: '',
+            caret,
+            CountryFlag: DefaultCountryFlag,
+            countryCode: defaultCountryCode,
+            callingCode: defaultCountryCalling,
+            template: defaultTemplate,
+            placeholder: defaultPlaceholder,
+            number: '',
+            isValid: false,
+        };
+        if (inputValue === '') {
+            return data;
+        }
+        const { countryCode, callingCode, CountryFlag, template, placeholder } = getTemplateInfo(inputValue);
+        const mask = template.split('').map(c => (c === 'x' ? /\d/ : c));
+        let charIndex = 0;
+        for (let patternIndex = 0; patternIndex < mask.length; patternIndex++) {
+            if (charIndex >= inputValue.length) {
+                break;
+            }
+            const char = inputValue[charIndex];
+            const template = mask[patternIndex];
+            // If put +, but not first
+            if (charIndex !== 0 && char === '+') {
+                break;
+            }
+            if (template instanceof RegExp && new RegExp(template).test(char)) {
+                data.text = `${data.text}${char}`;
+                charIndex += 1;
+            }
+            if (typeof template === 'string' && template === char) {
+                data.text = `${data.text}${char}`;
+                charIndex += 1;
+            }
+            if (typeof template === 'string' && template !== char) {
+                data.text = `${data.text}${template}`;
+                if (charIndex < caret) {
+                    data.caret += 1;
+                }
+            }
+        }
+        // const templateLength = template.replace(/[^x\d]/g, '').split('').length;
+        // const valueLength = inputValue.replace(/[^\d]/g, '').split('').length;
+        const number = data.text.replace(/[^0-9]/g, '').substring((callingCode === null || callingCode === void 0 ? void 0 : callingCode.length) || 0);
+        return Object.assign(Object.assign({}, data), { countryCode,
+            callingCode,
+            CountryFlag,
+            template,
+            placeholder,
+            number, isValid: validateParsedInput(data.text, template) });
+    }, [getTemplateInfo, templatesList, validateParsedInput]);
+    /**
+     * Parse phone string
+     */
+    const parseInput = react_1.default.useCallback((value, caret) => {
+        const data = {
+            text: '',
+            caret: 0,
+        };
+        value
+            .trim()
+            .split('')
+            .forEach((character, charIndex) => {
+            const isMatch = new RegExp(/[+0-9]/).test(character);
+            if (isMatch) {
+                data.text = `${data.text}${character}`;
+                if (charIndex < (caret || 0)) {
+                    data.caret += 1;
+                }
+            }
+        });
+        return Object.assign({}, data);
+    }, []);
+    const parseAndValidate = react_1.default.useCallback(inputValue => {
+        const { text } = parseInput(inputValue);
+        const { template } = getTemplateInfo(text);
+        return validateParsedInput(text, template);
+    }, [getTemplateInfo, parseInput, validateParsedInput]);
+    const parseAndFormat = react_1.default.useCallback((inputValue, caret) => {
+        const parsed = parseInput(inputValue, caret);
+        return formatParsedInput(parsed.text, parsed.caret);
+    }, [formatParsedInput, parseInput]);
+    return {
+        /**
+         * Validate parsed phone string by template\
+         * ```js
+         * // Example:
+         * validateParsedInput('79129876543', '7 (xxx) xxx-xx-xx'); // true
+         * validateParsedInput('79129876', '7 (xxx) xxx-xx-xx'); // false
+         * ```
+         */
+        validateParsedInput,
+        getTemplateInfo,
+        /**
+         * Parse plain phone string and validate result\
+         * ```js
+         * // Example:
+         * parseAndValidate('+7 912 659-99-88'); // true
+         * parseAndValidate('+7 912 659-99-'); // false
+         * ```
+         */
+        parseAndValidate,
+        parseAndFormat,
+        /**
+         * Format phone string by template\
+         * ```js
+         * // Example:
+         * format('')
+         * ```
+         */
+        formatParsedInput,
+        /**
+         * Parse input phone string\
+         * ```js
+         * // Example:
+         * const { text, caret } = parseInput('+7 (912', 7); // { '7912', 4 }
+         * ```
+         */
+        parseInput,
+    };
+};
+exports.usePhoneUtils = usePhoneUtils;

package/README.md

@@ -1,3 +1,14 @@
+## Установка.
+
+Для работы требуются следующие модули:
+
+- react
+- react-dom
+- @emotion/styled - CSS In JS
+- @emotion/react - CSS In JS React
+- react-modal - Мобальные окна и дроверы
+- react-popper - Выпадающие меню
+- react-window - Виртуализированный список
 
 
 ```bash
@@ -5,13 +16,4 @@ $ npm install @emotion/react @emotion/styled react react-dom react-modal react-p
 
 ```
 
-_@types/emotion.d.ts_
-
-```ts
-import { UITheme } from '@via-profit/ui-kit';
-
-declare module '@emotion/react' {
-  export interface Theme extends UITheme {}
-}
-
-```
+## Документация [здесь](./docs/README.md)

package/SelectBox/IconChevronDown.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export default _default;

package/SelectBox/IconChevronDown.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const IconChevronDown = (props, ref) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: "1em", height: "1em", ref: ref }, props),
+    react_1.default.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 48, d: "m112 184 144 144 144-144" })));
+exports.default = react_1.default.forwardRef(IconChevronDown);

package/SelectBox/SelectButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+export type SelectButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    readonly isOpen?: boolean;
+    readonly fullWidth?: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    readonly isOpen?: boolean | undefined;
+    readonly fullWidth?: boolean | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;
+export default _default;

package/SelectBox/SelectButton.js

@@ -0,0 +1,78 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const IconChevronDown_1 = __importDefault(require("./IconChevronDown"));
+const StyledButton = styled_1.default.button `
+  display: flex;
+  font-size: 1em;
+  align-items: center;
+  justify-content: space-between;
+  outline: 1px solid transparent;
+  box-shadow: none;
+  text-align: left;
+  padding: 0.8em 1em;
+  cursor: pointer;
+  outline: transparent;
+  transition: all 180ms ease-out 0s;
+  background: none;
+  color: currentColor;
+  max-width: ${({ $fullWidth }) => ($fullWidth ? '100%' : '16em')};
+  border: 1px solid;
+  border-radius: ${({ theme }) => theme.shape.radiusFactor * 2}em;
+  border-color: ${({ theme }) => theme.color.surface.toString()};
+  &:hover {
+    background-color: ${({ theme }) => theme.color.surface.darken(5).toString()};
+  }
+  &:active {
+    background-color: ${({ theme }) => theme.color.surface.darken(10).toString()};
+  }
+  &:focus-visible {
+    outline: 2px solid ${({ theme }) => theme.color.accentPrimary.toString()};
+  }
+`;
+const ValueWrapper = styled_1.default.span `
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  font-size: 0.86em;
+  display: block;
+  pointer-events: none;
+`;
+const ChevronWrapper = styled_1.default.span `
+  margin-left: 1em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 120ms ease-out;
+  pointer-events: none;
+  transform: rotateZ(0);
+  ${({ $isOpen }) => $isOpen &&
+    (0, react_2.css) `
+      transform: rotateZ(180deg);
+    `}
+`;
+const SelectButton = (props, ref) => {
+    const { children, isOpen, fullWidth } = props, nativeProps = __rest(props, ["children", "isOpen", "fullWidth"]);
+    return (react_1.default.createElement(StyledButton, Object.assign({ type: "button", "$fullWidth": fullWidth }, nativeProps, { ref: ref }),
+        react_1.default.createElement(ValueWrapper, null, children),
+        react_1.default.createElement(ChevronWrapper, { "$isOpen": isOpen },
+            react_1.default.createElement(IconChevronDown_1.default, null))));
+};
+exports.default = react_1.default.forwardRef(SelectButton);

package/SelectBox/index.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { MenuRef, MenuProps, Value } from '../Menu';
+type SelectBoxMenuProps<T, Multiple extends boolean | undefined = false> = Pick<MenuProps<T, Multiple>, 'items' | 'value' | 'estimatedItemSize' | 'endThreshold' | 'overscanCount' | 'getOptionSelected' | 'onEndReached' | 'onSelectItem' | 'renderItem' | 'multiple' | 'zIndex' | 'onRequestClose' | 'isOpen'> & {
+    readonly fullWidth?: boolean;
+    readonly itemToString: ItemToString<T, Multiple>;
+    readonly renderInput?: (params: RenderInputProps<T, Multiple>) => React.ReactNode;
+    readonly onRequestOpen: (event?: FocusEvent | KeyboardEvent | MouseEvent | React.FocusEvent | React.KeyboardEvent | React.MouseEvent) => void;
+};
+export type ItemToString<T, Multiple> = Multiple extends undefined | false ? (item: T) => string : undefined;
+export type SelectoBoxContainerRef = HTMLButtonElement;
+export type RenderInputProps<T, Multiple extends boolean | undefined = undefined> = {
+    readonly fullWidth?: boolean;
+    readonly selected: Value<T, Multiple> | null;
+    readonly inputRef: React.Ref<HTMLButtonElement>;
+    readonly onClick: React.MouseEventHandler<HTMLButtonElement>;
+    readonly onFocus: React.FocusEventHandler<HTMLButtonElement>;
+    readonly onBlur: React.FocusEventHandler<HTMLButtonElement>;
+    readonly onKeyDown: React.KeyboardEventHandler<HTMLButtonElement>;
+};
+export type SelectBoxRef<T> = Pick<MenuRef<T>, 'scrollToItem' | 'scrollTo' | 'scrollToFirstSelected' | 'selectItem' | 'highlightIndex' | 'hightlightPrevItem' | 'hightlightNextItem' | 'hightlightFirstItem' | 'hightlightLastItem' | 'selectHightlightedItem' | 'updatePopper'> & {
+    readonly clear: () => void;
+    readonly focus: () => void;
+    readonly blur: () => void;
+};
+export type SelectBoxProps<T, Multiple extends boolean | undefined = undefined> = SelectBoxMenuProps<T, Multiple> & {
+    readonly containerRef?: React.Ref<SelectoBoxContainerRef>;
+    readonly notSelectedLabel?: React.ReactNode;
+};
+declare const _default: <T, Multiple extends boolean | undefined = false>(props: Pick<MenuProps<T, Multiple>, "zIndex" | "isOpen" | "estimatedItemSize" | "overscanCount" | "items" | "value" | "endThreshold" | "multiple" | "getOptionSelected" | "onEndReached" | "onSelectItem" | "renderItem" | "onRequestClose"> & {
+    readonly fullWidth?: boolean | undefined;
+    readonly itemToString: ItemToString<T, Multiple>;
+    readonly renderInput?: ((params: RenderInputProps<T, Multiple>) => React.ReactNode) | undefined;
+    readonly onRequestOpen: (event?: MouseEvent | KeyboardEvent | FocusEvent | React.FocusEvent<Element, Element> | React.KeyboardEvent<Element> | React.MouseEvent<Element, MouseEvent> | undefined) => void;
+} & {
+    readonly containerRef?: React.Ref<HTMLButtonElement> | undefined;
+    readonly notSelectedLabel?: React.ReactNode;
+} & {
+    ref?: React.Ref<SelectBoxRef<T>> | undefined;
+}) => JSX.Element;
+export default _default;

package/SelectBox/index.js

@@ -0,0 +1,188 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const Menu_1 = __importDefault(require("../Menu"));
+const SelectButton_1 = __importDefault(require("./SelectButton"));
+const popper_options_1 = __importDefault(require("./popper-options"));
+const SelectBox = react_1.default.forwardRef((props, ref) => {
+    const { containerRef, itemToString, value, items, isOpen, notSelectedLabel = 'Not selected', estimatedItemSize, endThreshold, overscanCount, multiple, zIndex, fullWidth, renderInput, onRequestOpen, onRequestClose, getOptionSelected, onEndReached, onSelectItem, renderItem, } = props;
+    const menuRef = react_1.default.useRef(null);
+    const [currentOpen, setCurrentOpen] = react_1.default.useState(isOpen);
+    const [currentValue, setCurrentValue] = react_1.default.useState(value);
+    const [anchorElement, setAnchorElement] = react_1.default.useState(null);
+    const isFocusedRef = react_1.default.useRef(false);
+    /**
+     * API
+     */
+    react_1.default.useImperativeHandle(ref, () => ({
+        highlightIndex: (index) => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.highlightIndex(index); },
+        hightlightPrevItem: () => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.hightlightPrevItem(); },
+        hightlightNextItem: () => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.hightlightNextItem(); },
+        hightlightFirstItem: () => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.hightlightFirstItem(); },
+        hightlightLastItem: () => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.hightlightLastItem(); },
+        selectHightlightedItem: () => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.selectHightlightedItem(); },
+        updatePopper: () => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.updatePopper(); },
+        scrollToFirstSelected: () => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.scrollToFirstSelected(); },
+        selectItem: (index) => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.selectItem(index); },
+        scrollTo: (scrollOffset) => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo(scrollOffset); },
+        scrollToItem: (index, align) => { var _a; return (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(index, align); },
+        clear: () => {
+            setCurrentValue(null);
+            anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.focus();
+        },
+        focus: () => anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.focus(),
+        blur: () => anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.blur(),
+    }), [anchorElement]);
+    const onClickEvent = react_1.default.useCallback((event) => {
+        if (!currentOpen) {
+            onRequestOpen(event);
+        }
+        else {
+            onRequestClose(event);
+        }
+    }, [currentOpen, onRequestClose, onRequestOpen]);
+    const inputKeydownEvent = react_1.default.useCallback((event) => {
+        var _a, _b, _c, _d, _e;
+        if (!isFocusedRef.current) {
+            return;
+        }
+        switch (event.code) {
+            case 'Enter':
+            case 'NumpadEnter':
+                event.preventDefault();
+                (_a = menuRef.current) === null || _a === void 0 ? void 0 : _a.selectHightlightedItem();
+                break;
+            case 'ArrowUp':
+                {
+                    event.preventDefault();
+                    (_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.hightlightPrevItem();
+                }
+                break;
+            case 'ArrowDown':
+                {
+                    event.preventDefault();
+                    (_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.hightlightNextItem();
+                    if (!currentOpen) {
+                        onRequestOpen(event);
+                    }
+                }
+                break;
+            case 'Home':
+                {
+                    event.preventDefault();
+                    (_d = menuRef.current) === null || _d === void 0 ? void 0 : _d.hightlightFirstItem();
+                }
+                break;
+            case 'End':
+                {
+                    event.preventDefault();
+                    (_e = menuRef.current) === null || _e === void 0 ? void 0 : _e.hightlightLastItem();
+                }
+                break;
+            case 'PageUp':
+            case 'PageDown':
+                event.preventDefault();
+                break;
+            case 'Escape':
+            case 'Tab':
+                onRequestClose(event);
+                break;
+            case 'Space':
+                if (!currentOpen) {
+                    onRequestOpen(event);
+                }
+                break;
+            default:
+                // do nothing
+                break;
+        }
+    }, [currentOpen, onRequestClose, onRequestOpen]);
+    react_1.default.useEffect(() => {
+        if (value === null) {
+            setCurrentValue(null);
+            return;
+        }
+        if (multiple) {
+            if (Array.isArray(value)) {
+                setCurrentValue(value);
+            }
+            if (!Array.isArray(value)) {
+                setCurrentValue([value]);
+            }
+        }
+        if (!multiple) {
+            if (Array.isArray(value)) {
+                setCurrentValue(value[0]);
+            }
+            if (!Array.isArray(value)) {
+                setCurrentValue(value);
+            }
+        }
+    }, [value, multiple]);
+    react_1.default.useEffect(() => {
+        setCurrentOpen(isOpen);
+    }, [isOpen]);
+    const onSelectItemF = react_1.default.useCallback(selected => {
+        setCurrentValue(selected);
+        if (typeof onSelectItem === 'function') {
+            onSelectItem(selected);
+        }
+        anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.focus();
+    }, [onSelectItem, anchorElement]);
+    const inputElement = react_1.default.useMemo(() => {
+        const hasValue = currentValue && currentValue !== null;
+        const valueIsNotArray = !Array.isArray(currentValue);
+        const hasCustomFunc = typeof itemToString === 'function';
+        const elem = typeof renderInput === 'function' ? (renderInput({
+            fullWidth,
+            inputRef: setAnchorElement,
+            selected: currentValue,
+            onBlur: () => {
+                isFocusedRef.current = false;
+            },
+            onFocus: event => {
+                isFocusedRef.current = true;
+                onRequestOpen(event);
+            },
+            onKeyDown: inputKeydownEvent,
+            onClick: onClickEvent,
+        })) : (react_1.default.createElement(SelectButton_1.default, { fullWidth: fullWidth, isOpen: currentOpen, onKeyDown: inputKeydownEvent, onClick: onClickEvent, ref: el => {
+                if (typeof containerRef === 'object' && containerRef !== null) {
+                    containerRef.current = el;
+                }
+                if (typeof containerRef === 'function') {
+                    containerRef(el);
+                }
+                setAnchorElement(el);
+            } }, hasValue && valueIsNotArray && hasCustomFunc
+            ? itemToString(currentValue)
+            : notSelectedLabel));
+        return elem;
+    }, [
+        renderInput,
+        inputKeydownEvent,
+        onClickEvent,
+        itemToString,
+        onRequestOpen,
+        currentValue,
+        notSelectedLabel,
+        containerRef,
+        currentOpen,
+        fullWidth,
+    ]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        inputElement,
+        react_1.default.createElement(Menu_1.default, { ref: menuRef, items: items, value: currentValue, isOpen: currentOpen && items.length > 0, autofocus: true, anchorElement: anchorElement, estimatedItemSize: estimatedItemSize, endThreshold: endThreshold, overscanCount: overscanCount, getOptionSelected: getOptionSelected, onEndReached: onEndReached, onSelectItem: onSelectItemF, renderItem: renderItem, multiple: multiple, zIndex: zIndex, closeOutsideClick: true, popperOptions: popper_options_1.default, onRequestClose: evt => {
+                if ((evt === null || evt === void 0 ? void 0 : evt.target) !== anchorElement) {
+                    onRequestClose(evt);
+                    setTimeout(() => {
+                        anchorElement === null || anchorElement === void 0 ? void 0 : anchorElement.focus();
+                    }, 100);
+                }
+            } })));
+});
+SelectBox.displayName = 'SelectBox';
+exports.default = SelectBox;

package/SelectBox/popper-options.d.ts

@@ -0,0 +1,4 @@
+import type { usePopper } from 'react-popper';
+export type PopperOptions = Parameters<typeof usePopper>[2];
+export declare const popperOptions: PopperOptions;
+export default popperOptions;

package/SelectBox/popper-options.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.popperOptions = void 0;
+exports.popperOptions = {
+    placement: 'bottom-start',
+    modifiers: [
+        {
+            name: 'offset',
+            options: {
+                offset: [0, 8],
+            },
+        },
+        {
+            name: 'flip',
+            enabled: true,
+            options: {
+                altBoundary: true,
+                padding: 8,
+            },
+        },
+        {
+            name: 'preventOverflow',
+            enabled: true,
+            options: {
+                altAxis: true,
+                altBoundary: true,
+                tether: true,
+                padding: 8,
+            },
+        },
+    ],
+};
+exports.default = exports.popperOptions;

package/Surface/SurfaceContainer.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type SurfaceContainerProps = React.HTMLAttributes<HTMLDivElement> & {
+    readonly noMargin?: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    readonly noMargin?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Surface/SurfaceContainer.js

@@ -0,0 +1,39 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const StyledSurfaceContainer = styled_1.default.div `
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  background: ${({ theme }) => theme.color.surface.toString()};
+  color: ${({ theme }) => theme.color.textPrimary.toString()};
+  box-shadow: ${({ theme }) => `0 0.5em 2em -0.8em ${theme.color.surface.darken(100).alpha(0.4).toString()}`};
+  border-radius: ${({ theme }) => theme.shape.radiusFactor}em;
+  font-size: 1em;
+  ${({ $noMargin }) => typeof $noMargin === 'undefined' &&
+    $noMargin === false &&
+    (0, react_2.css) `
+      margin-bottom: 1em;
+    `}
+`;
+const SurfaceContainer = (props, ref) => {
+    const { noMargin, children } = props, nativeProps = __rest(props, ["noMargin", "children"]);
+    return (react_1.default.createElement(StyledSurfaceContainer, Object.assign({ "$noMargin": noMargin }, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(SurfaceContainer);

package/Surface/SurfaceContent.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type SurfaceContentProps = React.HTMLAttributes<HTMLDivElement> & {
+    readonly noPadding?: boolean;
+};
+declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
+    readonly noPadding?: boolean | undefined;
+} & React.RefAttributes<HTMLDivElement>>;
+export default _default;

package/Surface/SurfaceContent.js

@@ -0,0 +1,31 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const styled_1 = __importDefault(require("@emotion/styled"));
+const react_2 = require("@emotion/react");
+const StyledContent = styled_1.default.div `
+  flex: 1;
+  ${({ $noPadding }) => (typeof $noPadding === 'undefined' || $noPadding === false) &&
+    (0, react_2.css) `
+      padding: 1.4rem 1rem 1rem 1rem;
+    `}
+`;
+const SurfaceContent = (props, ref) => {
+    const { children, noPadding } = props, nativeProps = __rest(props, ["children", "noPadding"]);
+    return (react_1.default.createElement(StyledContent, Object.assign({ "$noPadding": noPadding }, nativeProps, { ref: ref }), children));
+};
+exports.default = react_1.default.forwardRef(SurfaceContent);