@ntbjs/react-components 1.1.0-beta.12 → 1.1.0-beta.13

package/widgets/index.js

@@ -2,234 +2,48 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var AssetGallery = require('../AssetGallery-90248e89.js');
-var ContextMenu = require('../ContextMenu-743bc688.js');
-var AssetPreviewTopBar = require('../AssetPreviewTopBar-285559bb.js');
-var defaultTheme = require('../defaultTheme-1772c7ec.js');
-var React = require('react');
-var styled = require('styled-components');
-var TextArea = require('../TextArea-9b32b467.js');
-var AutocompleteSelect = require('../AutocompleteSelect-2face013.js');
-var lodash = require('lodash');
-require('../TextInput-a6a3def7.js');
+var AssetGallery = require('../AssetGallery-7a2417d6.js');
+var ContextMenu = require('../ContextMenu-a68d4f28.js');
+var AssetPreviewTopBar = require('../AssetPreviewTopBar-020a6f96.js');
+var Instructions = require('../Instructions-28bab5a0.js');
+require('../defaultTheme-870f7df1.js');
+require('styled-components');
+require('react');
+require('lodash');
+require('../TextInput-e4c6d536.js');
 require('nanoid');
 require('../edit-note-c47d292e.js');
 require('resize-observer-polyfill');
 require('react-lazy-load-image-component');
-require('../ActionButton-055a0015.js');
-require('../Button-0fd88f25.js');
-require('../Popover-8a8db474.js');
-require('polished');
-require('@tippyjs/react');
-require('../expand-more-94585605.js');
-require('../Checkbox-d35b1467.js');
-require('../CompactStarRating-908fb2f6.js');
-require('../CompactTextInput-c4430b82.js');
-require('../Tooltip-1bb4c3eb.js');
-require('../Badge-41d775cd.js');
-require('../Tab-562a47c6.js');
-require('../Tabs-604c890b.js');
-require('../MultiSelect-0bd497c8.js');
-require('../close-ebf2f3cf.js');
+require('../ActionButton-90485300.js');
+require('../AutocompleteSelect-e82bd937.js');
 require('react-select');
 require('../react-select-creatable.esm-eb462367.js');
 require('react-dom');
 require('react-select-async-paginate');
