@cube-dev/ui-kit 0.9.4 → 0.9.7

package/dist/cjs/utils/transitions.js

@@ -1,67 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getOverlayTransitionCSS = void 0;
-const DIRECTION_MAP = {
-    initial: 'top center',
-    top: 'bottom center',
-    right: 'center left',
-    left: 'center right',
-    bottom: 'top center',
-};
-const TRANSLATE_MAP = {
-    initial: 'translate(0px, calc(-1 * var(--overlay-offset)))',
-    top: 'translate(0px, calc(1 * var(--overlay-offset)))',
-    right: 'translate(calc(-1 * var(--overlay-offset)), 0px)',
-    left: 'translate(calc(1 * var(--overlay-offset)), 0px)',
-    bottom: 'translate(0px, calc(-1 * var(--overlay-offset)))',
-};
-const getOverlayTransitionCSS = ({ suffix = '', placement = 'initial', minScale = 0.8, minOffset = '8px', } = {}) => `
-  &${suffix} {
-    transform: var(--overlay-position);
-    transform-origin: ${DIRECTION_MAP[placement]};
-    --overlay-offset: ${minOffset};
-    --overlay-hidden-x-scale: ${placement === 'top' || placement === 'bottom' || placement === 'initial'
-    ? '1'
-    : minScale};
-    --overlay-hidden-y-scale: ${placement === 'left' || placement === 'right' ? '1' : minScale};
-    --overlay-translate-visible: translate(0px, 0px);
-    --overlay-translate-hidden: ${TRANSLATE_MAP[placement]};
-    --overlay-transition: 180ms;
-    --overlay-hidden-scale: scale(var(--overlay-hidden-x-scale), var(--overlay-hidden-y-scale));
-    --overlay-normal-scale: scale(1, 1);
-  }
-
-  &.cube-overlay-transition-enter${suffix} {
-    opacity: 0;
-    transform: var(--overlay-translate-hidden) var(--overlay-hidden-scale);
-  }
-
-  &.cube-overlay-transition-enter-active${suffix} {
-    opacity: 1;
-    transform: var(--overlay-translate-visible) var(--overlay-normal-scale);
-    transition: transform var(--overlay-transition) cubic-bezier(0, .66, 0, .66), opacity var(--overlay-transition) cubic-bezier(0, .66, 0, .66);
-    pointer-events: none;
-  }
-
-  &.cube-overlay-transition-exit${suffix} {
-    opacity: 1;
-    transform: var(--overlay-translate-visible) var(--overlay-normal-scale);
-  }
-
-  &.cube-overlay-transition-exit-active${suffix} {
-    opacity: 0;
-    transform: var(--overlay-translate-hidden) var(--overlay-hidden-scale);
-    pointer-events: none;
-    transition: transform var(--overlay-transition) cubic-bezier(.66, 0, .66, 0), opacity var(--overlay-transition) cubic-bezier(.66, 0, .66, 0);
-  }
-`;
-exports.getOverlayTransitionCSS = getOverlayTransitionCSS;
-
-        

package/dist/cjs/utils/tree.js

@@ -1,28 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.toFlatTree = void 0;
-function toFlatTree(tree, includingFolders) {
-    return tree.reduce((result, node) => {
-        if (!node.isLeaf) {
-            result = [
-                ...result,
-                ...(includingFolders ? [node] : []),
-                ...toFlatTree(node.children || [], includingFolders),
-            ];
-        }
-        else {
-            result.push(node);
-        }
-        return result;
-    }, []);
-}
-exports.toFlatTree = toFlatTree;
-
-        

package/dist/cjs/utils/warnings.js

