@itcase/ui 1.0.1

package/dist/components/Search.js

@@ -0,0 +1,260 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+require('@ruliad-engr/common');
+var fill = require('../constants/componentProps/fill.js');
+var index = require('./Icon.js');
+var index$1 = require('./Text.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var index$2 = require('./Scrollbar.js');
+require('react-inlinesvg');
+require('../constants/componentProps/iconSize.js');
+require('../constants/componentProps/shape.js');
+require('../constants/componentProps/strokeColor.js');
+require('./Link.js');
+require('../useStyles-77c3b520.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('../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('lodash/castArray');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+require('react-dom');
+
+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);
+
+var SearchInput = /*#__PURE__*/React__default.default.forwardRef(function SearchInput(props, ref) {
+  var after = props.after,
+    before = props.before,
+    className = props.className,
+    iconAfter = props.iconAfter,
+    iconAfterBgFill = props.iconAfterBgFill,
+    iconAfterFill = props.iconAfterFill,
+    iconAfterSize = props.iconAfterSize,
+    iconAfterStroke = props.iconAfterStroke,
+    iconBefore = props.iconBefore,
+    iconBeforeBgFill = props.iconBeforeBgFill,
+    iconBeforeFill = props.iconBeforeFill,
+    iconBeforeSize = props.iconBeforeSize,
+    iconBeforeStroke = props.iconBeforeStroke,
+    iconClear = props.iconClear,
+    iconClearBgFill = props.iconClearBgFill,
+    iconClearFill = props.iconClearFill,
+    iconClearSize = props.iconClearSize,
+    iconClearStroke = props.iconClearStroke,
+    placeholder = props.placeholder,
+    type = props.type,
+    value = props.value,
+    onChange = props.onChange,
+    onClickClean = props.onClickClean,
+    onFocus = props.onFocus,
+    onKeyDown = props.onKeyDown;
+
+  // const inputRef = useRef(null)
+  // const [searchValue, setSearchValue] = useState('')
+
+  var onChangeSearchInput = React.useCallback(function (event) {
+    // setSearchValue(event.target.value)
+    onChange && onChange(event.target.value);
+  }, [onChange]);
+  var onClickClearIcon = React.useCallback(function (event) {
+    event.stopPropagation();
+    // setSearchValue('')
+    onChange && onChange('');
+    if (onClickClean) {
+      onClickClean();
+    }
+  }, [onChange, onClickClean]);
+
+  // TODO:
+  // useStateAsRef(ref, {
+  //   input: inputRef.current,
+  //   value: searchValue,
+  //   setValue: setSearchValue,
+  // })
+
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'search_shape_',
+    propsKey: 'shape'
+  });
+  var inputFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'inputFill'
+  });
+  var inputShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'search-input_shape_',
+    propsKey: 'inputShape'
+  });
+  var inputTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text_size_',
+    propsKey: 'inputTextSize'
+  });
+  var inputWeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-weight_',
+    propsKey: 'inputTextWeight'
+  });
+  var inputTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-color_',
+    propsKey: 'inputTextColor'
+  });
+  var inputTextStyleClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'text-style_',
+    propsKey: 'inputTextStyle'
+  });
+  var placeholderSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'placeholderTextSize'
+  });
+  var placeholderWeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'placeholderTextWeight'
+  });
+  var placeholderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'placeholderTextColor'
+  });
+  var placeholderStyleClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    propsKey: 'placeholderTextStyle'
+  });
+  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'width_',
+    propsKey: 'width'
+  });
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'search-input', shapeClass, fillClass, widthClass, type && "search-input_type_" + type)
+  }, before, iconBefore && /*#__PURE__*/React__default.default.createElement(index.Icon, {
+    className: "search-input__icon search-input__icon-before",
+    fill: iconBeforeFill,
+    size: iconBeforeSize,
+    bgFill: iconBeforeBgFill,
+    stroke: iconBeforeStroke,
+    SvgImage: iconBefore
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('search-input__wrapper', inputFillClass, inputShapeClass)
+  }, /*#__PURE__*/React__default.default.createElement("input", {
+    className: clsx__default.default('search-input__value', (inputTextSizeClass || inputWeightClass || inputTextColorClass || inputTextStyleClass) && 'text', inputTextSizeClass, inputWeightClass, inputTextColorClass, inputTextStyleClass),
+    required: true,
+    type: "text",
+    value: value,
+    ref: ref,
+    onFocus: onFocus,
+    onChange: onChangeSearchInput,
+    onKeyDown: onKeyDown
+  }), /*#__PURE__*/React__default.default.createElement("div", {
+    className: "search-input__placeholder"
+  }, /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+    className: clsx__default.default('search-input__placeholder-value'),
+    size: placeholderSizeClass,
+    textWeight: placeholderWeightClass,
+    textStyle: placeholderStyleClass,
+    textColor: placeholderColorClass
+  }, placeholder || 'Search')), value && /*#__PURE__*/React__default.default.createElement(index.Icon, {
+    className: "search-input__clear",
+    fill: iconClearFill,
+    size: iconClearSize,
+    bgFill: iconClearBgFill,
+    stroke: iconClearStroke,
+    SvgImage: iconClear,
+    onClick: onClickClearIcon
+  })), iconAfter && /*#__PURE__*/React__default.default.createElement(index.Icon, {
+    className: "search-input__icon search-input__icon-after",
+    fill: iconAfterFill,
+    size: iconAfterSize,
+    bgFill: iconAfterBgFill,
+    stroke: iconAfterStroke,
+    SvgImage: iconAfter
+  }), after);
+});
+SearchInput.DEFAULT_REF_STATE = {
+  input: null
+  // value: '',
+  // setValue: () => {},
+};
+
+SearchInput.propTypes = {
+  after: PropTypes__default.default.any,
+  before: PropTypes__default.default.any,
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  fill: PropTypes__default.default.oneOf(fill.default),
+  fillDesktop: PropTypes__default.default.oneOf(fill.default),
+  fillMobile: PropTypes__default.default.oneOf(fill.default),
+  fillTablet: PropTypes__default.default.oneOf(fill.default),
+  iconAfter: PropTypes__default.default.any,
+  iconAfterBgFill: PropTypes__default.default.any,
+  iconAfterFill: PropTypes__default.default.any,
+  iconAfterSize: PropTypes__default.default.any,
+  iconAfterStroke: PropTypes__default.default.any,
+  iconBefore: PropTypes__default.default.any,
+  iconBeforeBgFill: PropTypes__default.default.any,
+  iconBeforeFill: PropTypes__default.default.any,
+  iconBeforeSize: PropTypes__default.default.any,
+  iconBeforeStroke: PropTypes__default.default.any,
+  iconClear: PropTypes__default.default.any,
+  iconClearBgFill: PropTypes__default.default.any,
+  iconClearFill: PropTypes__default.default.any,
+  iconClearSize: PropTypes__default.default.any,
+  iconClearStroke: PropTypes__default.default.any,
+  inputTextSize: PropTypes__default.default.string,
+  placeholder: PropTypes__default.default.string,
+  placeholderTextColor: PropTypes__default.default.string,
+  type: PropTypes__default.default.string,
+  value: PropTypes__default.default.string,
+  onChange: PropTypes__default.default.func,
+  onClickClean: PropTypes__default.default.func,
+  onFocus: PropTypes__default.default.func,
+  onKeyDown: PropTypes__default.default.func
+};
+SearchInput.defaultProps = {
+  placeholderTextSize: 'm',
+  inputTextSize: 'm'
+};
+
+var SearchResult = /*#__PURE__*/React__default.default.forwardRef(function SearchResult(props, ref) {
+  var children = props.children,
+    className = props.className,
+    after = props.after,
+    before = props.before,
+    scrollHeight = props.scrollHeight,
+    type = props.type;
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'search-result', fillClass, type && "search-result_type_" + type)
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "search-result__wrapper"
+  }, before, React__default.default.Children.toArray(children).filter(Boolean).length && /*#__PURE__*/React__default.default.createElement(index$2.Scrollbar, {
+    scrollHeight: scrollHeight ? scrollHeight + "px" : '300px'
+  }, children), after));
+});
+SearchResult.propTypes = {
+  after: PropTypes__default.default.any,
+  before: PropTypes__default.default.any,
+  children: PropTypes__default.default.any,
+  scrollHeight: PropTypes__default.default.string,
+  className: PropTypes__default.default.string,
+  type: PropTypes__default.default.string
+};
+
+exports.SearchInput = SearchInput;
+exports.SearchResult = SearchResult;

