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

package/build/ContextMenuItem-3967010d.js

@@ -0,0 +1,152 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
+var React = require('react');
+var defaultTheme = require('./defaultTheme-d9a7342e.js');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+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__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 10 20"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M0 20V0l10 10L0 20z"
+  })));
+}
+
+const ContextMenuItem$1 = styled__default["default"].span.attrs(defaultTheme.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 && styled.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] && styled.css`
+      &&:hover {
+        ${props => props.theme.themeProp('color', props.hoverColors[0], props.hoverColors[1])}
+      }
+    `}
+
+  ${props => props.hoverBackgroundColors && props.hoverBackgroundColors[0] && props.hoverBackgroundColors[1] && styled.css`
+      &&:hover {
+        ${props => props.theme.themeProp('background-color', props.hoverBackgroundColors[0], props.hoverBackgroundColors[1])}
+      }
+    `}
+`;
+const IconContainer = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)`
+  align-items: center;
+  display: flex;
+  height: fit-content;
+  max-width: 12px;
+  margin-right: 8px;
+
+  svg {
+    height: 12px;
+  }
+`;
+const SublevelIconContainer = styled__default["default"].span.attrs(defaultTheme.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["default"].forwardRef(function ContextMenuItem({
+  title,
+  icon,
+  onClickEffect,
+  opensSublevel,
+  hoverColors,
+  hoverBackgroundColors,
+  ...props
+}, forwardedRef) {
+  return React__default["default"].createElement(ContextMenuItem$1, _rollupPluginBabelHelpers._extends({
+    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["default"].createElement(IconContainer, null, icon), React__default["default"].createElement("span", null, title), opensSublevel && React__default["default"].createElement(SublevelIconContainer, null, React__default["default"].createElement(SvgTriangleRight, null)));
+});
+ContextMenuItem.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: defaultTheme.PropTypes.string.isRequired,
+  icon: defaultTheme.PropTypes.element,
+  onClickEffect: defaultTheme.PropTypes.func,
+  opensSublevel: defaultTheme.PropTypes.bool,
+  hoverColors: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string),
+  hoverBackgroundColors: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.string)
+} : {};
+ContextMenuItem.defaultProps = {
+  icon: undefined,
+  hoverColors: undefined,
+  hoverBackgroundColors: undefined,
+  opensSublevel: false
+};
+
+exports.ContextMenuItem = ContextMenuItem;

package/build/InfoCard-d0fdf377.js

@@ -0,0 +1,132 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
+var React = require('react');
+var defaultTheme = require('./defaultTheme-d9a7342e.js');
+var styled = require('styled-components');
+var arrowForward = require('./arrow-forward-d7c77ae3.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 Container = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  font-family: ${props => props.theme.primaryFontFamily};
+  font-size: 1rem;
+  font-weight: 500;
+  ${props => props.theme.themeProp('background', props.theme.getColor('gray-800'), props.theme.getColor('gray-50'))};
+  height: ${props => props.height ? `${props.height}px` : '50px'};
+  border-radius: 3px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 5px 0;
+`;
+const MetricsContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  width: 70%;
+  gap: 5px;
+  padding-left: 15px;
+`;
+const IconTotalContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+`;
+const Total = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  font-size: 1.22rem;
+  font-weight: 700;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};
+`;
+const Label = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  font-size: 0.875rem;
+  font-weight: 400;
+  opacity: 0.8;
+  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-500'))};
+`;
+const IconContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 18px;
+  margin-top: -0.05rem;
+`;
+const Link = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  font-size: 0.875rem;
+  font-weight: 400;
+  width: 30%;
+  opacity: 0.7;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  margin-right: 20px;
+  cursor: pointer;
+  height: 100%;
+  gap: 10px;
+  svg {
+    transition: transform 0.2s ease-in-out;
+  }
+  &:hover svg {
+    transform: translateX(2px);
+  }
+`;
+const ButtonLink = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  font-size: 0.875rem;
+  font-weight: 500;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  opacity: ${props => props.$isHovered ? 1 : 0.8};
+  transition: color 0.2s ease-in-out;
+  ${props => props.$isHovered ? props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('black')) : props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};
+`;
+const StyledArrowIcon = styled__default["default"](arrowForward.SvgArrowForward).attrs(defaultTheme.applyDefaultTheme)`
+  height: 15px;
+  margin-right: 10px;
+  opacity: ${props => props.$isHovered ? 1 : 0.8};
+  transition: transform 0.2s ease-in-out, fill 0.2s ease-in-out;
+  transform: ${props => props.$isHovered ? 'translateX(2px)' : 'translateX(0)'};
+
+  ${props => props.$isHovered ? props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black')) : props.theme.themeProp('fill', props.theme.getColor('white'), props.theme.getColor('black'))};
+`;
+
+const InfoCard = React__default["default"].forwardRef(function InfoCard({
+  icon,
+  total,
+  label,
+  linkLabel,
+  onClick,
+  height,
+  ...props
+}, forwardedRef) {
+  const [isLinkHovered, setIsLinkHovered] = React.useState(false);
+  const handleLinkClick = e => onClick(e);
+  return React__default["default"].createElement(Container, _rollupPluginBabelHelpers._extends({
+    height: height,
+    ref: forwardedRef
+  }, props), React__default["default"].createElement(MetricsContainer, null, React__default["default"].createElement(IconTotalContainer, null, React__default["default"].createElement(IconContainer, null, icon), React__default["default"].createElement(Total, null, total)), React__default["default"].createElement(Label, null, label)), linkLabel && onClick && React__default["default"].createElement(Link, {
+    onClick: handleLinkClick,
+    onMouseEnter: () => setIsLinkHovered(true),
+    onMouseLeave: () => setIsLinkHovered(false)
+  }, React__default["default"].createElement(ButtonLink, {
+    $isHovered: isLinkHovered
+  }, linkLabel), React__default["default"].createElement(StyledArrowIcon, {
+    $isHovered: isLinkHovered
+  })));
+});
+InfoCard.propTypes = process.env.NODE_ENV !== "production" ? {
+  icon: defaultTheme.PropTypes.element.isRequired,
+  total: defaultTheme.PropTypes.number.isRequired,
+  label: defaultTheme.PropTypes.string.isRequired,
+  linkLabel: defaultTheme.PropTypes.string,
+  onClick: defaultTheme.PropTypes.func,
+  height: defaultTheme.PropTypes.number
+} : {};
+
+exports.InfoCard = InfoCard;

package/build/InputGroup-8d4a4644.js

@@ -0,0 +1,30 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
+var React = require('react');
+var defaultTheme = require('./defaultTheme-d9a7342e.js');
+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 InputGroup$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  margin: 8px 0;
+`;
+
+const InputGroup = React__default["default"].forwardRef(function InputGroup({
+  children,
+  ...props
+}, forwardedRef) {
+  return React__default["default"].createElement(InputGroup$1, _rollupPluginBabelHelpers._extends({
+    ref: forwardedRef
+  }, props), children);
+});
+InputGroup.propTypes = process.env.NODE_ENV !== "production" ? {
+  children: defaultTheme.PropTypes.node
+} : {};
+InputGroup.defaultProps = {};
+
+exports.InputGroup = InputGroup;

package/build/Instructions-af191987.js

@@ -0,0 +1,274 @@
+'use strict';
+
+var _rollupPluginBabelHelpers = require('./_rollupPluginBabelHelpers-4b342fad.js');
+var lodash = require('lodash');
+var defaultTheme = require('./defaultTheme-d9a7342e.js');
+var React = require('react');
+var CompactAutocompleteSelect = require('./CompactAutocompleteSelect-797778cb.js');
+var TextArea = require('./TextArea-26d3c8a1.js');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+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 SvgWarningCircle(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "currentColor",
+    d: "M10.8 15.6h2.4V18h-2.4zm0-9.6h2.4v7.2h-2.4zm1.188-6A12 12 0 1024 12 11.994 11.994 0 0011.988 0zM12 21.6a9.6 9.6 0 119.6-9.6 9.597 9.597 0 01-9.6 9.6z"
+  })));
+}
+
+const Instructions$1 = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  ${props => props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))};
+`;
+const TopBarContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  position: absolute;
+  display: flex;
+  width: 100%;
+  margin-top: 0;
+  transition: margin-top 120ms;
+  &&.slide-in {
+    margin-top: -24px;
+  }
+  ${props => props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))};
+
+  ${props => props.initialHover && props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))};
+`;
+const SelectContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  width: 100%;
+  margin: 0 2px;
+`;
+const InstructionsArea = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)`
+  margin: 2px 2px -2px 2px;
+`;
+
+const Instructions = React__default["default"].forwardRef(function Instructions({
+  clickToAdd,
+  customAddMessage,
+  selectedOption,
+  loadOptions,
+  readOnly,
+  disabled,
+  hidden,
+  name,
+  lightBackground,
+  autoSelect,
+  subscribeCurrentValue: subscribeCurrentValueProp,
+  onChange: onChangeProp,
+  onFocus: onFocusProp,
+  onBlur: onBlurProp,
+  onUpdateCallback,
+  availableOptions,
+  loadingMessageFunc,
+  placeholder,
+  type,
+  selectType,
+  edit,
+  rows,
+  showMore,
+  showMoreText,
+  showLessText,
+  isExpanded,
+  loadingIcon,
+  successIcon,
+  padding,
+  ...props
+}, forwardedRef) {
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [selected, setSelected] = React.useState({});
+  const [addInstructions, setAddInstructions] = React.useState(clickToAdd);
+  const [customMessage, setCustomMessage] = React.useState(customAddMessage);
+  const [background, setBackground] = React.useState(lightBackground);
+  const [initialHover, setInitialHover] = React.useState(true);
+  const [currentValue, setCurrentValue] = React.useState();
+  React.useEffect(() => {
+    if (lodash.isFunction(subscribeCurrentValueProp)) {
+      subscribeCurrentValueProp(currentValue);
+    }
+  }, [currentValue]);
+  React.useEffect(() => {
+    handleChange(selected);
+  }, [selected]);
+  React.useEffect(() => {
+    if (selectedOption) {
+      setCurrentValue(selectedOption.value);
+    }
+  }, [selectedOption]);
+  React.useEffect(() => {
+    if (addInstructions) {
+      setCurrentValue(customMessage);
+      setInitialHover(true);
+    }
+  }, [addInstructions, handleOnFocus]);
+  const onChange = React.useCallback(event => {
+    setCurrentValue(event.target.value);
+    if (lodash.isFunction(onChangeProp)) {
+      onChangeProp(event);
+    }
+  }, [onChangeProp]);
+  const onFocus = React.useCallback(event => {
+    if (autoSelect) {
+      event.target.select();
+    }
+    if (lodash.isFunction(onFocusProp)) {
+      onFocusProp(event);
+    }
+    if (event.target.value === customMessage) {
+      setCurrentValue('');
+    }
+  }, [autoSelect, readOnly, onFocusProp]);
+  const onBlur = React.useCallback(event => {
+    if (lodash.isFunction(onBlurProp)) {
+      onBlurProp(event);
+    }
+  }, [onBlurProp]);
+  const handleMouseOver = () => {
+    setIsHovered(true);
+  };
+  const handleMouseLeave = () => {
+    setIsHovered(false);
+  };
+  const handleOnFocus = () => {
+    if (customMessage === currentValue) {
+      setCurrentValue('');
+    }
+  };
+  const handleChange = selected => {
+    if (selected === null) {
+      setSelected({});
+      setAddInstructions(true);
+      setBackground(true);
+      setInitialHover(true);
+      setCustomMessage(customAddMessage);
+    } else {
+      setSelected(selected);
+      setCurrentValue(selected.value);
+      setAddInstructions(false);
+      setBackground(false);
+      setInitialHover(false);
+      onUpdateCallback(selected);
+    }
+  };
+  const sharedSelectProps = {
+    options: loadOptions ? undefined : availableOptions,
+    loadOptions: loadOptions,
+    loadingMessage: loadingMessageFunc,
+    placeholder: placeholder
+  };
+  if (hidden) return null;
+  return React__default["default"].createElement(Instructions$1, _rollupPluginBabelHelpers._extends({
+    ref: forwardedRef,
+    initialHover: initialHover,
+    onMouseDown: handleMouseOver,
+    onMouseLeave: handleMouseLeave
+  }, props), !readOnly && !disabled && React__default["default"].createElement(TopBarContainer, {
+    initialHover: initialHover,
+    className: isHovered && !readOnly && !disabled && 'slide-in'
+  }, React__default["default"].createElement(SelectContainer, null, React__default["default"].createElement(CompactAutocompleteSelect.CompactAutocompleteSelect, _rollupPluginBabelHelpers._extends({
+    type: selectType,
+    value: selectedOption,
+    creatable: false,
+    onChange: handleChange
+  }, sharedSelectProps)))), React__default["default"].createElement(InstructionsArea, {
+    type: type
+  }, React__default["default"].createElement(TextArea.TextArea, {
+    noBorder: true,
+    instructionsTextArea: true,
+    type: type,
+    lightBackground: background,
+    readOnly: readOnly,
+    disabled: disabled,
+    name: name,
+    isExpanded: isExpanded,
+    edit: edit,
+    value: currentValue === null ? '' : currentValue,
+    onFocus: onFocus,
+    onChange: onChange,
+    onBlur: onBlur,
+    rows: rows,
+    showMore: showMore,
+    showMoreText: showMoreText,
+    showLessText: showLessText,
+    icon: React__default["default"].createElement(SvgWarningCircle, null),
+    loadingIcon: loadingIcon,
+    successIcon: successIcon,
+    padding: padding
+  })));
+});
+Instructions.defaultProps = {
+  clickToAdd: false,
+  lightBackground: false,
+  autoSelect: true,
+  hidden: false,
+  edit: false,
+  disabled: false,
+  readOnly: false,
+  type: '',
+  selectType: '',
+  padding: 'medium',
+  onUpdateCallback: () => {}
+};
+Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
+  name: defaultTheme.PropTypes.string,
+  placeholder: defaultTheme.PropTypes.string,
+  rows: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.number, defaultTheme.PropTypes.string]),
+  selectedOption: defaultTheme.PropTypes.any,
+  loadOptions: defaultTheme.PropTypes.func,
+  loadingMessageFunc: defaultTheme.PropTypes.func,
+  clickToAdd: defaultTheme.PropTypes.bool,
+  customAddMessage: defaultTheme.PropTypes.string,
+  autoSelect: defaultTheme.PropTypes.bool,
+  readOnly: defaultTheme.PropTypes.bool,
+  disabled: defaultTheme.PropTypes.bool,
+  hidden: defaultTheme.PropTypes.bool,
+  showMore: defaultTheme.PropTypes.bool,
+  showMoreText: defaultTheme.PropTypes.string,
+  showLessText: defaultTheme.PropTypes.string,
+  availableOptions: defaultTheme.PropTypes.arrayOf(defaultTheme.PropTypes.object),
+  lightBackground: defaultTheme.PropTypes.bool,
+  edit: defaultTheme.PropTypes.bool,
+  options: defaultTheme.PropTypes.array,
+  subscribeCurrentValue: defaultTheme.PropTypes.func,
+  onChange: defaultTheme.PropTypes.func,
+  onFocus: defaultTheme.PropTypes.func,
+  onBlur: defaultTheme.PropTypes.func,
+  onUpdateCallback: defaultTheme.PropTypes.func,
+  type: defaultTheme.PropTypes.oneOf(['', 'error', 'error-border', 'warning', 'instructions-warning', 'loading', 'success']),
+  selectType: defaultTheme.PropTypes.oneOf(['', 'error', 'warning', 'instructions-warning', 'loading', 'success']),
+  isExpanded: defaultTheme.PropTypes.func,
+  loadingIcon: defaultTheme.PropTypes.element,
+  successIcon: defaultTheme.PropTypes.element,
+  padding: defaultTheme.PropTypes.oneOf(['', 'small', 'medium', 'large'])
+} : {};
+
+exports.Instructions = Instructions;
+exports.SvgWarningCircle = SvgWarningCircle;