@ntbjs/react-components 2.0.0-rc.3 → 2.0.0-rc.30

package/cjs/components/data/Badge/Badge.js

@@ -1,93 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var index$1 = require('../../../node_modules/prop-types/index.js');
-var index = require('../../../node_modules/react/index.js');
-var Badge_styled = require('./Badge.styled.js');
-
-const _excluded = ["badgeContent", "badgeIcon", "children", "elevated", "fontSize", "fontWeight", "lineHeight", "active", "error", "warning", "backgroundColors", "colors", "verticalPadding", "horizontalPadding", "height", "minHeight", "width", "minWidth"];
-const Badge = index["default"].forwardRef(function Badge(_ref, forwardedRef) {
-  let {
-      badgeContent,
-      badgeIcon,
-      children,
-      elevated,
-      fontSize,
-      fontWeight,
-      lineHeight,
-      active,
-      error,
-      warning,
-      backgroundColors,
-      colors,
-      verticalPadding,
-      horizontalPadding,
-      height,
-      minHeight,
-      width,
-      minWidth
-    } = _ref,
-    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  if (typeof badgeContent === 'number') {
-    badgeContent = Intl.NumberFormat('en', {
-      notation: 'compact'
-    }).format(badgeContent);
-  }
-  return index["default"].createElement(Badge_styled.Badge, _rollupPluginBabelHelpers["extends"]({
-    ref: forwardedRef,
-    elevated: elevated,
-    hasChildren: Boolean(children)
-  }, props), children && index["default"].createElement(Badge_styled.BadgeChildrenContainer, null, children), (badgeIcon || badgeContent) && index["default"].createElement(Badge_styled.BadgeLabel, {
-    backgroundColors: backgroundColors,
-    colors: colors,
-    elevated: elevated,
-    fontSize: fontSize,
-    fontWeight: fontWeight,
-    lineHeight: lineHeight,
-    active: active,
-    error: error,
-    warning: warning,
-    verticalPadding: verticalPadding,
-    horizontalPadding: horizontalPadding,
-    height: height,
-    minHeight: minHeight,
-    width: width,
-    minWidth: minWidth
-  }, badgeIcon && index["default"].createElement(Badge_styled.BadgeIcon, {
-    useGutter: !!badgeContent
-  }, badgeIcon), badgeContent));
-});
-Badge.propTypes = process.env.NODE_ENV !== "production" ? {
-  badgeIcon: index$1["default"].node,
-  badgeContent: index$1["default"].oneOfType([index$1["default"].string, index$1["default"].number, index$1["default"].func, index$1["default"].element]),
-  children: index$1["default"].oneOfType([index$1["default"].node, index$1["default"].string]),
-  elevated: index$1["default"].bool,
-  active: index$1["default"].bool,
-  error: index$1["default"].bool,
-  warning: index$1["default"].bool,
-  fontSize: index$1["default"].oneOfType([index$1["default"].number, index$1["default"].string]),
-  fontWeight: index$1["default"].oneOfType([index$1["default"].number, index$1["default"].string]),
-  lineHeight: index$1["default"].oneOfType([index$1["default"].number, index$1["default"].string]),
-  colors: index$1["default"].arrayOf(index$1["default"].string),
-  backgroundColors: index$1["default"].arrayOf(index$1["default"].string),
-  verticalPadding: index$1["default"].number,
-  horizontalPadding: index$1["default"].number,
-  height: index$1["default"].number,
-  minHeight: index$1["default"].number,
-  width: index$1["default"].number,
-  minWidth: index$1["default"].number
-} : {};
-Badge.defaultProps = {
-  elevated: false,
-  active: false,
-  error: false,
-  warning: false,
-  badgeIcon: null,
-  fontWeight: 'normal',
-  lineHeight: 'normal'
-};
-var Badge$1 = Badge;
-
-exports["default"] = Badge$1;

package/cjs/components/data/Badge/Badge.styled.js