package/dist/components/Segmented.js

@@ -0,0 +1,77 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+
+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);
+
+var Segmented = /*#__PURE__*/React__default.default.forwardRef(function (props, ref) {
+  var name = props.name,
+    className = props.className,
+    fill = props.fill,
+    type = props.type,
+    segments = props.segments,
+    activeSegment = props.activeSegment,
+    setActiveSegment = props.setActiveSegment;
+  var controlRef = React.useRef(null);
+  var segmentsRefs = React.useMemo(function () {
+    return new Map(segments.map(function (item) {
+      return [item.value, /*#__PURE__*/React.createRef()];
+    }));
+  }, [segments]);
+  React.useEffect(function () {
+    var offsetWidth = 0;
+    var offsetLeft = 0;
+    var activeSegmentRef = segmentsRefs.get(activeSegment.value);
+    if (activeSegmentRef != null && activeSegmentRef.current) {
+      offsetWidth = activeSegmentRef.current.offsetWidth;
+      offsetLeft = activeSegmentRef.current.offsetLeft;
+    }
+    controlRef.current.style.setProperty('--highlight-width', offsetWidth + "px");
+    controlRef.current.style.setProperty('--highlight-x-pos', offsetLeft - 2 + "px");
+  }, [activeSegment, segmentsRefs]);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'segmented', type && "segmented_type_" + type, fill && "fill_" + fill.replace(/([A-Z])/g, '-$1').toLowerCase()),
+    ref: controlRef
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "segmented__wrapper"
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "segmented__wrapper-inner"
+  }, segments == null ? void 0 : segments.map(function (item, i) {
+    return /*#__PURE__*/React__default.default.createElement("div", {
+      className: "segmented__item " + (item.value === activeSegment.value ? 'segmented__item_active' : ''),
+      key: item.value,
+      ref: segmentsRefs.get(item.value)
+    }, /*#__PURE__*/React__default.default.createElement("input", {
+      checked: item.value === activeSegment.value,
+      className: "segmented__item-radio",
+      id: item.label,
+      name: name,
+      type: "radio",
+      value: item.value,
+      onChange: function onChange() {
+        return setActiveSegment(item);
+      }
+    }), /*#__PURE__*/React__default.default.createElement("label", {
+      className: "segmented__item-label",
+      htmlFor: item.label
+    }, item.label));
+  }))));
+});
+Segmented.displayName = 'Segmented';
+Segmented.propTypes = {
+  activeSegment: PropTypes__default.default.object,
+  className: PropTypes__default.default.string,
+  fill: PropTypes__default.default.string,
+  name: PropTypes__default.default.string,
+  segments: PropTypes__default.default.array,
+  setActiveSegment: PropTypes__default.default.func,
+  type: PropTypes__default.default.string
+};
+
+exports.Segmented = Segmented;