@@ -1,55 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.deprecationWarning = exports.warn = exports.accessibilityWarning = exports.propDeprecationWarning = void 0;
-const SUGGESTED_PROP_MAP = {
-    disabled: 'isDisabled',
-    loading: 'isLoading',
-    selected: 'isSelected',
-};
-const PREFIX = 'CubeUIKit';
-function propDeprecationWarning(name, props, propList) {
-    propList.forEach((prop) => {
-        if (prop in props) {
-            const suggestion = SUGGESTED_PROP_MAP[prop];
-            warn(`"${prop}" property of "${name}" component is deprecated.${suggestion ? ` Use "${suggestion}" property instead.` : ''}`);
-        }
-    });
-}
-exports.propDeprecationWarning = propDeprecationWarning;
-function accessibilityWarning(...args) {
-    console.warn(`${PREFIX} accessibility issue:`, ...args);
-}
-exports.accessibilityWarning = accessibilityWarning;
-function warn(...args) {
-    console.warn(`${PREFIX}:`, ...args);
-}
-exports.warn = warn;
-function deprecationWarning(
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-condition, { property, name, betterAlternative, reason, }) {
-    if (condition)
-        return;
-    if (process.env.NODE_ENV === 'production') {
-        return warn(`DEPRECATION ${name} "${property}" -> ${typeof betterAlternative === 'function'
-            ? betterAlternative()
-            : betterAlternative}`);
-    }
-    // we can make deprecations even better if we add the md syntax in the console.
-    // anyway, everything down below will be stripped in the production build
-    console.group(`⚠️ ${PREFIX}: Deprecation in ${name}`);
-    warn(`"${property}" is deprecated, consider better alternative: ${typeof betterAlternative === 'function'
-        ? betterAlternative()
-        : betterAlternative}`);
-    reason && warn(`Reason: ${typeof reason === 'function' ? reason() : reason}`);
-    console.groupEnd();
-}
-exports.deprecationWarning = deprecationWarning;
-
-        

package/dist/es/components/Base.js

@@ -1,52 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useContext } from 'react';
-import styled from 'styled-components';
-import { BreakpointsContext } from '../providers/BreakpointsProvider';
-import { pointsToZones } from '../utils/responsive';
-import { renderStyles } from '../utils/renderStyles';
-import { modAttrs } from '../utils/react';
-const BLOCK_MAP = {
-    inline: 'block',
-    'inline-grid': 'grid',
-    'inline-flex': 'flex',
-};
-const INLINE_MAP = {
-    block: 'inline-block',
-    grid: 'inline-grid',
-    flex: 'inline-flex',
-};
-const BaseElement = styled.div(({ css }) => css);
-const Base = function Base(allProps, ref) {
-    let { as, styles: originalStyles, breakpoints, block, mods, inline, isHidden, isDisabled, qa, qaVal, css, element, ...props } = allProps;
-    const styles = { ...originalStyles };
-    if (block) {
-        styles.display =
-            typeof styles.display === 'string'
-                ? BLOCK_MAP[styles.display || 'inline']
-                : 'block';
-    }
-    if (inline) {
-        styles.display =
-            typeof styles.display === 'string'
-                ? INLINE_MAP[styles.display || 'block']
-                : 'inline-block';
-    }
-    const contextBreakpoints = useContext(BreakpointsContext);
-    const zones = pointsToZones(breakpoints || contextBreakpoints);
-    css = `${css !== null && css !== void 0 ? css : ''}${renderStyles(styles, zones)}`;
-    if (mods) {
-        Object.assign(props, modAttrs(mods));
-    }
-    return (_jsx(BaseElement, { as: as, "data-element": element, "data-qa": qa, "data-qaval": qaVal, ...props, hidden: isHidden, disabled: isDisabled, ref: ref, css: css }, void 0));
-};
-const _Base = forwardRef(Base);
-export { _Base as Base };
-
-        

package/dist/es/components/Block.js

@@ -1,22 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { CONTAINER_STYLES } from '../styles/list';
-import { extractStyles } from '../utils/styles';
-import { filterBaseProps } from '../utils/filterBaseProps';
-import { Base } from './Base';
-export const CUBE_BLOCK_STYLES = {
-    display: 'block',
-};
-export const Block = forwardRef((props, ref) => {
-    const styles = extractStyles(props, CONTAINER_STYLES, CUBE_BLOCK_STYLES);
-    return (_jsx(Base, { ...filterBaseProps(props, { eventProps: true }), styles: styles, ref: ref }, void 0));
-});
-
-        