@@ -1,156 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-var defaultTheme = require('../../../utils/defaultTheme.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4,
-  _t5,
-  _t6,
-  _t7,
-  _t8;
-const Badge = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
-  align-content: center;
-  display: ${0};
-  font-family: ${0};
-  font-size: 1rem;
-  font-weight: 500;
-  min-height: 24px;
-  position: relative;
-  width: ${0};
-`), props => props.elevated || !props.hasChildren ? 'inline-flex' : 'flex', props => props.theme.primaryFontFamily, props => props.elevated ? 'fit-content' : 'initial');
-const BadgeChildrenContainer = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
-  align-self: center;
-  height: fit-content;
-  margin-right: 8px;
-`));
-const BadgeLabel = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
-  border-radius: ${0};
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
-
-  font-size: ${0};
-  font-weight: ${0};
-  line-height: ${0};
-  height: ${0};
-  letter-spacing: 0.32px;
-  margin-left: ${0};
-  position: ${0};
-  right: 0;
-  transform: ${0};
-
-  ${0}
-
-  ${0}
-
-  ${0}
-      
-
-  ${0}
-
-  ${0}
-
-    ${0}
-`), props => props.elevated ? '12px' : '14px', props => {
-  if (props.fontSize) {
-    return `${props.fontSize}px`;
-  } else {
-    return props.elevated ? '0.625rem' : '0.750rem';
-  }
-}, props => props.fontWeight ? props.fontWeight : 'normal', props => props.lineHeight ? `${props.lineHeight}px` : 'normal', props => props.height ? `${props.height}px` : 'fit-content', props => props.elevated ? '15px' : 'auto', props => props.elevated ? 'absolute' : 'initial', props => props.elevated ? 'translate(33%, -8px)' : 'initial', props => props.width ? styled.css(_t4 || (_t4 = _`
-          width: ${0}px;
-        `), props.width) : null, props => props.minWidth ? styled.css(_t5 || (_t5 = _`
-          min-width: ${0}px;
-        `), props.minWidth) : null, props => props.minHeight ? styled.css(_t6 || (_t6 = _`
-          min-height: ${0}px;
-        `), props.minHeight) : null, props => {
-  const verticalPadding = props.verticalPadding ? `${props.verticalPadding}px` : props.elevated ? '4px' : '6px';
-  const horizontalPadding = props.horizontalPadding ? `${props.horizontalPadding}px` : props.elevated ? '7px' : '10px';
-  return styled.css(_t7 || (_t7 = _`
-      padding: ${0} ${0};
-    `), verticalPadding, horizontalPadding);
-}, props => props.theme.themeProp('background', () => {
-  var _props$backgroundColo, _props$backgroundColo2;
-  const active = props.active;
-  const error = props.error;
-  const warning = props.warning;
-  const defaultBgColor = (_props$backgroundColo = props === null || props === void 0 || (_props$backgroundColo2 = props.backgroundColors) === null || _props$backgroundColo2 === void 0 ? void 0 : _props$backgroundColo2[0]) !== null && _props$backgroundColo !== void 0 ? _props$backgroundColo : props.theme.getColor('gray-600');
-  switch (true) {
-    case !error && !warning && !active:
-      return defaultBgColor;
-    case !error && !warning && active:
-      return props.theme.getColor('gray-700');
-    case error && active:
-      return props.theme.getColor('red-500');
-    case error:
-      return props.theme.getColor('red-200');
-    case warning && active:
-      return props.theme.getColor('signal-yellow-500');
-    case warning:
-      return props.theme.getColor('signal-yellow-400');
-    default:
-      return props.theme.getColor('gray-600');
-  }
-}, () => {
-  var _props$backgroundColo3, _props$backgroundColo4;
-  const active = props.active;
-  const error = props.error;
-  const warning = props.warning;
-  const defaultBgColor = (_props$backgroundColo3 = props === null || props === void 0 || (_props$backgroundColo4 = props.backgroundColors) === null || _props$backgroundColo4 === void 0 ? void 0 : _props$backgroundColo4[1]) !== null && _props$backgroundColo3 !== void 0 ? _props$backgroundColo3 : props.theme.getColor('gray-200');
-  switch (true) {
-    case !error && !warning && !active:
-      return defaultBgColor;
-    case !error && !warning && active:
-      return props.theme.getColor('white');
-    case error && active:
-      return props.theme.getColor('red-500');
-    case error:
-      return props.theme.getColor('red-200');
-    case warning && active:
-      return props.theme.getColor('signal-yellow-500');
-    case warning:
-      return props.theme.getColor('signal-yellow-400');
-    default:
-      return props.theme.getColor('gray-200');
-  }
-}), props => props.theme.themeProp('color', () => {
-  var _props$colors$, _props$colors;
-  const defaultColor = (_props$colors$ = props === null || props === void 0 || (_props$colors = props.colors) === null || _props$colors === void 0 ? void 0 : _props$colors[0]) !== null && _props$colors$ !== void 0 ? _props$colors$ : props.theme.getColor('white');
-  if (props.warning && !props.error || props.error && !props.active) {
-    return props.theme.getColor('gray-900');
-  } else {
-    return defaultColor;
-  }
-}, () => {
-  var _props$colors$2, _props$colors2;
-  const defaultColor = (_props$colors$2 = props === null || props === void 0 || (_props$colors2 = props.colors) === null || _props$colors2 === void 0 ? void 0 : _props$colors2[1]) !== null && _props$colors$2 !== void 0 ? _props$colors$2 : props.theme.getColor('gray-900');
-  if (props.error && props.active) {
-    return props.theme.getColor('white');
-  } else {
-    return defaultColor;
-  }
-}));
-const BadgeIcon = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
-  display: flex;
-  align-items: center;
-  margin-right: ${0};
-  svg {
-    height: 12px;
-  }
-`), props => props.useGutter ? '4px' : 0);
-
-exports.Badge = Badge;
-exports.BadgeChildrenContainer = BadgeChildrenContainer;
-exports.BadgeIcon = BadgeIcon;
-exports.BadgeLabel = BadgeLabel;

