@cube-dev/ui-kit 0.9.5 → 0.9.8

package/cjs/utils/transitions.js

@@ -0,0 +1,67 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * 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/cjs/utils/tree.js

@@ -0,0 +1,28 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * 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/cjs/utils/warnings.js

@@ -0,0 +1,55 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * 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/es/components/Base.js

@@ -0,0 +1,58 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * 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);
+/**
+ * @deprecated consider using styled() instead
+ */
+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));
+};
+/**
+ * @deprecated consider using styled() instead
+ */
+const _Base = forwardRef(Base);
+export { _Base as Base };
+
+        

package/es/components/Block.js

@@ -0,0 +1,22 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * 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/es/components/GlobalStyles.js

@@ -0,0 +1,319 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * 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/es/components/GridProvider.js

@@ -0,0 +1,64 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * 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/es/components/HiddenInput.js

@@ -0,0 +1,33 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * 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/es/components/OpenTrasition.js

@@ -0,0 +1,31 @@
+/**
+ * @license MIT
+ * author: Cube Dev Team
+ * @cube-dev/ui-kit v0.9.8
+ * 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));
+}
+
+