-require('../Radio-4475fda3.js');
-require('../Switch-90225b6b.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);
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-var BoxContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  position: relative;\n  flex-direction: column;\n  width: 100%;\n  ", ";\n  ", ";\n"])), function (props) {
-  return props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
-}, function (props) {
-  return props.initialHover && props.theme.themeProp('background', '#FFFDE8', '#FFFDE8');
-});
-var TopBarContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n  position: absolute;\n  display: flex;\n  justify-content: end;\n  ", ";\n\n  ", ";\n\n  width: 100%;\n  margin-top: 0;\n  transition: margin-top 120ms;\n  &&.slide-in {\n    margin-top: -24px;\n  }\n"])), function (props) {
-  return props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
-}, function (props) {
-  return props.initialHover && props.theme.themeProp('background', '#FFFDE8', '#FFFDE8');
-});
-var SelectContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n  width: 25%;\n  margin-right: 3px;\n"])));
-var Instructions$1 = styled__default['default'].p.attrs(defaultTheme.applyDefaultTheme)(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n  margin: 0;\n  width: 99.5% !important;\n  margin: auto;\n  ", ";\n"])), function (props) {
-  return props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'));
-});
-
-var Instructions = React__default['default'].forwardRef(function Instructions(_ref, forwardedRef) {
-  var clickToAdd = _ref.clickToAdd,
-      customAddMessage = _ref.customAddMessage,
-      selectedOption = _ref.selectedOption,
-      readOnly = _ref.readOnly,
-      lightBackground = _ref.lightBackground,
-      options = _ref.options,
-      props = defaultTheme._objectWithoutProperties(_ref, ["clickToAdd", "customAddMessage", "selectedOption", "readOnly", "lightBackground", "options"]);
-
-  var filterOptions = function filterOptions(inputValue) {
-    return options.filter(function (option) {
-      return option.label.toLowerCase().includes(inputValue.toLowerCase());
-    });
-  };
-
-  var loadOptions = function loadOptions(inputValue, prevOptions) {
-    var pageLength = 10;
-    var filteredOptions;
-
-    if (!inputValue) {
-      filteredOptions = options;
-    } else {
-      filteredOptions = filterOptions(inputValue);
-    }
-
-    var hasMore = filteredOptions.length > prevOptions.length + pageLength;
-    var slicedOptions = filteredOptions.slice(prevOptions.length, prevOptions.length + pageLength);
-    return {
-      options: slicedOptions,
-      hasMore: hasMore
-    };
-  };
-
-  var loadOptionsPromise = function loadOptionsPromise(inputValue, prevOptions) {
-    return new Promise(function (resolve) {
-      resolve(loadOptions(inputValue, prevOptions));
-    });
-  };
-
-  var _useState = React.useState(false),
-      _useState2 = defaultTheme._slicedToArray(_useState, 2),
-      isHovered = _useState2[0],
-      setIsHovered = _useState2[1];
-
-  var _useState3 = React.useState({}),
-      _useState4 = defaultTheme._slicedToArray(_useState3, 2),
-      selected = _useState4[0],
-      setSelected = _useState4[1];
-
-  var _useState5 = React.useState(clickToAdd),
-      _useState6 = defaultTheme._slicedToArray(_useState5, 2),
-      addInstructions = _useState6[0],
-      setAddInstructions = _useState6[1];
-
-  var _useState7 = React.useState(customAddMessage),
-      _useState8 = defaultTheme._slicedToArray(_useState7, 2),
-      customMessage = _useState8[0],
-      setCustomMessage = _useState8[1];
-
-  var _useState9 = React.useState(lightBackground),
-      _useState10 = defaultTheme._slicedToArray(_useState9, 2),
-      background = _useState10[0],
-      setBackground = _useState10[1];
-
-  var _useState11 = React.useState(true),
-      _useState12 = defaultTheme._slicedToArray(_useState11, 2),
-      initialHover = _useState12[0],
-      setInitialHover = _useState12[1];
-
-  var _useState13 = React.useState(),
-      _useState14 = defaultTheme._slicedToArray(_useState13, 2),
-      currentValue = _useState14[0],
-      setCurrentValue = _useState14[1];
-
-  var handleMouseEnter = function handleMouseEnter() {
-    setIsHovered(true);
-  };
-
-  var handleMouseLeave = function handleMouseLeave() {
-    setIsHovered(false);
-  };
-
-  var handleOnFocus = function handleOnFocus() {
-    if (customMessage === currentValue) {
-      setCurrentValue('');
-    }
-  };
-
-  var handleChange = function 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);
-    }
-  };
-
-  var handleLabelChange = function handleLabelChange(event) {
-    var newValue = event.target.value;
-
-    if (lodash.isEmpty(selected) && newValue) {
-      setCurrentValue(newValue);
-    }
+require('../close-ebf2f3cf.js');
+require('../expand-more-94585605.js');
+require('../Button-e6a6139c.js');
+require('../Popover-63d38274.js');
+require('polished');
+require('@tippyjs/react');
+require('../Checkbox-50f1f3c7.js');
+require('../CompactStarRating-f7a58649.js');
+require('../CompactTextInput-cd701b06.js');
+require('../Alert-fcc0bb50.js');
+require('../Badge-34ad2850.js');
+require('../Tab-51124003.js');
+require('../Tabs-452079b5.js');
+require('../Tooltip-7c57004f.js');
+require('../MultiSelect-3eca3c3e.js');
+require('../Radio-0b46b2a8.js');
+require('../TextArea-efe4fa88.js');
+require('../Switch-aa384260.js');
+require('../warning-circle-24522402.js');
 
-    if (newValue) {
-      setCurrentValue(newValue);
-    }
-  };
 