package/dist/es/components/GlobalStyles.js

@@ -1,319 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-import { TOKENS } from '../tokens';
-import { createGlobalStyle } from 'styled-components';
-const BODY_STYLES = {
-    'background-color': 'white !important',
-    'font-family': 'var(--font)',
-    '-webkit-font-smoothing': 'antialiased',
-    '-moz-osx-font-smoothing': 'grayscale',
-    margin: '0',
-    padding: '0',
-    color: 'rgba(20, 20, 70, .75)',
-    'font-size': '14px',
-    'line-height': '20px',
-    'letter-spacing': '0.02em',
-    'font-weight': '400',
-};
-const fontsProvider = ({ publicUrl = '' }) => `
-  @font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url(${publicUrl}/fonts/Inter-Regular.woff2) format('woff2'),
-      url(${publicUrl}/fonts/Inter-Regular.woff) format('woff');
-  }
-  @font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 500;
-    font-display: swap;
-    src: url(${publicUrl}/fonts/Inter-Medium.woff2) format('woff2'),
-      url(${publicUrl}/fonts/Inter-Medium.woff) format('woff');
-  }
-  @font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 600;
-    font-display: swap;
-    src: url(${publicUrl}/fonts/Inter-SemiBold.woff2) format('woff2'),
-      url(${publicUrl}/fonts/Inter-SemiBold.woff) format('woff');
-  }
-  @font-face {
-    font-family: 'Inter';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url(${publicUrl}/fonts/Inter-Bold.woff2) format('woff2'),
-      url(${publicUrl}/fonts/Inter-Bold.woff) format('woff');
-  }
-  @font-face {
-    font-family: 'Source Code Pro';
-    src: url('${publicUrl}/fonts/SourceCodePro-Regular.woff2') format('woff2'),
-      url('${publicUrl}/fonts/SourceCodePro-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
-  }
-
-  @font-face {
-    font-family: 'JetBrains Mono';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url(${publicUrl}/fonts/JetBrainsMono-Regular.woff2) format('woff2'),
-      url(${publicUrl}/fonts/JetBrainsMono-Regular.woff) format('woff');
-  }
-
-  @font-face {
-    font-family: 'JetBrains Mono';
-    font-style: normal;
-    font-weight: 700;
-    font-display: swap;
-    src: url(${publicUrl}/fonts/JetBrainsMono-Bold.woff2) format('woff2'),
-      url(${publicUrl}/fonts/JetBrainsMono-Bold.woff) format('woff');
-  }
-`;
-export const GlobalStyles = createGlobalStyle `
-  body {
-    ${({ applyLegacyTokens }) => {
-    return applyLegacyTokens
-        ? Object.entries(TOKENS)
-            .map(([key, value]) => {
-            return `--${key}: ${value};`;
-        })
-            .join('\n    ')
-        : '';
-}}
-    ${({ bodyStyles }) => {
-    return Object.entries({ ...BODY_STYLES, ...bodyStyles })
-        .map(([key, value]) => {
-        return `${key}: ${value};`;
-    })
-        .join('\n    ');
-}}
-  }
-
-  html {
-    --font: ${({ font }) => font
-    || 'Inter'}, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-    --monospace-font: ${({ monospaceFont }) => `${monospaceFont ? `${monospaceFont}, ` : ''}Menlo, Monaco, Consolas, 'Courier New', monospace;}`}
-
-  .cube-notification-container {
-    min-width: 288px;
-    max-width: 340px;
-    width: calc(100vw - 32px);
-    position: fixed;
-    top: 32px;
-    right: 16px;
-    z-index: 999999;
-  }
-
-  .cube-notifications {
-    display: grid;
-    grid-auto-flow: row;
-    grid-template-columns: 1fr;
-  }
-
-  .cube-notification-enter {
-    opacity: 0;
-    max-height: 0px;
-    margin-bottom: 0px;
-    transform: translate(100%, 0);
-  }
-
-  .cube-notification-enter-active {
-    opacity: 1;
-    max-height: 56px;
-    margin-bottom: 8px;
-    transform: translate(0, 0);
-    transition: all 300ms ease-in;
-
-    & > * {
-      margin-bottom: 0px;
-    }
-  }
-
-  .cube-notification-exit {
-    opacity: 1;
-    margin-bottom: 8px;
-    max-height: 56px;
-    transform: translate(0, 0);
-  }
-
-  .cube-notification-exit-active {
-    opacity: 0;
-    max-height: 0px;
-    margin-bottom: 0px;
-    transform: translate(100%, 0);
-    transition: all 300ms ease-in;
-
-    & > * {
-      margin-bottom: 0px;
-    }
-  }
-
-  b {
-    font-weight: 600;
-  }
-
-  [type=reset], [type=submit], button, html [type=button] {
-    -webkit-appearance: none;
-  }
-
-  code {
-    font-family: var(--monospace-font);
-  }
-
-  ${({ fonts, publicUrl }) => fonts === false ? '' : fontsProvider({ publicUrl })}
-
-  // Prism Code
-  code[class*="language-"],
-  pre[class*="language-"] {
-    color: var(--dark-color);
-    background: none;
-    font-family: "Source Code Pro", Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
-    text-align: left;
-    font-weight: normal;
-    font-size: 14px;
-    line-height: 20px;
-    white-space: pre;
-    word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
-    border-radius: 4px;
-    border: none;
-
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
-
-    -webkit-hyphens: none;
-    -moz-hyphens: none;
-    -ms-hyphens: none;
-    hyphens: none;
-  }
-
-  pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
-  code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
-    text-shadow: none;
-    /*background: #b3d4fc;*/
-  }
-
-  pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
-  code[class*="language-"]::selection, code[class*="language-"] ::selection {
-    text-shadow: none;
-    /*background: #b3d4fc;*/
-  }
-
-  @media print {
-    code[class*="language-"],
-    pre[class*="language-"] {
-      text-shadow: none;
-    }
-  }
-
-  /* Code blocks */
-  pre[class*="language-"] {
-    overflow: auto;
-  }
-
-  :not(pre) > code[class*="language-"],
-  pre[class*="language-"] {
-    background: transparent;
-  }
-
-  /* Inline code */
-  :not(pre) > code[class*="language-"] {
-    border-radius: .3em;
-    white-space: normal;
-  }
-
-  .token.comment,
-  .token.prolog,
-  .token.doctype,
-  .token.cdata {
-    color: var(--dark-04-color);
-  }
-
-  .token.keyword,
-  .token.tag,
-  .token.operator,
-  .token.punctuation {
-    color: #993388;
-  }
-
-  .namespace {
-    opacity: .7;
-  }
-
-  .token.property,
-  .token.boolean,
-  .token.constant,
-  .token.symbol,
-  .token.deleted {
-    color: var(--pink-color);
-  }
-
-  .token.entity,
-  .token.number {
-    color: #30A666;
-  }
-
-  .token.selector,
-  .token.attr-name,
-  .token.string,
-  .token.char,
-  .token.builtin,
-  .token.inserted {
-    color: var(--purple-text-color);
-  }
-
-  .token.url,
-  .language-css .token.string,
-  .style .token.string {
-    color: var(--dark-color);
-  }
-
-  .token.atrule,
-  .token.attr-value {
-    color: var(--dark-color);
-  }
-
-  .token.atrule,
-  .token.keyword {
-    font-weight: 500;
-  }
-
-  .token.function,
-  .token.class-name {
-    color: var(--pink-color);
-  }
-
-  .token.regex,
-  .token.important,
-  .token.variable {
-    color: var(--pink-color);
-  }
-
-  .token.important,
-  .token.bold {
-    font-weight: bold;
-  }
-
-  .token.italic {
-    font-style: italic;
-  }
-
-  .token.entity {
-    cursor: help;
-  }
-`;
-
-        

