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

package/build/Button-2e26f5da.js

@@ -0,0 +1,449 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
+var React = require('react');
+var defaultTheme = require('./defaultTheme-d9a7342e.js');
+var styled = require('styled-components');
+var Popover = require('./Popover-c4be47ea.js');
+var ContextMenu = require('./ContextMenu-82f9d728.js');
+var expandMore = require('./expand-more-d74e2bd2.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const Button$1 = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)`
+  position: relative;
+  border-radius: 3px;
+  font-family: inherit;
+  font-size: 0.875rem;
+  font-weight: 400;
+  padding: 12px 16px;
+  cursor: pointer;
+  background: ${props => props.theme.getColor('emerald-500')};
+  border: ${props => props.border}px solid ${props => props.theme.getColor('emerald-500')};
+  transition: all 250ms, opacity 200ms;
+
+  &:hover,
+  &.dropdown-is-active {
+    background: #296c58;
+    border-color: #296c58;
+  }
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('white'))}
+
+  && {
+    ${props => props.secondary && styled.css`
+        background: ${props => props.theme.getColor('gray-200')};
+        border-color: ${props => props.theme.getColor('gray-200')};
+
+        ${props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('gray-700'))}
+
+        &:hover,
+        &.dropdown-is-active {
+          background: ${props => props.theme.getColor('gray-300')};
+          border-color: ${props => props.theme.getColor('gray-300')};
+        }
+      `};
+  }
+
+  && {
+    ${props => props.outlined && styled.css`
+        background: transparent;
+        transition: none;
+
+        ${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'))}
+
+        &:hover,
+        &.dropdown-is-active {
+          background-color: #296c58;
+
+          ${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`
+        ${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'))}
+
+        &:hover,
+        &.dropdown-is-active {
+          background: ${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`
+        &:hover,
+        &.dropdown-is-active {
+          ${props.theme.themeProp('border-color', props.theme.getColor('gray-300'), props.theme.getColor('gray-300'))}
+        }
+      `};
+  }
+
+  ${props => props.block && styled.css`
+      width: 100%;
+    `};
+
+  ${props => props.disabled && styled.css`
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    `};
+
+  ${props => props.size === 'x-small' && styled.css`
+      padding: 1px 16px;
+      height: 24px;
+    `};
+
+  ${props => props.size === 'small' && styled.css`
+      padding: 6px 16px;
+    `};
+
+  ${props => props.size === 'large' && styled.css`
+      padding: 16px 16px;
+    `};
+
+  ${props => props.singleAction && styled.css`
+      display: flex;
+      align-items: center;
+      gap: ${props.singleActionGap}px;
+      border-radius: 3px !important;
+      transition: all 250ms, opacity 200ms;
+    `};
+
+  ${props => props.width && styled.css`
+      min-width: ${props.width}px;
+      justify-content: center;
+    `};
+`;
+const ButtonContent = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  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;
+
+    ${props => props.size === 'small' && styled.css`
+        max-width: 13px;
+        max-height: 13px;
+      `};
+
+    ${props => props.size === 'x-small' && styled.css`
+        max-width: 11px;
+        max-height: 11px;
+      `};
+  }
+
+  ${props => props.$loading && styled.css`
+      transform: scale(0.95);
+      opacity: 0;
+    `}
+
+  ${props => props.singleAction && styled.css`
+      svg {
+        width: 100% !important;
+        height: 100% !important;
+        margin-right: 24px;
+      }
+    `};
+`;
+const LoadingIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  padding: 4px;
+  background: inherit;
+  opacity: 0;
+  transition: opacity 200ms;
+  box-sizing: border-box;
+
+  ${props => props.$loading && styled.css`
+      opacity: 1;
+    `}
+`;
+const LoadingIndicatorSvg = styled__default["default"].svg.attrs(defaultTheme.applyDefaultTheme)`
+  height: 100%;
+  color: inherit;
+  transform: rotate(-88deg);
+`;
+const LoadingIndicatorSvgCircle = styled__default["default"].circle.attrs(defaultTheme.applyDefaultTheme)`
+  transition: stroke-dashoffset 300ms linear;
+  stroke-dasharray: 113;
+`;
+const ButtonWrapper = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)`
+  white-space: nowrap;
+  display: flex;
+  ${props => props.block && styled.css`
+      width: 100%;
+    `}
+`;
+const MainButtonWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  border-radius: 3px;
+  ${props => props.block && styled.css`
+      width: 100%;
+      display: flex;
+    `}
+
+  ${props => {
+  return (props.activeDropdown || props.dropdownItems) && !props.outlined && styled.css`
+        background: ${props.secondary ? props.theme.getColor('gray-200') : props.theme.getColor('emerald-500')};
+      `;
+}};
+`;
+const MainButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  display: inline-block;
+
+  ${props => props.block && styled.css`
+      flex: 1;
+      width: 100%;
+    `}
+
+  button {
+    ${props => (props.activeDropdown || props.dropdownItems) && styled.css`
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+      `};
+
+    ${props => (props.activeDropdown || props.dropdownItems) && props.outlined && styled.css`
+        border-right: none;
+      `};
+  }
+`;
+const MainButtonContainerSingle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  display: inline-block;
+  width: 100%;
+  ${props => props.singleAction && styled.css`
+      display: flex;
+      align-items: center;
+      border-radius: 3px !important;
+      transition: all 250ms, opacity 200ms;
+    `};
+
+  button {
+    ${props => (props.activeDropdown || props.dropdownItems) && styled.css`
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+      `};
+  }
+`;
+const DropdownButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  display: inline-block;
+
+  button {
+    border-bottom-left-radius: 0;
+    border-top-left-radius: 0;
+
+    ${props => !props.singleAction && 'border-left: none'};
+  }
+
+  svg {
+    color: inherit;
+    height: 7px;
+    width: 12px;
+
+    ${props => !props.singleAction && 'margin-bottom: 1px'};
+  }
+`;
+
+const Button = React__default["default"].forwardRef(function Button({
+  onClickEffect,
+  singleAction = false,
+  activeDropdown = false,
+  dropdownItems,
+  secondary,
+  outlined,
+  block = false,
+  icon,
+  size = 'normal',
+  disabled,
+  loading,
+  className,
+  children,
+  singleActionGap = 34,
+  width,
+  border = 2,
+  ...props
+}, forwardedRef) {
+  const [loadingState, setLoadingState] = React.useState(loading || false);
+  const [loadingStep, setLoadingStep] = React.useState(113);
+  const loadingInterval = React.useRef(0);
+  const [dropdownIsActive, setDropdownIsActive] = React.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);
+  };
+  React.useEffect(() => {
+    if (loading) {
+      enableLoading();
+    } else {
+      disableLoading();
+    }
+    return () => clearInterval(loadingInterval.current);
+  }, [loading]);
+  const handleDropdownButtonClick = () => {
+    setDropdownIsActive(true);
+  };
+  const handleDropdownClose = () => {
+    setDropdownIsActive(false);
+  };
+  return React__default["default"].createElement(ButtonWrapper, null, !singleAction ? React__default["default"].createElement(MainButtonWrapper, {
+    activeDropdown: activeDropdown,
+    dropdownItems: dropdownItems,
+    outlined: outlined,
+    secondary: secondary,
+    block: block
+  }, React__default["default"].createElement(MainButtonContainer, {
+    dropdownItems: dropdownItems,
+    secondary: secondary,
+    outlined: outlined,
+    block: block
+  }, React__default["default"].createElement(Button$1, _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), React__default["default"].createElement(ButtonContent, {
+    $loading: loadingState,
+    size: size
+  }, icon, children), React__default["default"].createElement(LoadingIndicator, {
+    $loading: loadingState,
+    style: {
+      opacity: loadingState ? 1 : 0
+    }
+  }, React__default["default"].createElement(LoadingIndicatorSvg, {
+    viewBox: "22 22 44 44"
+  }, React__default["default"].createElement(LoadingIndicatorSvgCircle, {
+    cx: "44",
+    cy: "44",
+    r: "18",
+    fill: "none",
+    strokeWidth: "4",
+    stroke: "currentColor",
+    style: {
+      strokeDashoffset: `${loadingStep}px`
+    }
+  }))))), (activeDropdown || dropdownItems) && React__default["default"].createElement(DropdownButtonContainer, {
+    dropdownItems: dropdownItems,
+    secondary: secondary,
+    outlined: outlined
+  }, React__default["default"].createElement(Popover.Popover, {
+    content: React__default["default"].createElement(ContextMenu.ContextMenu, null, dropdownItems),
+    placement: 'bottom-end',
+    arrow: false,
+    contextMenu: true,
+    onHide: handleDropdownClose
+  }, React__default["default"].createElement(Button$1, {
+    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
+  }, React__default["default"].createElement(expandMore.SvgExpandMore, null))))) : React__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement(MainButtonContainerSingle, {
+    dropdownItems: dropdownItems,
+    secondary: secondary,
+    outlined: outlined,
+    className: className
+  }, React__default["default"].createElement(DropdownButtonContainer, {
+    singleAction: singleAction
+  }, React__default["default"].createElement(Popover.Popover, {
+    content: React__default["default"].createElement(ContextMenu.ContextMenu, null, dropdownItems),
+    placement: 'bottom-end',
+    arrow: false,
+    contextMenu: true,
+    onHide: handleDropdownClose
+  }, React__default["default"].createElement(Button$1, {
+    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
+  }, React__default["default"].createElement(ButtonContent, {
+    $loading: loadingState,
+    size: size,
+    singleAction: singleAction
+  }, icon, children), React__default["default"].createElement(expandMore.SvgExpandMore, null)))))));
+});
+Button.propTypes = process.env.NODE_ENV !== "production" ? {
+  onClickEffect: defaultTheme.PropTypes.func,
+  singleAction: defaultTheme.PropTypes.bool,
+  activeDropdown: defaultTheme.PropTypes.bool,
+  dropdownItems: defaultTheme.PropTypes.node,
+  secondary: defaultTheme.PropTypes.bool,
+  outlined: defaultTheme.PropTypes.bool,
+  border: defaultTheme.PropTypes.number,
+  block: defaultTheme.PropTypes.bool,
+  icon: defaultTheme.PropTypes.element,
+  size: defaultTheme.PropTypes.oneOf(['x-small', 'small', 'normal', 'large']),
+  disabled: defaultTheme.PropTypes.bool,
+  loading: defaultTheme.PropTypes.bool,
+  className: defaultTheme.PropTypes.string,
+  children: defaultTheme.PropTypes.any.isRequired,
+  singleActionGap: defaultTheme.PropTypes.number,
+  width: defaultTheme.PropTypes.number
+} : {};
+
+exports.Button = Button;

package/build/Checkbox-0b8faf49.js

@@ -0,0 +1,220 @@
+'use strict';
+
+var React = require('react');
+var nanoid = require('nanoid');
+var defaultTheme = require('./defaultTheme-d9a7342e.js');
+var lodash = require('lodash');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+const checkboxSize = '18px';
+const Checkbox$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  display: flex;
+  flex-direction: column;
+`;
+const CheckIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  opacity: 0;
+  transform: scale(0.1);
+  transition: all 200ms;
+  position: absolute;
+  width: 12px;
+  top: 4px;
+  left: 3px;
+  color: ${props => props.theme.getColor('gray-100')};
+
+  svg {
+    width: 100%;
+    display: block;
+  }
+`;
+const IndeterminateCheckIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  opacity: 0;
+  transform: scale(0.1);
+  transition: all 200ms;
+  position: absolute;
+  height: 2px;
+  top: 8px;
+  left: 4px;
+  background: ${props => props.theme.getColor('gray-100')};
+  width: 10px;
+`;
+const CheckboxLabel = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)`
+  display: inline-flex;
+  position: relative;
+  cursor: pointer;
+  user-select: none;
+  min-height: ${checkboxSize};
+  text-align: left;
+  flex-wrap: wrap;
+  flex: 1;
+  line-height: ${checkboxSize};
+  margin-right: auto;
+
+  & input[type='checkbox'] {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+    margin: 0;
+  }
+
+  &::before {
+    content: '';
+    border: 2px solid ${props => props.theme.getColor('gray-300')};
+    border-radius: 2px;
+    transition: all 200ms;
+    width: ${checkboxSize};
+    height: ${checkboxSize};
+    box-sizing: border-box;
+    ${props => props.muted && styled.css`
+        opacity: 0.75;
+      `}
+  }
+
+  &:has(input[type='checkbox']:checked) {
+    &::before {
+      background: ${props => props.theme.getColor('emerald-500')};
+      border-color: ${props => props.theme.getColor('emerald-500')};
+    }
+  }
+
+  &:has(input[type='checkbox']:not([data-indeterminate='true']):checked) {
+    ${CheckIcon} {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  &:has(input[type='checkbox'][data-indeterminate='true']:checked) {
+    ${IndeterminateCheckIcon} {
+      opacity: 1;
+      transform: scale(1);
+    }
+  }
+
+  ${props => props.readOnly && styled.css`
+      opacity: 0.5;
+      cursor: default;
+      pointer-events: none;
+      user-select: text;
+    `}
+
+  ${props => props.disabled && styled.css`
+      opacity: 0.5;
+      cursor: not-allowed;
+    `}
+`;
+const CheckboxVisualLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  padding-left: 10px;
+  font-weight: 400;
+  font-size: 0.875rem;
+  flex: 1;
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600'))};
+`;
+const Description = styled__default["default"].p.attrs(defaultTheme.applyDefaultTheme)`
+  margin: 0.375rem 0 0 0;
+  font-size: 0.75rem;
+  line-height: 1.333;
+
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500'))};
+
+  ${props => props.error && styled.css`
+      content: 'error';
+      ${props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))}
+    `}
+`;
+
+const Checkbox = React__default["default"].forwardRef(function Checkbox({
+  checked,
+  defaultChecked,
+  disabled,
+  readOnly,
+  name,
+  value,
+  description,
+  error,
+  indeterminate,
+  muted,
+  label,
+  onChange,
+  onBlur,
+  className,
+  style
+}, forwardedRef) {
+  const [uniqueId] = React.useState(nanoid.nanoid());
+  const hasError = React.useMemo(() => {
+    if (lodash.isBoolean(error)) {
+      return error;
+    }
+    return !lodash.isEmpty(error);
+  }, [error]);
+  const descriptionText = React.useMemo(() => {
+    if (!lodash.isEmpty(error)) {
+      return error;
+    }
+    if (!lodash.isEmpty(description)) {
+      return description;
+    }
+    return null;
+  }, [description, error]);
+  return React__default["default"].createElement(Checkbox$1, {
+    className: className,
+    disabled: disabled,
+    readOnly: readOnly,
+    style: style
+  }, React__default["default"].createElement(CheckboxLabel, {
+    disabled: disabled,
+    muted: muted,
+    readOnly: readOnly,
+    htmlFor: uniqueId
+  }, React__default["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
+  }), React__default["default"].createElement(IndeterminateCheckIcon, null), React__default["default"].createElement(CheckIcon, null, React__default["default"].createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 10.9 8.45"
+  }, React__default["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') && React__default["default"].createElement(CheckboxVisualLabel, null, label)), typeof descriptionText === 'string' && descriptionText.length > 0 && React__default["default"].createElement(Description, {
+    error: hasError
+  }, descriptionText));
+});
+Checkbox.propTypes = process.env.NODE_ENV !== "production" ? {
+  checked: defaultTheme.PropTypes.bool,
+  defaultChecked: defaultTheme.PropTypes.bool,
+  label: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.element]),
+  disabled: defaultTheme.PropTypes.bool,
+  readOnly: defaultTheme.PropTypes.bool,
+  name: defaultTheme.PropTypes.string,
+  value: defaultTheme.PropTypes.string,
+  description: defaultTheme.PropTypes.string,
+  error: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.bool, defaultTheme.PropTypes.string]),
+  indeterminate: defaultTheme.PropTypes.bool,
+  muted: defaultTheme.PropTypes.bool,
+  onChange: defaultTheme.PropTypes.func,
+  onBlur: defaultTheme.PropTypes.func,
+  className: defaultTheme.PropTypes.string,
+  style: defaultTheme.PropTypes.object
+} : {};
+Checkbox.defaultProps = {
+  disabled: false,
+  readOnly: false,
+  indeterminate: false
+};
+
+exports.Checkbox = Checkbox;