-  React.useEffect(function () {
-    handleChange(selected);
-  }, [selected]);
-  React.useEffect(function () {
-    if (selectedOption) {
-      setCurrentValue(selectedOption.value);
-    }
-  }, [selectedOption]);
-  React.useEffect(function () {
-    if (addInstructions) {
-      setCurrentValue(customMessage);
-      setInitialHover(true);
-    }
-  }, [addInstructions, handleOnFocus]);
-  return React__default['default'].createElement(BoxContainer, {
-    initialHover: initialHover,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave
-  }, React__default['default'].createElement(TopBarContainer, {
-    initialHover: initialHover,
-    className: isHovered && !readOnly && 'slide-in'
-  }, React__default['default'].createElement(SelectContainer, null, React__default['default'].createElement(AutocompleteSelect.AutocompleteSelect, {
-    warning: true,
-    creatable: false,
-    defaultValue: selectedOption,
-    loadOptions: loadOptionsPromise,
-    onChange: handleChange
-  }))), React__default['default'].createElement(Instructions$1, defaultTheme._extends({
-    ref: forwardedRef
-  }, props), React__default['default'].createElement(TextArea.TextArea, {
-    noBorder: true,
-    lightBackground: background,
-    readOnly: readOnly,
-    warningAlert: true,
-    value: currentValue,
-    onChange: handleLabelChange,
-    onFocus: handleOnFocus,
-    icon: React__default['default'].createElement(AssetGallery.SvgWarningCircle, null)
-  })));
-});
-Instructions.defaultProps = {
-  clickToAdd: false,
-  lightBackground: false
-};
-Instructions.propTypes = process.env.NODE_ENV !== "production" ? {
-  selectedOption: defaultTheme.PropTypes.object,
-  clickToAdd: defaultTheme.PropTypes.bool,
-  customAddMessage: defaultTheme.PropTypes.string,
-  disabled: defaultTheme.PropTypes.bool,
-  readOnly: defaultTheme.PropTypes.bool,
-  lightBackground: defaultTheme.PropTypes.bool,
-  options: defaultTheme.PropTypes.array
-} : {};
 
 exports.AssetGallery = AssetGallery.AssetGallery;
 exports.ContextMenu = ContextMenu.ContextMenu;
 exports.AssetPreviewTopBar = AssetPreviewTopBar.AssetPreviewTopBar;
-exports.Instructions = Instructions;
+exports.Instructions = Instructions.Instructions;

package/Tooltip-1bb4c3eb.js