package/cjs/components/data/Badge/data/Badge/index.js

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Badge = require('../../Badge.js');
-
-
-
-exports["default"] = Badge["default"];

package/cjs/components/data/Popover/Popover.js

@@ -1,102 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var lodash = require('lodash');
-var index$2 = require('../../../node_modules/prop-types/index.js');
-var index = require('../../../node_modules/react/index.js');
-var Popover_styled = require('./Popover.styled.js');
-var maxSize = require('popper-max-size-modifier');
-var index$1 = require('../../../_virtual/index.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var maxSize__default = /*#__PURE__*/_interopDefaultLegacy(maxSize);
-
-const _excluded = ["content", "interactive", "placement", "duration", "trigger", "offset", "arrow", "visible", "contextMenu", "contextMenuSublevel", "children", "modifiers", "maxWidth"];
-const Popover = index["default"].forwardRef(function Popover(_ref, ref) {
-  let {
-      content = 'Tooltip',
-      interactive = true,
-      placement = 'bottom-end',
-      duration = 350,
-      trigger = 'click focus',
-      offset = [0, 8],
-      arrow = true,
-      visible = undefined,
-      contextMenu = false,
-      contextMenuSublevel = false,
-      children,
-      modifiers = [],
-      maxWidth = 'none'
-    } = _ref,
-    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  const errorOffset = index$1.react.exports.useMemo(() => arrow ? 15 : 0, [arrow]);
-  const isControlled = index$1.react.exports.useMemo(() => lodash.isBoolean(visible), [visible]);
-  const handleContextMenuItemClick = () => {
-    document.querySelectorAll('.context-menu-item:not(.opens-sublevel)').forEach(item => item.addEventListener('click', () => {
-      document.querySelectorAll('[data-tippy-root]').forEach(node => {
-        if (node._tippy) {
-          node._tippy.hide();
-        }
-      });
-    }));
-  };
-  return index["default"].createElement("div", null, index["default"].createElement(Popover_styled.Popover, _rollupPluginBabelHelpers["extends"]({
-    ref: ref,
-    content: content,
-    interactive: interactive,
-    placement: contextMenuSublevel ? 'right-start' : placement,
-    duration: duration,
-    animation: 'shift-away-subtle',
-    trigger: isControlled ? undefined : contextMenuSublevel ? 'mouseenter click focus' : trigger,
-    offset: [offset[0], offset[1] + errorOffset],
-    arrow: contextMenu ? false : arrow,
-    visible: visible,
-    popperOptions: {
-      modifiers: [_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, maxSize__default["default"]), {}, {
-        options: {
-          boundary: 'viewport',
-          rootBoundary: 'viewport',
-          padding: 10
-        }
-      }), {
-        name: 'applyMaxSize',
-        enabled: true,
-        phase: 'beforeWrite',
-        requires: ['maxSize'],
-        fn({
-          state
-        }) {
-          const {
-            height
-          } = state.modifiersData.maxSize;
-          state.styles.popper = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state.styles.popper), {}, {
-            maxHeight: `${height}px`
-          });
-        }
-      }, ...modifiers]
-    },
-    onShown: contextMenu ? handleContextMenuItemClick : undefined,
-    maxWidth: maxWidth
-  }, props), children));
-});
-Popover.propTypes = process.env.NODE_ENV !== "production" ? {
-  content: index$2["default"].oneOfType([index$2["default"].string, index$2["default"].element]).isRequired,
-  interactive: index$2["default"].bool,
-  placement: index$2["default"].oneOf(['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', 'auto-end']),
-  duration: index$2["default"].number,
-  trigger: index$2["default"].string,
-  offset: index$2["default"].arrayOf(index$2["default"].number),
-  arrow: index$2["default"].bool,
-  visible: index$2["default"].bool,
-  modifiers: index$2["default"].array,
-  maxWidth: index$2["default"].string,
-  contextMenu: index$2["default"].bool,
-  contextMenuSublevel: index$2["default"].bool,
-  children: index$2["default"].node.isRequired
-} : {};
-var Popover$1 = Popover;
-
-exports["default"] = Popover$1;

