@itcase/ui 1.0.1

package/dist/components/Popup.js

@@ -0,0 +1,254 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var ReactDOM = require('react-dom');
+var clsx = require('clsx');
+var index = require('./Icon.js');
+var index$1 = require('./Text.js');
+var index$2 = require('./Fader.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../context/UIContext.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var index$3 = require('./Loader.js');
+require('react-inlinesvg');
+require('../constants/componentProps/fill.js');
+require('../constants/componentProps/iconSize.js');
+require('../constants/componentProps/shape.js');
+require('../constants/componentProps/strokeColor.js');
+require('./Link.js');
+require('../useStyles-77c3b520.js');
+require('../hooks/styleAttributes.js');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/underline.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/fillGradient.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var ReactDOM__default = /*#__PURE__*/_interopDefault(ReactDOM);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+var getOrCreatePopupElement = function getOrCreatePopupElement(popupQuerySelector, className) {
+  if (className === void 0) {
+    className = '';
+  }
+  // prettier-ignore
+  var classList = className && typeof className === 'string' ? className.split(' ').filter(Boolean) : [];
+  var popupElement = document.querySelector(popupQuerySelector);
+  if (!popupElement) {
+    // Add popup element into the DOM on mount.
+    popupElement = document.createElement('div');
+    popupElement.setAttribute('id', 'popup-global');
+    popupElement.classList.add('popup');
+    if (classList.length) {
+      var _popupElement$classLi;
+      (_popupElement$classLi = popupElement.classList).add.apply(_popupElement$classLi, classList);
+    }
+    document.body.prepend(popupElement);
+  }
+  return popupElement;
+};
+
+// Popup component that is an abstraction around the portal API.
+var Popup = /*#__PURE__*/React__default.default.forwardRef(function Popup(props, ref) {
+  var children = props.children,
+    className = props.className,
+    closeIcon = props.closeIcon,
+    closeIconFill = props.closeIconFill,
+    closeIconSize = props.closeIconSize,
+    closeText = props.closeText;
+    props.contentFill;
+    var contentClassName = props.contentClassName,
+    id = props.id,
+    isFader = props.isFader,
+    faderFill = props.faderFill,
+    faderFillGradient = props.faderFillGradient,
+    faderOpacity = props.faderOpacity,
+    initialIsOpen = props.isOpen,
+    isScrollOnOpen = props.isScrollOnOpen,
+    isSetFocusOnOpen = props.isSetFocusOnOpen,
+    popupQuerySelector = props.popupQuerySelector,
+    debug = props.debug,
+    onClosePopup = props.onClosePopup,
+    onOpenPopup = props.onOpenPopup;
+
+  // Query DOM element
+  var _useState = React.useState(null),
+    popupElement = _useState[0],
+    setPopupElement = _useState[1];
+  React.useLayoutEffect(function () {
+    var element = getOrCreatePopupElement(popupQuerySelector, className);
+    setPopupElement(element);
+    if (element) {
+      addPopupProps(element);
+    }
+  }, []);
+  var popupContentRef = React.useRef(null);
+  var popupFaderRef = React.useRef(null);
+  var _useState2 = React.useState(initialIsOpen),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var addPopupProps = React.useCallback(function (element) {
+    // Change class need in "useEffect"
+    if (isOpen) {
+      // Show popup
+      element.classList.add('popup_state_visible');
+      // Scroll to opened popup
+      if (isScrollOnOpen) {
+        // popupContentRef.current.style.top = `${window.visualViewport.pageTop}px`
+        element.scrollIntoView({
+          block: 'center',
+          behavior: 'smooth'
+        });
+      }
+
+      // "setTimeout" in this implementation is needs for set focus on popup
+      // after "onMouseDown" event on button
+      if (isSetFocusOnOpen) {
+        setTimeout(function () {
+          return popupContentRef.current.focus();
+        }, 0);
+      }
+    } else if (!element.children.length) {
+      // Hide popup if has no children
+      element.classList.remove('popup_state_visible');
+    }
+  }, [isOpen, isSetFocusOnOpen]);
+  React.useEffect(function () {
+    if (!popupElement) {
+      return;
+    }
+    addPopupProps(popupElement);
+  }, [isOpen]); // eslint-disable-line
+
+  // Show popup with children content
+  var openPopup = React.useCallback(function () {
+    setIsOpen(true);
+
+    // Callback
+    if (typeof onOpenPopup === 'function') {
+      onOpenPopup();
+    }
+
+    /* SHOW TARGET POPUP ABOVE OTHERS POPUPS IF TARGET ALREADY OPENED
+      // If current popup is already opened
+      // Move content to end of popup root container. For order in DOM.
+      const popupContentElement = popupContentRef.current
+      if (popupContentElement) {
+        popupContentElement.parentNode.appendChild(popupContentElement)
+      }
+      // Also move fader to end of popup root container after container
+      const popupFaderElement = popupFaderRef.current
+      if (popupFaderElement) {
+        popupFaderElement.parentNode.appendChild(popupFaderElement)
+      }
+    */
+  }, [onOpenPopup]);
+
+  // Hide popup and unmount children content
+  var closePopup = React.useCallback(function (event) {
+    if (event === void 0) {
+      event = {};
+    }
+    var hasRelatedTarget = event.relatedTarget && popupElement.contains(event.relatedTarget);
+    if (hasRelatedTarget) {
+      return event;
+    }
+    setIsOpen(false);
+
+    // Callback
+    if (typeof onClosePopup === 'function') {
+      onClosePopup();
+    }
+  }, [popupElement, onClosePopup]);
+
+  // Save ref things
+  React.useImperativeHandle(ref, function () {
+    return {
+      isOpen: isOpen,
+      openPopup: openPopup,
+      closePopup: closePopup
+    };
+  });
+  var contentFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'contentFill'
+  });
+
+  // Use a portal to render the children into the element
+  return popupElement && /*#__PURE__*/ReactDOM__default.default.createPortal(
+  // Any valid React child: JSX, strings, arrays, etc.
+  isOpen ? /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement("div", {
+    ref: popupContentRef,
+    className: clsx__default.default('popup-content', contentClassName, contentFillClass),
+    id: id,
+    tabIndex: 0,
+    onBlur: debug ? undefined : closePopup
+  }, closeIcon && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "popup-content__close",
+    onClick: closePopup
+  }, closeIcon && /*#__PURE__*/React__default.default.createElement(index.Icon, {
+    SvgImage: closeIcon,
+    size: closeIconSize,
+    fill: closeIconFill
+  }), closeText && /*#__PURE__*/React__default.default.createElement(index$1.Text, null, closeText)), children), /*#__PURE__*/React__default.default.createElement(index$2.Fader, {
+    ref: popupFaderRef,
+    fill: faderFill,
+    fillGradient: faderFillGradient,
+    opacity: faderOpacity,
+    className: "popup__fader",
+    isFader: isFader
+  })) : null,
+  // A DOM element
+  popupElement);
+});
+Popup.propTypes = {
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  closeIcon: PropTypes__default.default.string,
+  closeText: PropTypes__default.default.string,
+  faderFill: PropTypes__default.default.string,
+  faderFillGradient: PropTypes__default.default.string,
+  faderOpacity: PropTypes__default.default.string,
+  contentClassName: PropTypes__default.default.string,
+  id: PropTypes__default.default.string,
+  isFader: PropTypes__default.default.bool,
+  isScrollOnOpen: PropTypes__default.default.bool,
+  isSetFocusOnOpen: PropTypes__default.default.bool,
+  popupQuerySelector: PropTypes__default.default.string,
+  debug: PropTypes__default.default.bool,
+  onClosePopup: PropTypes__default.default.func,
+  onOpenPopup: PropTypes__default.default.func
+};
+Popup.defaultProps = {
+  isFader: true,
+  isOpen: false,
+  isScrollOnOpen: true,
+  isSetFocusOnOpen: true,
+  popupQuerySelector: '#popup-global'
+};
+
+function PopupLoader(props) {
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: "popup-loading"
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "popup-loading__inner"
+  }, /*#__PURE__*/React__default.default.createElement(index$3.Loader, null)));
+}
+
+exports.Popup = Popup;
+exports.PopupLoader = PopupLoader;