@@ -1,107 +0,0 @@
-'use strict';
-
-var React = require('react');
-var defaultTheme = require('./defaultTheme-1772c7ec.js');
-var styled = require('styled-components');
-var TippyTooltip = require('@tippyjs/react');
-require('./Popover-8a8db474.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);
-var TippyTooltip__default = /*#__PURE__*/_interopDefaultLegacy(TippyTooltip);
-
-var _templateObject$1, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-var BoxContainer = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject$1 || (_templateObject$1 = defaultTheme._taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  padding: 17px 30px;\n  svg {\n    width: 12px;\n    padding-right: 5px;\n  }\n\n  ", "\n\n  ", "\n\n    ", ";\n\n  ", ";\n"])), function (props) {
-  return props.warning && styled.css(_templateObject2 || (_templateObject2 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400')));
-}, function (props) {
-  return props.error && styled.css(_templateObject3 || (_templateObject3 = defaultTheme._taggedTemplateLiteral(["\n      ", "\n    "])), props.theme.themeProp('background', '#7F1B1B', props.theme.getColor('red-200')));
-}, function (props) {
-  return props.align === 'left' && styled.css(_templateObject4 || (_templateObject4 = defaultTheme._taggedTemplateLiteral(["\n      text-align: left;\n    "])));
-}, function (props) {
-  return props.align === 'center' && styled.css(_templateObject5 || (_templateObject5 = defaultTheme._taggedTemplateLiteral(["\n      text-align: center;\n    "])));
-});
-var Alert$1 = styled__default['default'].div.attrs(defaultTheme.applyDefaultTheme)(_templateObject6 || (_templateObject6 = defaultTheme._taggedTemplateLiteral(["\n  width: 100%;\n"])));
-
-var Alert = React__default['default'].forwardRef(function Alert(_ref, forwardedRef) {
-  var warning = _ref.warning,
-      error = _ref.error,
-      children = _ref.children,
-      align = _ref.align,
-      icon = _ref.icon;
-
-  var boxRender = function boxRender(warning, error) {
-    if (warning) {
-      return React__default['default'].createElement(Alert$1, null, icon, " ", children);
-    } else if (error) {
-      return React__default['default'].createElement(Alert$1, null, icon, " ", children);
-    }
-  };
-
-  return React__default['default'].createElement(BoxContainer, {
-    ref: forwardedRef,
-    warning: warning,
-    error: error,
-    align: align
-  }, boxRender(warning, error));
-});
-Alert.propTypes = process.env.NODE_ENV !== "production" ? {
-  warning: defaultTheme.PropTypes.bool,
-  error: defaultTheme.PropTypes.bool,
-  icon: defaultTheme.PropTypes.element,
-  align: defaultTheme.PropTypes.oneOf(['left', 'center']),
-  children: defaultTheme.PropTypes.element
-} : {};
-Alert.defaultProps = {
-  warning: false,
-  error: false,
-  align: 'left'
-};
-
-var _templateObject;
-var Tooltip$1 = styled__default['default'](TippyTooltip__default['default']).attrs(defaultTheme.applyDefaultTheme)(_templateObject || (_templateObject = defaultTheme._taggedTemplateLiteral(["\n  font-family: ", ";\n  font-size: 1rem;\n  font-weight: 400;\n  background: ", ";\n  border-radius: 3px;\n\n  .tippy-content {\n    padding: 9px 12px;\n  }\n\n  .tippy-arrow {\n    color: ", ";\n  }\n\n  a {\n    color: inherit;\n  }\n"])), function (props) {
-  return props.theme.primaryFontFamily;
-}, function (props) {
-  return props.theme.getColor('gray-700');
-}, function (props) {
-  return props.theme.getColor('gray-700');
-});
-
-var Tooltip = React__default['default'].forwardRef(function Tooltip(_ref, ref) {
-  var content = _ref.content,
-      interactive = _ref.interactive,
-      placement = _ref.placement,
-      duration = _ref.duration,
-      trigger = _ref.trigger,
-      children = _ref.children,
-      props = defaultTheme._objectWithoutProperties(_ref, ["content", "interactive", "placement", "duration", "trigger", "children"]);
-
-  return React__default['default'].createElement(Tooltip$1, defaultTheme._extends({
-    ref: ref,
-    content: content,
-    interactive: interactive,
-    placement: placement,
-    duration: duration,
-    trigger: trigger,
-    animation: 'shift-away-subtle'
-  }, props), children);
-});
-Tooltip.defaultProps = {
-  content: 'Tooltip',
-  interactive: false,
-  placement: 'top',
-  duration: 350,
-  trigger: 'mouseenter focus'
-};
-Tooltip.propTypes = process.env.NODE_ENV !== "production" ? {
-  content: defaultTheme.PropTypes.oneOfType([defaultTheme.PropTypes.string, defaultTheme.PropTypes.element]).isRequired,
-  interactive: defaultTheme.PropTypes.bool,
-  placement: defaultTheme.PropTypes.oneOf(['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'auto', 'auto-start', 'auto-end']),
-  duration: defaultTheme.PropTypes.number,
-  trigger: defaultTheme.PropTypes.oneOf(['mouseenter', 'mouseenter focus', 'click', 'focusin', 'mouseenter click']),
-  children: defaultTheme.PropTypes.node.isRequired
-} : {};
-
-exports.Alert = Alert;
-exports.Tooltip = Tooltip;