package/dist/es/components/GridProvider.js

@@ -1,64 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, useCallback, useEffect, useState } from 'react';
-import { filterBaseProps } from '../utils/filterBaseProps';
-import { useCombinedRefs } from '../utils/react';
-import { Base } from './Base';
-const DEFAULT_STYLES = {
-    display: 'contents',
-};
-const COLUMN_WIDTH = '((@grid-width - (@column-gap * (@columns-amount - 1))) / @columns-amount)';
-export const GridProvider = forwardRef((props, outerRef) => {
-    let ref = useCombinedRefs(outerRef);
-    let { children, columns = 2, gap = '0', width: forcedWidth, initialWidth, } = props;
-    let [width, setWidth] = useState(forcedWidth || initialWidth || '100vw');
-    const resizeCallback = useCallback(() => {
-        var _a;
-        const el = (_a = ref === null || ref === void 0 ? void 0 : ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
-        if (!el)
-            return;
-        const computedStyle = getComputedStyle(el);
-        const containerWidth = el.clientWidth
-            - parseFloat(computedStyle.paddingLeft)
-            - parseFloat(computedStyle.paddingRight);
-        setWidth(`${containerWidth}px`);
-    }, [ref, columns, gap]);
-    useEffect(() => {
-        if (forcedWidth)
-            return;
-        const el = ref && ref.current && ref.current.parentNode;
-        if (!el)
-            return;
-        let sensor;
-        import('../utils/ResizeSensor')
-            .then((module) => module.ResizeSensor)
-            .then((ResizeSensor) => {
-            sensor = new ResizeSensor(el, resizeCallback);
-        });
-        return () => {
-            if (sensor) {
-                sensor.detach();
-            }
-        };
-    }, [resizeCallback]);
-    useEffect(() => {
-        if (forcedWidth)
-            return;
-        resizeCallback();
-    }, [resizeCallback]);
-    return (_jsx(Base, { ...filterBaseProps(props, { eventProps: true }), styles: {
-            ...DEFAULT_STYLES,
-            '--grid-width': width,
-            '--columns-amount': columns,
-            '--column-gap': gap,
-            '--column-width': COLUMN_WIDTH,
-        }, ref: ref, children: children }, void 0));
-});
-
-        

package/dist/es/components/HiddenInput.js

@@ -1,33 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-import styled from 'styled-components';
-export const HiddenInput = styled.input `
-  &&&&& {
-    display: block;
-    font-family: inherit;
-    font-size: 100%;
-    line-height: 1.15;
-    margin: 0;
-    overflow: visible;
-    box-sizing: border-box;
-    padding: 0;
-    position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;
-    opacity: 0.0001;
-    z-index: 1;
-    cursor: ${({ isButton }) => (isButton ? 'pointer' : 'default')};
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-  }
-`;
-
-        

package/dist/es/components/OpenTrasition.js

@@ -1,31 +0,0 @@
-/**
- * @license MIT
- * author: Cube Dev Team
- * @cube-dev/ui-kit v0.9.4
- * Released under the MIT license.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Children, cloneElement } from 'react';
-import Transition from 'react-transition-group/Transition';
-const OPEN_STATES = {
-    entering: false,
-    entered: true,
-};
-/**
- * Timeout issues adding css animations to enter may be related to
- * https://github.com/reactjs/react-transition-group/issues/189 or
- * https://github.com/reactjs/react-transition-group/issues/22
- * my VM isn't good enough to debug accurately and get a better answer.
- *
- * As a result, use enter 0 so that is-open is applied once entered
- * it doesn't matter if we know when the css-animation is done on entering
- * for exiting though, give time for the css-animation to play
- * before removing from the DOM
- * **note** hitting esc bypasses exit animation for anyone testing.
- */
-export function OpenTransition(props) {
-    return (_jsx(Transition, { timeout: { enter: 0, exit: 350 }, ...props, children: (state) => Children.map(props.children, (child) => child && cloneElement(child, { isOpen: !!OPEN_STATES[state] })) }, void 0));
-}
-
-