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

package/build/CompactStarRating-9af2f427.js

@@ -1,411 +0,0 @@
-import { _ as _extends$2 } from './_rollupPluginBabelHelpers-c245b26a.js';
-import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
-import * as React from 'react';
-import React__default, { useState, useRef, useEffect, useMemo } from 'react';
-import './Alert-e6847a22.js';
-import './Badge-d93586a9.js';
-import './Popover-20050b91.js';
-import './Tab-04d435c3.js';
-import './Tabs-74d1ea8a.js';
-import { T as Tooltip } from './Tooltip-c1d1199e.js';
-import './VerificationStatusIcon-49cb1c1b.js';
-import styled, { keyframes, css } from 'styled-components';
-
-var _path$1;
-function _extends$1() { return _extends$1 = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends$1.apply(null, arguments); }
-function SvgStarFilled(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 40 38"
-  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M7.65 38l3.25-14.05L0 14.5l14.4-1.25L20 0l5.6 13.25L40 14.5l-10.9 9.45L32.35 38 20 30.55 7.65 38z"
-  })));
-}
-
-var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function SvgStar(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 40 38"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M12.2 31.8l7.8-4.7 7.9 4.8-2.1-8.9 6.9-6-9.1-.8L20 7.7l-3.5 8.4-9.1.8 6.9 6-2.1 8.9zM7.7 38L11 24 0 14.5l14.4-1.2L20 0l5.6 13.2L40 14.5 29.1 24l3.3 14L20 30.6 7.7 38z"
-  })));
-}
-
-const fadeIn = keyframes`
-  from {
-    background-color: ${props => props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)')};
-  }
-  to {
-    background-color: ${props => props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)')};
-  }
-`;
-const fadeOut = keyframes`
-  from {
-    background-color: ${props => props.theme.themeProp('rgba(48, 130, 106, 1)', 'rgba(191, 224, 213, 1)')};
-  }
-  to {
-    background-color: ${props => props.theme.themeProp('rgba(48, 130, 106, 0)', 'rgba(191, 224, 213, 0)')};
-  }
-`;
-const fadeInCheck = keyframes`
-  from {
-    opacity: 0
-  }
-  to {
-    opacity: 1
-  }
-`;
-const fadeOutCheck = keyframes`
-  from {
-    opacity: 1
-  }
-  to {
-    opacity: 0
-  }
-`;
-const CompactStarRating$1 = styled.div.attrs(applyDefaultTheme)`
-  font-family: ${props => props.theme.primaryFontFamily};
-  font-size: 1rem;
-  font-weight: 500;
-  height: 24px;
-  width: 100%;
-  display: flex;
-
-  align-items: center;
-  input[type='number'] {
-    position: absolute;
-    opacity: 0;
-    pointer-events: none;
-    margin: 0;
-  }
-
-  ${props => props.readOnly && css`
-      pointer-events: none;
-    `}
-
-  ${props => props.disabled && css`
-      opacity: 0.5;
-      cursor: not-allowed;
-    `}
-`;
-const labelWidth = styled.div.attrs(applyDefaultTheme)`
-  width: 33.33%;
-  display: flex;
-  align-items: center;
-  text-align: left;
-  font: normal normal normal 14px/16px Roboto;
-  letter-spacing: 0px;
-  padding: 0;
-  height: 19px;
-  cursor: default;
-  justify-content: space-between;
-  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700'))};
-  ${props => props.disabled && css`
-      cursor: not-allowed;
-    `}
-`;
-const SuccessContainer = styled.div.attrs(applyDefaultTheme)`
-  opacity: 1;
-  pointer-events: none;
-  display: flex;
-  opacity: ${props => props.fadeIn ? 0 : 1};
-  animation: ${props => props.fadeIn ? fadeOutCheck : fadeInCheck} 0.5s ease-in-out;
-  transition: opacity 0.5s ease-in-out;
-  margin-right: 5px;
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-500'))}
-  > svg {
-    width: 13px;
-  }
-`;
-const starsWidth = styled.div.attrs(applyDefaultTheme)`
-  display: flex;
-  width: 66.66%;
-  border-radius: 3px;
-  height: 24px;
-  align-items: center;
-  padding-left: 8px;
-  box-sizing: border-box;
-  border: 1px solid;
-
-  ${props => props.readOnly && css`
-      border: none;
-    `}
-
-  ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-900'), props.theme.getColor('white'))}
-
-  ${props => props.type === 'success' && css`
-      animation: ${props => props.success ? fadeIn : fadeOut} 0.5s ease-in-out;
-    `}
-
-  ${props => props.type === 'error' && css`
-      ${props.theme.themeProp('background', '#7F1B1B', '#FBEAE6')};
-      ${props.theme.themeProp('border-color', '#7f1b1b', '#FBEAE6')}
-    `}
-
-  ${props => props.type === 'warning' && css`
-      ${props.theme.themeProp('background', '#634E01', '#FFFDE8')};
-      ${props.theme.themeProp('border-color', '#2F2402 ', '#FFFDE8')}
-    `}
-  &&:not(:hover):not(:focus) {
-    ${props => props.edit && props.theme.themeProp('background', 'rgba(39,39,42, 0.7)', 'rgba(244,244,245, 0.3)')};
-    ${props => props.edit && props.theme.themeProp('border-color', 'rgba(39,39,42, 0.7)', 'rgba(228,228,231, 0.3)')};
-  }
-  &&:hover:not(:focus) {
-    ${props => props.edit && props.theme.themeProp('background', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'))}
-
-    ${props => props.edit && props.theme.themeProp('border-color', props.theme.getColor('gray-700'), props.theme.getColor('gray-100'))};
-
-    ${props => props.type === 'warning' && !props.readOnly && props.theme.themeProp('background', '#806403', '#FFFEBF')};
-
-    ${props => props.type === 'error' && !props.readOnly && props.theme.themeProp('background', '#901d1d', '#f7d5d0')};
-  }
-`;
-const Star = styled.button.attrs(applyDefaultTheme)`
-  display: flex;
-  align-items: center;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-
-  svg {
-    height: 12px;
-    padding-left: 4px;
-    transition: color 250ms;
-  }
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'))};
-
-  ${props => props.type === 'warning' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'))};
-
-  ${props => props.type === 'warning' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'))};
-
-  ${props => props.hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500'))};
-
-  ${props => props.readOnly && css`
-      pointer-events: none;
-    `}
-
-  ${props => props.disabled && css`
-      button {
-        cursor: not-allowed;
-      }
-      > * {
-        cursor: not-allowed;
-      }
-    `}
-`;
-const StarFill = styled.button.attrs(applyDefaultTheme)`
-  display: flex;
-  align-items: center;
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 0;
-
-  svg {
-    height: 12px;
-    padding-left: 4px;
-    transition: color 250ms;
-  }
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'))};
-
-  ${props => props.type === 'error' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'))};
-
-  ${props => props.type === 'warning' && props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black'))};
-
-  ${props => props.hover && props.theme.themeProp('color', props.theme.getColor('orange-500'), props.theme.getColor('orange-500'))};
-
-  ${props => props.readOnly && css`
-      pointer-events: none;
-    `}
-
-  ${props => props.disabled && css`
-      button {
-        cursor: not-allowed;
-      }
-      > * {
-        cursor: not-allowed;
-      }
-    `}
-`;
-styled.div.attrs(applyDefaultTheme)`
-  opacity: 1;
-  pointer-events: none;
-  margin-left: auto;
-  opacity: ${props => props.type === 'success' ? 0 : 1};
-  animation: ${props => props.type === 'success' ? fadeOutCheck : fadeInCheck} 0.5s ease-in-out;
-  transition: opacity 0.5s ease-in-out;
-  ${props => props.theme.themeProp('color', props.theme.getColor('emerald-200'), props.theme.getColor('emerald-500'))}
-  > svg {
-    width: 13px;
-  }
-`;
-
-const CompactStarRating = React__default.forwardRef(function CompactStarRating({
-  label,
-  icon,
-  iconFill,
-  max,
-  defaultValue,
-  value,
-  name,
-  viewEmpty,
-  onChange,
-  onBlur,
-  type,
-  descriptionToolTip,
-  disabled,
-  readOnly,
-  edit,
-  hidden,
-  loadingIcon,
-  successIcon,
-  ...props
-}, forwardedRef) {
-  const stars = Array.from(Array(max).keys());
-  const [rating, setRating] = useState('');
-  const [hover, setHover] = useState(false);
-  const [tempRating, setTempRating] = useState('');
-  const [initialRating, setInitialRating] = useState('');
-  const inputRef = useRef();
-  useEffect(() => {
-    setRating(value || defaultValue);
-    setInitialRating(value || defaultValue);
-  }, [value, defaultValue]);
-  useEffect(() => {
-    inputRef.current.value = String(rating);
-    if (rating === initialRating) {
-      return undefined;
-    } else {
-      setInitialRating(rating);
-      onChange({
-        target: inputRef.current
-      });
-    }
-  }, [rating]);
-  const memoizedDescriptionToolTip = useMemo(() => {
-    return descriptionToolTip;
-  }, [descriptionToolTip]);
-  const starIconRender = key => {
-    if (rating > 0 && rating >= key + 1) {
-      return React__default.createElement(StarFill, {
-        readOnly: readOnly,
-        disabled: disabled,
-        onClick: event => {
-          event.preventDefault();
-          if (key + 1 > 1) {
-            return setRating(key + 1);
-          } else if (key + 1 == 1) {
-            setRating(current => {
-              return current === 1 ? 0 : key + 1;
-            });
-          }
-        },
-        onMouseEnter: () => {
-          setTempRating(key + 1);
-          setHover(true);
-        },
-        onMouseLeave: () => {
-          setTempRating(0);
-          setHover(false);
-        },
-        hover: hover && key + 1 <= tempRating,
-        type: "button",
-        key: key
-      }, iconFill);
-    } else if (viewEmpty) {
-      return React__default.createElement(Star, {
-        readOnly: readOnly,
-        disabled: disabled,
-        onClick: event => {
-          event.preventDefault();
-          setRating(key + 1);
-        },
-        onMouseEnter: () => {
-          setTempRating(key + 1);
-          setHover(true);
-        },
-        onMouseLeave: () => {
-          setTempRating(0);
-          setHover(false);
-        },
-        hover: hover && key + 1 <= tempRating,
-        type: "button",
-        key: key
-      }, icon);
-    }
-  };
-  const input = () => {
-    return React__default.createElement(CompactStarRating$1, _extends$2({
-      ref: forwardedRef,
-      readOnly: readOnly,
-      disabled: disabled,
-      onChange: onChange,
-      onBlur: onBlur
-    }, props), React__default.createElement(labelWidth, {
-      disabled: disabled
-    }, label, React__default.createElement(SuccessContainer, null, type === 'loading' && loadingIcon, type === 'success' && successIcon)), React__default.createElement(starsWidth, {
-      edit: edit,
-      type: type,
-      readOnly: readOnly
-    }, stars.map(key => {
-      return React__default.createElement("div", {
-        key: key
-      }, React__default.createElement("input", {
-        type: "number",
-        name: name,
-        ref: inputRef
-      }), starIconRender(key));
-    })));
-  };
-  if (hidden) return null;
-  return React__default.createElement(React__default.Fragment, null, !memoizedDescriptionToolTip && input(), memoizedDescriptionToolTip && React__default.createElement("div", null, React__default.createElement(Tooltip, {
-    content: memoizedDescriptionToolTip,
-    key: "tooltipTextArea1",
-    placement: "bottom-end",
-    trigger: 'mouseenter',
-    zIndex: 999999
-  }, input())));
-});
-CompactStarRating.propTypes = process.env.NODE_ENV !== "production" ? {
-  readOnly: PropTypes.bool,
-  disabled: PropTypes.bool,
-  edit: PropTypes.bool,
-  value: PropTypes.number,
-  type: PropTypes.oneOf(['', 'error', 'warning', 'loading', 'success']),
-  defaultValue: PropTypes.number,
-  label: PropTypes.string,
-  name: PropTypes.string,
-  icon: PropTypes.element,
-  iconFill: PropTypes.element,
-  max: PropTypes.number,
-  viewEmpty: PropTypes.bool,
-  onChange: PropTypes.func,
-  onBlur: PropTypes.func,
-  hidden: PropTypes.bool,
-  loadingIcon: PropTypes.element,
-  successIcon: PropTypes.element,
-  descriptionToolTip: PropTypes.string
-} : {};
-CompactStarRating.defaultProps = {
-  label: 'Rating',
-  max: 5,
-  value: 0,
-  defaultValue: 0,
-  viewEmpty: true,
-  icon: React__default.createElement(SvgStar, null),
-  iconFill: React__default.createElement(SvgStarFilled, null),
-  hidden: false,
-  type: '',
-  descriptionToolTip: '',
-  displayDescriptionToolTip: false,
-  onChange: () => {}
-};
-
-export { CompactStarRating as C };

