@ntbjs/react-components 2.0.0-rc.13 → 2.0.0-rc.26

package/cjs/components/inputs/Button/Button.js

@@ -1,195 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
-var index = require('../../../node_modules/react/index.js');
-var index$2 = require('../../../node_modules/prop-types/index.js');
-var Button_styled = require('./Button.styled.js');
-var expandMore = require('../../../icons/expand-more.svg.js');
-var index$1 = require('../../../_virtual/index.js');
-var Popover = require('../../data/Popover/Popover.js');
-var ContextMenu = require('../../widgets/ContextMenu/ContextMenu.js');
-
-const _excluded = ["onClickEffect", "singleAction", "activeDropdown", "dropdownItems", "secondary", "outlined", "block", "icon", "size", "disabled", "loading", "className", "children", "singleActionGap", "width", "border"];
-const Button = index["default"].forwardRef(function Button(_ref, forwardedRef) {
-  let {
-      onClickEffect,
-      singleAction = false,
-      activeDropdown = false,
-      dropdownItems,
-      secondary,
-      outlined,
-      block = false,
-      icon,
-      size = 'normal',
-      disabled,
-      loading,
-      className,
-      children,
-      singleActionGap = 34,
-      width,
-      border = 2
-    } = _ref,
-    props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  const [loadingState, setLoadingState] = index$1.react.exports.useState(loading || false);
-  const [loadingStep, setLoadingStep] = index$1.react.exports.useState(113);
-  const loadingInterval = index$1.react.exports.useRef(0);
-  const [dropdownIsActive, setDropdownIsActive] = index$1.react.exports.useState(false);
-  const enableLoading = () => {
-    loadingInterval.current = setInterval(() => {
-      setLoadingStep(currentLoadingStep => {
-        const newLoadingStep = Math.round(currentLoadingStep - 15 * currentLoadingStep / 100);
-        if (newLoadingStep === currentLoadingStep) {
-          clearInterval(loadingInterval.current);
-        }
-        return newLoadingStep;
-      });
-    }, 300);
-    setLoadingState(true);
-  };
-  const disableLoading = () => {
-    clearInterval(loadingInterval.current);
-    setLoadingStep(0);
-    setTimeout(() => {
-      setLoadingState(false);
-      setLoadingStep(113);
-    }, 500);
-  };
-  index$1.react.exports.useEffect(() => {
-    if (loading) {
-      enableLoading();
-    } else {
-      disableLoading();
-    }
-    return () => clearInterval(loadingInterval.current);
-  }, [loading]);
-  const handleDropdownButtonClick = () => {
-    setDropdownIsActive(true);
-  };
-  const handleDropdownClose = () => {
-    setDropdownIsActive(false);
-  };
-  return index["default"].createElement(Button_styled.ButtonWrapper, null, !singleAction ? index["default"].createElement(Button_styled.MainButtonWrapper, {
-    $activeDropdown: activeDropdown,
-    $dropdownItems: dropdownItems,
-    $outlined: outlined,
-    $secondary: secondary,
-    $block: block
-  }, index["default"].createElement(Button_styled.MainButtonContainer, {
-    $dropdownItems: dropdownItems,
-    $secondary: secondary,
-    $outlined: outlined,
-    $block: block
-  }, index["default"].createElement(Button_styled.Button, _rollupPluginBabelHelpers["extends"]({
-    ref: forwardedRef,
-    onClick: onClickEffect,
-    $border: border,
-    $singleaction: singleAction,
-    $dropdownItems: dropdownItems,
-    $secondary: secondary,
-    $outlined: outlined,
-    $block: block,
-    size: size,
-    disabled: disabled,
-    className: className,
-    "aria-busy": disabled,
-    $width: width
-  }, props), index["default"].createElement(Button_styled.ButtonContent, {
-    $loading: loadingState,
-    size: size
-  }, icon, children), index["default"].createElement(Button_styled.LoadingIndicator, {
-    $loading: loadingState,
-    style: {
-      opacity: loadingState ? 1 : 0
-    }
-  }, index["default"].createElement(Button_styled.LoadingIndicatorSvg, {
-    viewBox: "22 22 44 44"
-  }, index["default"].createElement(Button_styled.LoadingIndicatorSvgCircle, {
-    cx: "44",
-    cy: "44",
-    r: "18",
-    fill: "none",
-    strokeWidth: "4",
-    stroke: "currentColor",
-    style: {
-      strokeDashoffset: `${loadingStep}px`
-    }
-  }))))), (activeDropdown || dropdownItems) && index["default"].createElement(Button_styled.DropdownButtonContainer, {
-    $dropdownItems: dropdownItems,
-    $secondary: secondary,
-    $outlined: outlined
-  }, index["default"].createElement(Popover["default"], {
-    content: index["default"].createElement(ContextMenu["default"], null, dropdownItems),
-    placement: 'bottom-end',
-    arrow: false,
-    contextMenu: true,
-    onHide: handleDropdownClose
-  }, index["default"].createElement(Button_styled.Button, {
-    ref: forwardedRef,
-    $singleaction: singleAction,
-    $singleactiongap: singleActionGap,
-    $dropdownItems: dropdownItems,
-    $secondary: secondary,
-    $outlined: outlined,
-    $border: border,
-    $block: block,
-    size: size,
-    disabled: disabled,
-    onClick: handleDropdownButtonClick,
-    className: dropdownIsActive ? 'dropdown-is-active' : '',
-    $width: width
-  }, index["default"].createElement(expandMore.ReactComponent, null))))) : index["default"].createElement(index["default"].Fragment, null, index["default"].createElement(Button_styled.MainButtonContainerSingle, {
-    $dropdownItems: dropdownItems,
-    $secondary: secondary,
-    $outlined: outlined,
-    className: className
-  }, index["default"].createElement(Button_styled.DropdownButtonContainer, {
-    $singleaction: singleAction
-  }, index["default"].createElement(Popover["default"], {
-    content: index["default"].createElement(ContextMenu["default"], null, dropdownItems),
-    placement: 'bottom-end',
-    arrow: false,
-    contextMenu: true,
-    onHide: handleDropdownClose
-  }, index["default"].createElement(Button_styled.Button, {
-    ref: forwardedRef,
-    $singleaction: singleAction,
-    $singleactiongap: singleActionGap,
-    $dropdownItems: dropdownItems,
-    $secondary: secondary,
-    $outlined: outlined,
-    $border: border,
-    $block: block,
-    size: size,
-    disabled: disabled,
-    onClick: handleDropdownButtonClick,
-    className: dropdownIsActive ? 'dropdown-is-active' : '',
-    $width: width
-  }, index["default"].createElement(Button_styled.ButtonContent, {
-    $loading: loadingState,
-    size: size,
-    $singleaction: singleAction
-  }, icon, children), index["default"].createElement(expandMore.ReactComponent, null)))))));
-});
-Button.propTypes = process.env.NODE_ENV !== "production" ? {
-  onClickEffect: index$2["default"].func,
-  singleAction: index$2["default"].bool,
-  activeDropdown: index$2["default"].bool,
-  dropdownItems: index$2["default"].node,
-  secondary: index$2["default"].bool,
-  outlined: index$2["default"].bool,
-  border: index$2["default"].number,
-  block: index$2["default"].bool,
-  icon: index$2["default"].element,
-  size: index$2["default"].oneOf(['x-small', 'small', 'normal', 'large']),
-  disabled: index$2["default"].bool,
-  loading: index$2["default"].bool,
-  className: index$2["default"].string,
-  children: index$2["default"].any.isRequired,
-  singleActionGap: index$2["default"].number,
-  width: index$2["default"].number
-} : {};
-var Button$1 = Button;
-
-exports["default"] = Button$1;

