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

package/build/Button-179a2fe4.js

@@ -0,0 +1,442 @@
+import { _ as _extends } from './_rollupPluginBabelHelpers-c245b26a.js';
+import React__default, { useState, useRef, useEffect } from 'react';
+import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
+import styled, { css } from 'styled-components';
+import { P as Popover } from './Popover-20050b91.js';
+import ContextMenu from './widgets/ContextMenu/ContextMenu.js';
+import { S as SvgExpandMore } from './expand-more-c5523c46.js';
+
+const Button$1 = styled.button.attrs(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 && 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 && 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 && 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 && css`
+        &:hover,
+        &.dropdown-is-active {
+          ${props.theme.themeProp('border-color', props.theme.getColor('gray-300'), props.theme.getColor('gray-300'))}
+        }
+      `};
+  }
+
+  ${props => props.block && css`
+      width: 100%;
+    `};
+
+  ${props => props.disabled && css`
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+    `};
+
+  ${props => props.size === 'x-small' && css`
+      padding: 1px 16px;
+      height: 24px;
+    `};
+
+  ${props => props.size === 'small' && css`
+      padding: 6px 16px;
+    `};
+
+  ${props => props.size === 'large' && css`
+      padding: 16px 16px;
+    `};
+
+  ${props => props.singleAction && css`
+      display: flex;
+      align-items: center;
+      gap: ${props.singleActionGap}px;
+      border-radius: 3px !important;
+      transition: all 250ms, opacity 200ms;
+    `};
+
+  ${props => props.width && css`
+      min-width: ${props.width}px;
+      justify-content: center;
+    `};
+`;
+const ButtonContent = styled.div.attrs(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' && css`
+        max-width: 13px;
+        max-height: 13px;
+      `};
+
+    ${props => props.size === 'x-small' && css`
+        max-width: 11px;
+        max-height: 11px;
+      `};
+  }
+
+  ${props => props.$loading && css`
+      transform: scale(0.95);
+      opacity: 0;
+    `}
+
+  ${props => props.singleAction && css`
+      svg {
+        width: 100% !important;
+        height: 100% !important;
+        margin-right: 24px;
+      }
+    `};
+`;
+const LoadingIndicator = styled.div.attrs(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 && css`
+      opacity: 1;
+    `}
+`;
+const LoadingIndicatorSvg = styled.svg.attrs(applyDefaultTheme)`
+  height: 100%;
+  color: inherit;
+  transform: rotate(-88deg);
+`;
+const LoadingIndicatorSvgCircle = styled.circle.attrs(applyDefaultTheme)`
+  transition: stroke-dashoffset 300ms linear;
+  stroke-dasharray: 113;
+`;
+const ButtonWrapper = styled.span.attrs(applyDefaultTheme)`
+  white-space: nowrap;
+  display: flex;
+  ${props => props.block && css`
+      width: 100%;
+    `}
+`;
+const MainButtonWrapper = styled.div.attrs(applyDefaultTheme)`
+  border-radius: 3px;
+  ${props => props.block && css`
+      width: 100%;
+      display: flex;
+    `}
+
+  ${props => {
+  return (props.activeDropdown || props.dropdownItems) && !props.outlined && css`
+        background: ${props.secondary ? props.theme.getColor('gray-200') : props.theme.getColor('emerald-500')};
+      `;
+}};
+`;
+const MainButtonContainer = styled.div.attrs(applyDefaultTheme)`
+  display: inline-block;
+
+  ${props => props.block && css`
+      flex: 1;
+      width: 100%;
+    `}
+
+  button {
+    ${props => (props.activeDropdown || props.dropdownItems) && css`
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+      `};
+
+    ${props => (props.activeDropdown || props.dropdownItems) && props.outlined && css`
+        border-right: none;
+      `};
+  }
+`;
+const MainButtonContainerSingle = styled.div.attrs(applyDefaultTheme)`
+  display: inline-block;
+  width: 100%;
+  ${props => props.singleAction && css`
+      display: flex;
+      align-items: center;
+      border-radius: 3px !important;
+      transition: all 250ms, opacity 200ms;
+    `};
+
+  button {
+    ${props => (props.activeDropdown || props.dropdownItems) && css`
+        border-bottom-right-radius: 0;
+        border-top-right-radius: 0;
+      `};
+  }
+`;
+const DropdownButtonContainer = styled.div.attrs(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.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] = useState(loading || false);
+  const [loadingStep, setLoadingStep] = useState(113);
+  const loadingInterval = useRef(0);
+  const [dropdownIsActive, setDropdownIsActive] = 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);
+  };
+  useEffect(() => {
+    if (loading) {
+      enableLoading();
+    } else {
+      disableLoading();
+    }
+    return () => clearInterval(loadingInterval.current);
+  }, [loading]);
+  const handleDropdownButtonClick = () => {
+    setDropdownIsActive(true);
+  };
+  const handleDropdownClose = () => {
+    setDropdownIsActive(false);
+  };
+  return React__default.createElement(ButtonWrapper, null, !singleAction ? React__default.createElement(MainButtonWrapper, {
+    activeDropdown: activeDropdown,
+    dropdownItems: dropdownItems,
+    outlined: outlined,
+    secondary: secondary,
+    block: block
+  }, React__default.createElement(MainButtonContainer, {
+    dropdownItems: dropdownItems,
+    secondary: secondary,
+    outlined: outlined,
+    block: block
+  }, React__default.createElement(Button$1, _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.createElement(ButtonContent, {
+    $loading: loadingState,
+    size: size
+  }, icon, children), React__default.createElement(LoadingIndicator, {
+    $loading: loadingState,
+    style: {
+      opacity: loadingState ? 1 : 0
+    }
+  }, React__default.createElement(LoadingIndicatorSvg, {
+    viewBox: "22 22 44 44"
+  }, React__default.createElement(LoadingIndicatorSvgCircle, {
+    cx: "44",
+    cy: "44",
+    r: "18",
+    fill: "none",
+    strokeWidth: "4",
+    stroke: "currentColor",
+    style: {
+      strokeDashoffset: `${loadingStep}px`
+    }
+  }))))), (activeDropdown || dropdownItems) && React__default.createElement(DropdownButtonContainer, {
+    dropdownItems: dropdownItems,
+    secondary: secondary,
+    outlined: outlined
+  }, React__default.createElement(Popover, {
+    content: React__default.createElement(ContextMenu, null, dropdownItems),
+    placement: 'bottom-end',
+    arrow: false,
+    contextMenu: true,
+    onHide: handleDropdownClose
+  }, React__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.createElement(SvgExpandMore, null))))) : React__default.createElement(React__default.Fragment, null, React__default.createElement(MainButtonContainerSingle, {
+    dropdownItems: dropdownItems,
+    secondary: secondary,
+    outlined: outlined,
+    className: className
+  }, React__default.createElement(DropdownButtonContainer, {
+    singleAction: singleAction
+  }, React__default.createElement(Popover, {
+    content: React__default.createElement(ContextMenu, null, dropdownItems),
+    placement: 'bottom-end',
+    arrow: false,
+    contextMenu: true,
+    onHide: handleDropdownClose
+  }, React__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.createElement(ButtonContent, {
+    $loading: loadingState,
+    size: size,
+    singleAction: singleAction
+  }, icon, children), React__default.createElement(SvgExpandMore, null)))))));
+});
+Button.propTypes = process.env.NODE_ENV !== "production" ? {
+  onClickEffect: PropTypes.func,
+  singleAction: PropTypes.bool,
+  activeDropdown: PropTypes.bool,
+  dropdownItems: PropTypes.node,
+  secondary: PropTypes.bool,
+  outlined: PropTypes.bool,
+  border: PropTypes.number,
+  block: PropTypes.bool,
+  icon: PropTypes.element,
+  size: PropTypes.oneOf(['x-small', 'small', 'normal', 'large']),
+  disabled: PropTypes.bool,
+  loading: PropTypes.bool,
+  className: PropTypes.string,
+  children: PropTypes.any.isRequired,
+  singleActionGap: PropTypes.number,
+  width: PropTypes.number
+} : {};
+
+export { Button as B };

package/build/Checkbox-4a5fd716.js

@@ -0,0 +1,213 @@
+import React__default, { useState, useMemo } from 'react';
+import { nanoid } from 'nanoid';
+import { a as applyDefaultTheme, P as PropTypes } from './defaultTheme-1bcc2541.js';
+import { isBoolean, isEmpty } from 'lodash';
+import styled, { css } from 'styled-components';
+
+const checkboxSize = '18px';
+const Checkbox$1 = styled.div.attrs(applyDefaultTheme)`
+  display: flex;
+  flex-direction: column;
+`;
+const CheckIcon = styled.div.attrs(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.div.attrs(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.label.attrs(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 && 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 && css`
+      opacity: 0.5;
+      cursor: default;
+      pointer-events: none;
+      user-select: text;
+    `}
+
+  ${props => props.disabled && css`
+      opacity: 0.5;
+      cursor: not-allowed;
+    `}
+`;
+const CheckboxVisualLabel = styled.div.attrs(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.p.attrs(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 && css`
+      content: 'error';
+      ${props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))}
+    `}
+`;
+
+const Checkbox = React__default.forwardRef(function Checkbox({
+  checked,
+  defaultChecked,
+  disabled,
+  readOnly,
+  name,
+  value,
+  description,
+  error,
+  indeterminate,
+  muted,
+  label,
+  onChange,
+  onBlur,
+  className,
+  style
+}, forwardedRef) {
+  const [uniqueId] = useState(nanoid());
+  const hasError = useMemo(() => {
+    if (isBoolean(error)) {
+      return error;
+    }
+    return !isEmpty(error);
+  }, [error]);
+  const descriptionText = useMemo(() => {
+    if (!isEmpty(error)) {
+      return error;
+    }
+    if (!isEmpty(description)) {
+      return description;
+    }
+    return null;
+  }, [description, error]);
+  return React__default.createElement(Checkbox$1, {
+    className: className,
+    disabled: disabled,
+    readOnly: readOnly,
+    style: style
+  }, React__default.createElement(CheckboxLabel, {
+    disabled: disabled,
+    muted: muted,
+    readOnly: readOnly,
+    htmlFor: uniqueId
+  }, React__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.createElement(IndeterminateCheckIcon, null), React__default.createElement(CheckIcon, null, React__default.createElement("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 10.9 8.45"
+  }, React__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.createElement(CheckboxVisualLabel, null, label)), typeof descriptionText === 'string' && descriptionText.length > 0 && React__default.createElement(Description, {
+    error: hasError
+  }, descriptionText));
+});
+Checkbox.propTypes = process.env.NODE_ENV !== "production" ? {
+  checked: PropTypes.bool,
+  defaultChecked: PropTypes.bool,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  name: PropTypes.string,
+  value: PropTypes.string,
+  description: PropTypes.string,
+  error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  indeterminate: PropTypes.bool,
+  muted: PropTypes.bool,
+  onChange: PropTypes.func,
+  onBlur: PropTypes.func,
+  className: PropTypes.string,
+  style: PropTypes.object
+} : {};
+Checkbox.defaultProps = {
+  disabled: false,
+  readOnly: false,
+  indeterminate: false
+};
+
+export { Checkbox as C };