package/build/ContextMenuItem-ea411141.js

@@ -1,127 +0,0 @@
-import { _ as _extends$1 } from './_rollupPluginBabelHelpers-c245b26a.js';
-import * as React from 'react';
-import React__default from 'react';
-import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
-import styled, { css } from 'styled-components';
-
-var _path;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function SvgTriangleRight(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 10 20"
-  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
-    fill: "currentColor",
-    d: "M0 20V0l10 10L0 20z"
-  })));
-}
-
-const ContextMenuItem$1 = styled.span.attrs(applyDefaultTheme)`
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  font-family: ${props => props.theme.primaryFontFamily};
-  font-size: 0.875rem;
-  font-weight: normal;
-  height: 31px;
-  min-width: 160px;
-  padding: ${props => props.opensSublevel ? '0 8px' : '0 28px 0 8px'};
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))}
-
-  ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-700'), '#FEFEFE')}
-
-  ${props => !props.icon && css`
-      padding-left: 28px;
-    `}
-
-  :not(:last-of-type) {
-    border-bottom: 1px solid;
-
-    ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200'))}
-  }
-
-  :last-of-type {
-    height: 32px;
-  }
-
-  &:hover {
-    cursor: pointer;
-
-    ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200'))}
-  }
-
-  ${props => props.hoverColors && props.hoverColors[0] && props.hoverColors[1] && css`
-      &&:hover {
-        ${props => props.theme.themeProp('color', props.hoverColors[0], props.hoverColors[1])}
-      }
-    `}
-
-  ${props => props.hoverBackgroundColors && props.hoverBackgroundColors[0] && props.hoverBackgroundColors[1] && css`
-      &&:hover {
-        ${props => props.theme.themeProp('background-color', props.hoverBackgroundColors[0], props.hoverBackgroundColors[1])}
-      }
-    `}
-`;
-const IconContainer = styled.span.attrs(applyDefaultTheme)`
-  align-items: center;
-  display: flex;
-  height: fit-content;
-  max-width: 12px;
-  margin-right: 8px;
-
-  svg {
-    height: 12px;
-  }
-`;
-const SublevelIconContainer = styled.span.attrs(applyDefaultTheme)`
-  align-items: center;
-  display: flex;
-  height: fit-content;
-  max-width: 12px;
-  margin-left: auto;
-  margin-right: 8px;
-  padding-left: 24px;
-
-  svg {
-    height: 12px;
-  }
-`;
-
-const ContextMenuItem = React__default.forwardRef(function ContextMenuItem({
-  title,
-  icon,
-  onClickEffect,
-  opensSublevel,
-  hoverColors,
-  hoverBackgroundColors,
-  ...props
-}, forwardedRef) {
-  return React__default.createElement(ContextMenuItem$1, _extends$1({
-    ref: forwardedRef,
-    icon: icon,
-    onClick: onClickEffect,
-    hoverColors: hoverColors,
-    hoverBackgroundColors: hoverBackgroundColors,
-    opensSublevel: opensSublevel,
-    className: opensSublevel ? 'context-menu-item opens-sublevel' : 'context-menu-item'
-  }, props, {
-    role: "menuitem"
-  }), icon && React__default.createElement(IconContainer, null, icon), React__default.createElement("span", null, title), opensSublevel && React__default.createElement(SublevelIconContainer, null, React__default.createElement(SvgTriangleRight, null)));
-});
-ContextMenuItem.propTypes = process.env.NODE_ENV !== "production" ? {
-  title: PropTypes.string.isRequired,
-  icon: PropTypes.element,
-  onClickEffect: PropTypes.func,
-  opensSublevel: PropTypes.bool,
-  hoverColors: PropTypes.arrayOf(PropTypes.string),
-  hoverBackgroundColors: PropTypes.arrayOf(PropTypes.string)
-} : {};
-ContextMenuItem.defaultProps = {
-  icon: undefined,
-  hoverColors: undefined,
-  hoverBackgroundColors: undefined,
-  opensSublevel: false
-};
-
-export { ContextMenuItem as C };