package/dist/components/Profile.js

@@ -0,0 +1,99 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var fill = require('../constants/componentProps/fill.js');
+var index = require('./Avatar.js');
+var index$2 = require('./Text.js');
+var index$1 = require('./Title.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var useStyles = require('../useStyles-77c3b520.js');
+require('./Image.js');
+require('../constants/componentProps/borderColor.js');
+require('../constants/componentProps/horizontalContentAlign.js');
+require('../constants/componentProps/resizeMode.js');
+require('../constants/componentProps/shape.js');
+require('../constants/componentProps/verticalContentAlign.js');
+require('../constants/componentProps/width.js');
+require('lodash/camelCase');
+require('lodash/maxBy');
+require('lodash/upperFirst');
+require('../hooks/styleAttributes.js');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
+require('../constants/componentProps/size.js');
+require('../constants/componentProps/textColor.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('../constants/componentProps/textStyle.js');
+require('../constants/componentProps/textWeight.js');
+require('../constants/componentProps/textAlign.js');
+require('../constants/componentProps/textGradient.js');
+require('../constants/componentProps/titleSize.js');
+require('../constants/componentProps/type.js');
+require('../constants/componentProps/wrap.js');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function Profile(props) {
+  var avatarSrc = props.avatarSrc,
+    avatarSize = props.avatarSize,
+    children = props.children,
+    className = props.className,
+    before = props.before,
+    text = props.text,
+    set = props.set,
+    textSize = props.textSize,
+    textColor = props.textColor,
+    title = props.title,
+    titleSize = props.titleSize,
+    titleTextColor = props.titleTextColor,
+    after = props.after;
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'profile_shape_',
+    propsKey: 'shape'
+  });
+  var _useStyles = useStyles.useStyles(props),
+    profileStyles = _useStyles.styles;
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'profile', set && "profile_set_" + set, fillClass, shapeClass),
+    style: profileStyles
+  }, before && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "profile__before"
+  }, before), /*#__PURE__*/React__default.default.createElement(index.Avatar, {
+    className: "profile__avatar",
+    src: avatarSrc,
+    size: avatarSize
+  }), title && /*#__PURE__*/React__default.default.createElement(index$1.Title, {
+    className: "profile__title",
+    size: titleSize,
+    textColor: titleTextColor
+  }, title), text && /*#__PURE__*/React__default.default.createElement(index$2.Text, {
+    className: "profile__text",
+    size: textSize,
+    textColor: textColor
+  }, text), children, after && /*#__PURE__*/React__default.default.createElement("div", {
+    className: "profile__after"
+  }, after));
+}
+Profile.propTypes = {
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default)
+};
+
+exports.Profile = Profile;