package/cjs/components/inputs/Button/Button.styled.js

@@ -1,340 +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,
-  _t9,
-  _t0,
-  _t1,
-  _t10,
-  _t11,
-  _t12,
-  _t13,
-  _t14,
-  _t15,
-  _t16,
-  _t17,
-  _t18,
-  _t19,
-  _t20,
-  _t21,
-  _t22,
-  _t23,
-  _t24,
-  _t25,
-  _t26,
-  _t27,
-  _t28,
-  _t29,
-  _t30,
-  _t31,
-  _t32;
-const shouldForwardProp = prop => {
-  return prop !== 'theme' && !prop.startsWith('$');
-};
-const Button = styled__default["default"].button.withConfig({
-  shouldForwardProp
-}).attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
-  position: relative;
-  border-radius: 3px;
-  font-family: inherit;
-  font-size: 0.875rem;
-  font-weight: 400;
-  padding: 12px 16px;
-  cursor: pointer;
-  background: ${0};
-  border: ${0}px solid ${0};
-  transition:
-    all 250ms,
-    opacity 200ms;
-
-  &:hover,
-  &.dropdown-is-active {
-    background: #296c58;
-    border-color: #296c58;
-  }
-
-  ${0}
-
-  && {
-    ${0};
-  }
-
-  && {
-    ${0};
-  }
-
-  && {
-    ${0};
-  }
-
-  && {
-    ${0};
-  }
-
-  ${0};
-
-  ${0};
-
-  ${0};
-
-  ${0};
-
-  ${0};
-
-  ${0};
-
-  ${0};
-`), props => props.theme.getColor('emerald-500'), props => props.$border, props => props.theme.getColor('emerald-500'), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('white')), props => props.$secondary && styled.css(_t2 || (_t2 = _`
-        background: ${0};
-        border-color: ${0};
-
-        ${0}
-
-        &:hover,
-        &.dropdown-is-active {
-          background: ${0};
-          border-color: ${0};
-        }
-      `), props => props.theme.getColor('gray-200'), props => props.theme.getColor('gray-200'), props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('gray-700')), props => props.theme.getColor('gray-300'), props => props.theme.getColor('gray-300')), props => props.$outlined && styled.css(_t3 || (_t3 = _`
-        background: transparent;
-        transition: none;
-
-        ${0}
-
-        ${0}
-
-        &:hover,
-        &.dropdown-is-active {
-          background-color: #296c58;
-
-          ${0}
-
-          ${0}
-        }
-      `), props.theme.themeProp('border-color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-500')), props.theme.themeProp('color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-500')), props.theme.themeProp('border-color', props.theme.getColor('emerald-600'), props.theme.getColor('emerald-600')), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-200'))), props => props.$outlined && props.$secondary && styled.css(_t4 || (_t4 = _`
-        ${0}
-
-        ${0}
-
-        &:hover,
-        &.dropdown-is-active {
-          background: ${0};
-
-          ${0}
-
-          ${0}
-        }
-      `), props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700')), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')), props.theme.getColor('gray-300'), props.theme.themeProp('border-color', props.theme.getColor('gray-300'), props.theme.getColor('gray-300')), props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('gray-700'))), props => props.$outlined && props.$secondary && props.$dropdownItems && styled.css(_t5 || (_t5 = _`
-        &:hover,
-        &.dropdown-is-active {
-          ${0}
-        }
-      `), props.theme.themeProp('border-color', props.theme.getColor('gray-300'), props.theme.getColor('gray-300'))), props => props.$block && styled.css(_t6 || (_t6 = _`
-      width: 100%;
-    `)), props => props.disabled && styled.css(_t7 || (_t7 = _`
-      opacity: 0.5;
-      cursor: not-allowed;
-      pointer-events: none;
-    `)), props => props.size === 'x-small' && styled.css(_t8 || (_t8 = _`
-      padding: 1px 16px;
-      height: 24px;
-    `)), props => props.size === 'small' && styled.css(_t9 || (_t9 = _`
-      padding: 6px 16px;
-    `)), props => props.size === 'large' && styled.css(_t0 || (_t0 = _`
-      padding: 16px 16px;
-    `)), props => props.$singleaction && styled.css(_t1 || (_t1 = _`
-      display: flex;
-      align-items: center;
-      gap: ${0}px;
-      border-radius: 3px !important;
-      transition:
-        all 250ms,
-        opacity 200ms;
-    `), props.$singleactiongap), props => props.$width && styled.css(_t10 || (_t10 = _`
-      min-width: ${0}px;
-      justify-content: center;
-    `), props.$width));
-const ButtonContent = styled__default["default"].div.withConfig({
-  shouldForwardProp
-}).attrs(defaultTheme.applyDefaultTheme)(_t11 || (_t11 = _`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  transform: scale(1);
-  opacity: 1;
-  transition: all 200ms;
-
-  > svg {
-    width: 100%;
-    max-width: 16px;
-    max-height: 16px;
-    margin-right: 8px;
-
-    ${0};
-
-    ${0};
-  }
-
-  ${0}
-
-  ${0};
-`), props => props.size === 'small' && styled.css(_t12 || (_t12 = _`
-        max-width: 13px;
-        max-height: 13px;
-      `)), props => props.size === 'x-small' && styled.css(_t13 || (_t13 = _`
-        max-width: 11px;
-        max-height: 11px;
-      `)), props => props.$loading && styled.css(_t14 || (_t14 = _`
-      transform: scale(0.95);
-      opacity: 0;
-    `)), props => props.$singleaction && styled.css(_t15 || (_t15 = _`
-      svg {
-        width: 100% !important;
-        height: 100% !important;
-        margin-right: 24px;
-      }
-    `)));
-const LoadingIndicator = styled__default["default"].div.withConfig({
-  shouldForwardProp
-}).attrs(defaultTheme.applyDefaultTheme)(_t16 || (_t16 = _`
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  top: 0;
-  left: 0;
-  padding: 4px;
-  background: inherit;
-  opacity: 0;
-  transition: opacity 200ms;
-  box-sizing: border-box;
-
-  ${0}
-`), props => props.$loading && styled.css(_t17 || (_t17 = _`
-      opacity: 1;
-    `)));
-const LoadingIndicatorSvg = styled__default["default"].svg.withConfig({
-  shouldForwardProp
-}).attrs(defaultTheme.applyDefaultTheme)(_t18 || (_t18 = _`
-  height: 100%;
-  color: inherit;
-  transform: rotate(-88deg);
-`));
-const LoadingIndicatorSvgCircle = styled__default["default"].circle.withConfig({
-  shouldForwardProp
-}).attrs(defaultTheme.applyDefaultTheme)(_t19 || (_t19 = _`
-  transition: stroke-dashoffset 300ms linear;
-  stroke-dasharray: 113;
-`));
-const ButtonWrapper = styled__default["default"].span.withConfig({
-  shouldForwardProp
-}).attrs(defaultTheme.applyDefaultTheme)(_t20 || (_t20 = _`
-  white-space: nowrap;
-  display: flex;
-  ${0}
-`), props => props.$block && styled.css(_t21 || (_t21 = _`
-      width: 100%;
-    `)));
-const MainButtonWrapper = styled__default["default"].div.withConfig({
-  shouldForwardProp
-}).attrs(defaultTheme.applyDefaultTheme)(_t22 || (_t22 = _`
-  border-radius: 3px;
-  ${0}
-
-  ${0};
-`), props => props.$block && styled.css(_t23 || (_t23 = _`
-      width: 100%;
-      display: flex;
-    `)), props => {
-  return (props.$activeDropdown || props.$dropdownItems) && !props.$outlined && styled.css(_t24 || (_t24 = _`
-        background: ${0};
-      `), props.$secondary ? props.theme.getColor('gray-200') : props.theme.getColor('emerald-500'));
-});
-const MainButtonContainer = styled__default["default"].div.withConfig({
-  shouldForwardProp
-}).attrs(defaultTheme.applyDefaultTheme)(_t25 || (_t25 = _`
-  display: inline-block;
-
-  ${0}
-
-  button {
-    ${0};
-
-    ${0};
-  }
-`), props => props.$block && styled.css(_t26 || (_t26 = _`
-      flex: 1;
-      width: 100%;
-    `)), props => (props.$activeDropdown || props.$dropdownItems) && styled.css(_t27 || (_t27 = _`
-        border-bottom-right-radius: 0;
-        border-top-right-radius: 0;
-      `)), props => (props.$activeDropdown || props.$dropdownItems) && props.outlined && styled.css(_t28 || (_t28 = _`
-        border-right: none;
-      `)));
-const MainButtonContainerSingle = styled__default["default"].div.withConfig({
-  shouldForwardProp
-}).attrs(defaultTheme.applyDefaultTheme)(_t29 || (_t29 = _`
-  display: inline-block;
-  width: 100%;
-  ${0};
-
-  button {
-    ${0};
-  }
-`), props => props.$singleaction && styled.css(_t30 || (_t30 = _`
-      display: flex;
-      align-items: center;
-      border-radius: 3px !important;
-      transition:
-        all 250ms,
-        opacity 200ms;
-    `)), props => (props.$activeDropdown || props.$dropdownItems) && styled.css(_t31 || (_t31 = _`
-        border-bottom-right-radius: 0;
-        border-top-right-radius: 0;
-      `)));
-const DropdownButtonContainer = styled__default["default"].div.withConfig({
-  shouldForwardProp
-}).attrs(defaultTheme.applyDefaultTheme)(_t32 || (_t32 = _`
-  display: inline-block;
-
-  button {
-    border-bottom-left-radius: 0;
-    border-top-left-radius: 0;
-
-    ${0};
-  }
-
-  svg {
-    color: inherit;
-    height: 7px;
-    width: 12px;
-
-    ${0};
-  }
-`), props => !props.$singleaction && 'border-left: none', props => !props.$singleaction && 'margin-bottom: 1px');
-
-exports.Button = Button;
-exports.ButtonContent = ButtonContent;
-exports.ButtonWrapper = ButtonWrapper;
-exports.DropdownButtonContainer = DropdownButtonContainer;
-exports.LoadingIndicator = LoadingIndicator;
-exports.LoadingIndicatorSvg = LoadingIndicatorSvg;
-exports.LoadingIndicatorSvgCircle = LoadingIndicatorSvgCircle;
-exports.MainButtonContainer = MainButtonContainer;
-exports.MainButtonContainerSingle = MainButtonContainerSingle;
-exports.MainButtonWrapper = MainButtonWrapper;

package/cjs/components/inputs/Button/inputs/Button/index.js

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

package/cjs/components/inputs/Checkbox/Checkbox.js

@@ -1,102 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var index = require('../../../node_modules/react/index.js');
-var nanoid = require('nanoid');
-var index$2 = require('../../../node_modules/prop-types/index.js');
-var lodash = require('lodash');
-var Checkbox_styled = require('./Checkbox.styled.js');
-var index$1 = require('../../../_virtual/index.js');
-
-const Checkbox = index["default"].forwardRef(function Checkbox({
-  checked,
-  defaultChecked,
-  disabled,
-  readOnly,
-  name,
-  value,
-  description,
-  error,
-  indeterminate,
-  muted,
-  label,
-  onChange,
-  onBlur,
-  className,
-  style
-}, forwardedRef) {
-  const [uniqueId] = index$1.react.exports.useState(nanoid.nanoid());
-  const hasError = index$1.react.exports.useMemo(() => {
-    if (lodash.isBoolean(error)) {
-      return error;
-    }
-    return !lodash.isEmpty(error);
-  }, [error]);
-  const descriptionText = index$1.react.exports.useMemo(() => {
-    if (!lodash.isEmpty(error)) {
-      return error;
-    }
-    if (!lodash.isEmpty(description)) {
-      return description;
-    }
-    return null;
-  }, [description, error]);
-  return index["default"].createElement(Checkbox_styled.Checkbox, {
-    className: className,
-    disabled: disabled,
-    readOnly: readOnly,
-    style: style
-  }, index["default"].createElement(Checkbox_styled.CheckboxLabel, {
-    disabled: disabled,
-    muted: muted,
-    readOnly: readOnly,
-    htmlFor: uniqueId
-  }, index["default"].createElement("input", {
-    ref: forwardedRef,
-    id: uniqueId,
-    checked: checked,
-    defaultChecked: defaultChecked,
-    disabled: disabled,
-    readOnly: readOnly,
-    value: value,
-    name: name,
-    type: "checkbox",
-    onChange: onChange,
-    onBlur: onBlur,
-    "data-indeterminate": indeterminate
-  }), index["default"].createElement(Checkbox_styled.IndeterminateCheckIcon, null), index["default"].createElement(Checkbox_styled.CheckIcon, null, index["default"].createElement("svg", {
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 10.9 8.45"
-  }, index["default"].createElement("path", {
-    d: "m3.68,8.45L0,4.75l1.21-1.21,2.47,2.45L9.7,0l1.21,1.23-7.22,7.22Z",
-    fill: "currentColor"
-  }))), (typeof label === 'string' && label.length > 0 || typeof label === 'object') && index["default"].createElement(Checkbox_styled.CheckboxVisualLabel, null, label)), typeof descriptionText === 'string' && descriptionText.length > 0 && index["default"].createElement(Checkbox_styled.Description, {
-    $error: hasError
-  }, descriptionText));
-});
-Checkbox.propTypes = process.env.NODE_ENV !== "production" ? {
-  checked: index$2["default"].bool,
-  defaultChecked: index$2["default"].bool,
-  label: index$2["default"].oneOfType([index$2["default"].string, index$2["default"].element]),
-  disabled: index$2["default"].bool,
-  readOnly: index$2["default"].bool,
-  name: index$2["default"].string,
-  value: index$2["default"].string,
-  description: index$2["default"].string,
-  error: index$2["default"].oneOfType([index$2["default"].bool, index$2["default"].string]),
-  indeterminate: index$2["default"].bool,
-  muted: index$2["default"].bool,
-  onChange: index$2["default"].func,
-  onBlur: index$2["default"].func,
-  className: index$2["default"].string,
-  style: index$2["default"].object
-} : {};
-Checkbox.defaultProps = {
-  disabled: false,
-  readOnly: false,
-  indeterminate: false
-};
-var Checkbox$1 = Checkbox;
-
-exports["default"] = Checkbox$1;