package/cjs/components/data/Popover/Popover.styled.js

@@ -1,159 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-var polished = require('polished');
-var defaultTheme = require('../../../utils/defaultTheme.js');
-var TippyTooltip = require('@tippyjs/react');
-require('../../../node_modules/tippy.js/dist/tippy.css.js');
-require('../../../node_modules/tippy.js/animations/shift-away-subtle.css.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var TippyTooltip__default = /*#__PURE__*/_interopDefaultLegacy(TippyTooltip);
-
-let _ = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4;
-const Popover = styled__default["default"](TippyTooltip__default["default"]).attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
-  font-family: ${0};
-  font-size: 1rem;
-  font-weight: 400;
-  color: inherit;
-  border-radius: 0;
-  line-height: inherit;
-  max-height: inherit;
-
-  ${0}
-
-  ${0}
-
-  ${0}
-
-  ${0}
-
-  ${0}
-
-  ${0}
-
-  .tippy-content {
-    padding: 0;
-    max-height: inherit;
-
-    > div {
-      max-height: inherit;
-    }
-  }
-
-  .tippy-arrow {
-    ${0}
-  }
-
-  && > .tippy-arrow::before {
-    position: absolute;
-    border-color: transparent;
-    border-style: solid;
-  }
-
-  & > .tippy-arrow::after {
-    content: '';
-    position: absolute;
-    border-color: transparent;
-    border-style: solid;
-  }
-
-  &[data-placement^='top'] {
-    & > .tippy-arrow:before {
-      bottom: -16px;
-      left: -5px;
-      border-width: 15px 13px 0;
-      ${0}
-    }
-
-    & > .tippy-arrow:after {
-      bottom: -15px;
-      left: -5px;
-      border-width: 15px 13px 0;
-      border-top-color: initial;
-      transform-origin: center top;
-    }
-  }
-
-  &[data-placement^='right'] {
-    & > .tippy-arrow:before {
-      bottom: -5px;
-      left: -16px;
-      border-width: 13px 15px 13px 0;
-      ${0}
-    }
-
-    & > .tippy-arrow:after {
-      bottom: -5px;
-      left: -15px;
-      border-width: 13px 15px 13px 0;
-      border-right-color: initial;
-      transform-origin: center top;
-    }
-  }
-
-  &[data-placement^='bottom'] {
-    & > .tippy-arrow:before {
-      top: -16px;
-      left: -5px;
-      border-width: 0 13px 15px 13px;
-      ${0}
-    }
-
-    & > .tippy-arrow:after {
-      top: -14.5px;
-      left: -5px;
-      border-width: 0 13px 15px 13px;
-      border-bottom-color: initial;
-      transform-origin: center top;
-    }
-  }
-
-  &[data-placement^='left'] {
-    & > .tippy-arrow::before {
-      bottom: -5px;
-      right: -16px;
-      border-width: 13px 0 13px 15px;
-      ${0}
-    }
-
-    & > .tippy-arrow::after {
-      bottom: -5px;
-      right: -15px;
-      border-width: 13px 0 13px 15px;
-      border-left-color: initial;
-      transform-origin: center top;
-    }
-  }
-`), props => props.theme.primaryFontFamily, props => props.maxWidth && styled.css(_t2 || (_t2 = _`
-      max-width: ${0};
-    `), props.maxWidth), props => props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('white')), props => props.theme.themeProp('box-shadow', `0px 1px 6px -3px ${polished.rgba(props.theme.getColor('black'), 0.7)}`, `0 1px 6px -4px ${props.theme.getColor('black')}`), props => props.theme.themeProp('border', `1px solid ${props.theme.getColor('gray-800')}`, `1px solid ${props.theme.getColor('gray-300')}`), props => props.contextMenu && styled.css(_t3 || (_t3 = _`
-      border-radius: 4px;
-
-      ${0}
-
-      ${0}
-    `), props => props.theme.themeProp('border', 'none', 'none'), props => props.theme.themeProp('box-shadow', `none`, `0 1px 6px ${polished.rgba(props.theme.getColor('gray-900'), 0.3)}`)), props => props.contextMenuSublevel && styled.css(_t4 || (_t4 = _`
-      &[data-placement^='right-start'],
-      &[data-placement^='left-start'] {
-        margin-top: -4px;
-      }
-
-      &[data-placement^='left'] {
-        margin-right: -6px;
-      }
-
-      &[data-placement^='right'] {
-        margin-left: -6px;
-      }
-    `)), props => props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('white'), 1), props => props.theme.themeProp('border-top-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1), props => props.theme.themeProp('border-right-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1), props => props.theme.themeProp('border-bottom-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1), props => props.theme.themeProp('border-left-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-300'), 1));
-
-exports.Popover = Popover;

package/cjs/components/data/Popover/data/Popover/index.js

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Popover = require('../../Popover.js');
-
-
-
-exports["default"] = Popover["default"];

package/cjs/components/data/Tab/Tab.js

@@ -1,31 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var index$1 = require('../../../node_modules/prop-types/index.js');
-var index = require('../../../node_modules/react/index.js');
-var Tab_styled = require('./Tab.styled.js');
-
-const _excluded = ["children", "hidden"];
-const Tab = index["default"].forwardRef(function Tab(_ref, forwardedRef) {
-  let {
-      children,
-      hidden
-    } = _ref,
-    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  if (hidden) return null;
-  return index["default"].createElement(Tab_styled.Tab, _rollupPluginBabelHelpers["extends"]({
-    ref: forwardedRef
-  }, props), children);
-});
-Tab.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: index$1["default"].any,
-  hidden: index$1["default"].bool
-} : {};
-Tab.defaultProps = {
-  hidden: false
-};
-var Tab$1 = Tab;
-
-exports["default"] = Tab$1;

package/cjs/components/data/Tab/Tab.styled.js

@@ -1,22 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var styled = require('styled-components');
-var defaultTheme = require('../../../utils/defaultTheme.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-
-let _ = t => t,
-  _t;
-const Tab = styled__default["default"].p.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
-  font-family: ${0};
-  font-size: 1rem;
-  font-weight: 500;
-  border-bottom: 1px solid;
-  min-height: 35px;
-`), props => props.theme.primaryFontFamily);
-
-exports.Tab = Tab;

package/cjs/components/data/Tab/data/Tab/index.js

@@ -1,9 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var Tab = require('../../Tab.js');
-
-
-
-exports["default"] = Tab["default"];