package/dist/components/RadioButton.js

@@ -0,0 +1,71 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
+var clsx__default = /*#__PURE__*/_interopDefault(clsx);
+
+function RadioButton(props) {
+  var id = props.id,
+    className = props.className,
+    checked = props.checked,
+    onChange = props.onChange,
+    disabled = props.disabled;
+  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_',
+    propsKey: 'border'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'radio-button_shape_',
+    propsKey: 'shape'
+  });
+  var fillCheckedClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'radio-button_fill_checked_',
+    propsKey: 'fillChecked'
+  });
+  var fillCheckmarkClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'radio-button_fill_checkmark_',
+    propsKey: 'fillCheckmark'
+  });
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var fillDisableClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'radio-button_fill_disable_',
+    propsKey: 'fillDisable'
+  });
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'radio-button', fillCheckmarkClass, fillCheckedClass, fillClass, fillDisableClass, shapeClass, borderColorClass)
+  }, /*#__PURE__*/React__default.default.createElement("input", {
+    id: id,
+    type: "radio",
+    checked: checked,
+    disabled: disabled,
+    onChange: onChange,
+    className: "radio-button__button"
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: "radio-button__bg"
+  }, "\xA0"), /*#__PURE__*/React__default.default.createElement("div", {
+    className: "radio-button__mark"
+  }, "\xA0"));
+}
+RadioButton.propTypes = {
+  className: PropTypes__default.default.string
+};
+RadioButton.defaulProps = {
+  shape: 'circular'
+};
+
+exports.RadioButton = RadioButton;