package/dist/components/Select.js

@@ -0,0 +1,49 @@
+'use strict';
+
+var SelectContainer = require('../SelectContainer-e2544642.js');
+require('react');
+require('prop-types');
+require('clsx');
+require('react-select');
+require('../objectWithoutProperties-ea190611.js');
+require('react-dom');
+require('../hooks/useDeviceTargetClass.js');
+require('lodash/castArray');
+require('lodash/camelCase');
+require('../context/UIContext.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('./Icon.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('lodash/maxBy');
+require('lodash/upperFirst');
+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('./Text.js');
+require('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.js');
+
+
+
+exports.Select = SelectContainer.SelectContainer;
+exports.SelectClearIndicator = SelectContainer.SelectClearIndicator;
+exports.SelectControl = SelectContainer.SelectControl;
+exports.SelectDropdownIndicator = SelectContainer.SelectDropdownIndicator;
+exports.SelectInput = SelectContainer.SelectInput;
+exports.SelectMenu = SelectContainer.SelectMenu;
+exports.SelectOption = SelectContainer.SelectOption;
+exports.SelectPlaceholder = SelectContainer.SelectPlaceholder;
+exports.SelectSingleValue = SelectContainer.SelectSingleValue;
+exports.SelectValueContainer = SelectContainer.SelectValueContainer;

package/dist/components/SiteMenu.js

@@ -0,0 +1,137 @@
+'use strict';
+
+var React = require('react');
+var PropTypes = require('prop-types');
+var clsx = require('clsx');
+var UIContext = require('../context/UIContext.js');
+var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
+var index = require('./Icon.js');
+var index$1 = require('./Text.js');
+require('../hooks/useMediaQueries.js');
+require('react-responsive');
+require('lodash/castArray');
+require('lodash/camelCase');
+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('lodash/maxBy');
+require('lodash/upperFirst');
+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('../constants/componentProps/textColorActive.js');
+require('../constants/componentProps/textColorHover.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 SiteMenu(props) {
+  var children = props.children,
+    className = props.className,
+    closeText = props.closeText,
+    closeTextSize = props.closeTextSize,
+    closeTextColor = props.closeTextColor,
+    closeTextColorHover = props.closeTextColorHover,
+    onClose = props.onClose,
+    iconCloseFill = props.iconCloseFill,
+    iconCloseSize = props.iconCloseSize,
+    iconCloseBgFill = props.iconCloseBgFill,
+    iconCloseStroke = props.iconCloseStroke,
+    iconClose = props.iconClose;
+  var _useSiteMenuContext = UIContext.useSiteMenuContext(),
+    isSiteMenuOpen = _useSiteMenuContext.isSiteMenuOpen,
+    setIsSiteMenuOpen = _useSiteMenuContext.setIsSiteMenuOpen;
+  var onClickClose = React.useCallback(function (event) {
+    setIsSiteMenuOpen(false);
+    onClose && onClose(event);
+  }, [onClose]);
+  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'fill_',
+    propsKey: 'fill'
+  });
+
+  // TODO: dont delete!
+  // const onClickHeaderLink = useCallback((event) => {
+  //   // simulate a click on a link
+  //   event.stopPropagation()
+  //   event.preventDefault()
+
+  //   // save anchor in history
+  //   history.pushState(
+  //     location.href,
+  //     event.target.getAttribute('href'),
+  //     `${location.origin}/${event.target.getAttribute('href')}`
+  //   )
+
+  //   // scroll to anchor
+  //   document.querySelector(event.target.getAttribute('href')).scrollIntoView({
+  //     behavior: 'smooth',
+  //   })
+  // }, [])
+
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'site-menu', fillClass, isSiteMenuOpen && 'site-menu_state_visible', !isSiteMenuOpen && 'site-menu_state_hidden')
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "site-menu__wrapper"
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "site-menu__close"
+  }, iconClose ? /*#__PURE__*/React__default.default.createElement(index.Icon, {
+    fill: iconCloseFill,
+    size: iconCloseSize,
+    bgFill: iconCloseBgFill,
+    stroke: iconCloseStroke,
+    SvgImage: iconClose,
+    onClick: onClickClose
+  }) : /*#__PURE__*/React__default.default.createElement(index$1.Text, {
+    size: closeTextSize,
+    textColor: closeTextColor,
+    textColorHover: closeTextColorHover,
+    onClick: onClickClose
+  }, closeText)), /*#__PURE__*/React__default.default.createElement("div", {
+    className: "site-menu__items"
+  }, children)));
+}
+SiteMenu.propTypes = {
+  children: PropTypes__default.default.any,
+  close: PropTypes__default.default.any,
+  isOpen: PropTypes__default.default.bool,
+  onClose: PropTypes__default.default.func
+};
+
+function SiteMenuButton(props) {
+  var className = props.className,
+    onClick = props.onClick,
+    children = props.children,
+    text = props.text;
+  var _useSiteMenuContext = UIContext.useSiteMenuContext(),
+    setIsSiteMenuOpen = _useSiteMenuContext.setIsSiteMenuOpen;
+  var onClickButton = React.useCallback(function (event) {
+    setIsSiteMenuOpen(true);
+    onClick && onClick(event);
+  }, []);
+  return /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default(className, 'site-menu__button'),
+    onClick: onClickButton
+  }, children || text);
+}
+SiteMenuButton.propTypes = {
+  children: PropTypes__default.default.any,
+  className: PropTypes__default.default.string,
+  text: PropTypes__default.default.string,
+  onClick: PropTypes__default.default.func
+};
+
+exports.SiteMenu = SiteMenu;
+exports.SiteMenuButton = SiteMenuButton;