@itcase/ui 1.0.43 → 1.0.45

package/dist/components/RangeSlider.js

@@ -6,7 +6,7 @@ var clsx = require('clsx');
 var fill = require('../constants/componentProps/fill.js');
 var shape = require('../constants/componentProps/shape.js');
 var width = require('../constants/componentProps/width.js');
-var useStyles = require('../useStyles-e4accb53.js');
+var useStyles = require('../hooks/useStyles.js');
 var useDeviceTargetClass = require('../hooks/useDeviceTargetClass.js');
 var Slider = require('rc-slider');
 require('lodash/camelCase');
@@ -26,59 +26,62 @@ var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var Slider__default = /*#__PURE__*/_interopDefault(Slider);
 
 function RangeSlider(props) {
-  var after = props.after,
-    before = props.before,
-    children = props.children,
-    className = props.className,
-    set = props.set,
-    disabled = props.disabled,
-    min = props.min,
-    max = props.max,
-    pushable = props.pushable,
-    range = props.range,
-    vertical = props.vertical,
-    value = props.value,
-    onChangeSlider = props.onChangeSlider;
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const {
+    after,
+    before,
+    children,
+    className,
+    set,
+    disabled,
+    min,
+    max,
+    pushable,
+    range,
+    vertical,
+    value,
+    onChangeSlider
+  } = props;
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var trackFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const trackFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'range-slider-track-fill_',
     propsKey: 'fillTrack'
   });
-  var railFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const railFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'range-slider-rail-fill_',
     propsKey: 'fillRail'
   });
-  var handleFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const handleFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'range-slider-handle-fill_',
     propsKey: 'fillHandle'
   });
-  var handleFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const handleFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'range-slider-handle-fill-hover_',
     propsKey: 'fillHandleHover'
   });
-  var handleDraggingFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const handleDraggingFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'range-slider-handle-dragging-fill_',
     propsKey: 'fillHandleDragging'
   });
-  var handleDraggingFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const handleDraggingFillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'range-slider-handle-dragging-fill-hover_',
     propsKey: 'fillHandleDraggingHover'
   });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'filter_shape_',
     propsKey: 'shape'
   });
-  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
-  var _useStyles = useStyles.useStyles(props),
-    rangeSliderStyles = _useStyles.styles;
+  const {
+    styles: rangeSliderStyles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'range-slider', set && "range-slider_set_" + set, fillClass, trackFillClass, railFillClass, handleFillClass, handleFillHoverClass, handleDraggingFillClass, handleDraggingFillHoverClass, shapeClass, widthClass),
+    className: clsx__default.default(className, 'range-slider', set && `range-slider_set_${set}`, fillClass, trackFillClass, railFillClass, handleFillClass, handleFillHoverClass, handleDraggingFillClass, handleDraggingFillHoverClass, shapeClass, widthClass),
     style: rangeSliderStyles
   }, before && /*#__PURE__*/React__default.default.createElement("div", {
     className: "range-slider__before"

package/dist/components/Scrollbar.js

@@ -11,10 +11,12 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 
 function Scrollbar(props) {
-  var children = props.children,
-    className = props.className,
-    scrollHeight = props.scrollHeight,
-    onScroll = props.onScroll;
+  const {
+    children,
+    className,
+    scrollHeight,
+    onScroll
+  } = props;
   return /*#__PURE__*/React__default.default.createElement(reactScrollbarsCustom.Scrollbar, {
     className: clsx__default.default('scrollbar', className),
     onScroll: onScroll,

package/dist/components/Search.js

@@ -7,7 +7,7 @@ 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 useStyles = require('../useStyles-e4accb53.js');
+var useStyles = require('../hooks/useStyles.js');
 var index$2 = require('./Scrollbar.js');
 require('react-inlinesvg');
 require('../constants/componentProps/iconSize.js');
@@ -39,43 +39,45 @@ 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,
-    size = props.size,
-    dataTour = props.dataTour,
-    iconAfter = props.iconAfter;
-    props.iconAfterBgFill;
-    var iconAfterFill = props.iconAfterFill,
-    iconAfterSize = props.iconAfterSize,
-    iconAfterStroke = props.iconAfterStroke,
-    iconBefore = props.iconBefore;
-    props.iconBeforeBgFill;
-    var iconBeforeFill = props.iconBeforeFill,
-    iconBeforeSize = props.iconBeforeSize,
-    iconBeforeStroke = props.iconBeforeStroke,
-    iconClear = props.iconClear;
-    props.iconClearBgFill;
-    var iconClearFill = props.iconClearFill,
-    iconClearSize = props.iconClearSize;
-    props.iconClearStroke;
-    var placeholder = props.placeholder,
-    type = props.type,
-    value = props.value,
-    onChange = props.onChange,
-    onClickClean = props.onClickClean,
-    onFocus = props.onFocus,
-    onKeyDown = props.onKeyDown;
+const SearchInput = /*#__PURE__*/React__default.default.forwardRef(function SearchInput(props, ref) {
+  const {
+    after,
+    before,
+    className,
+    size,
+    dataTour,
+    iconAfter,
+    iconAfterBgFill,
+    iconAfterFill,
+    iconAfterSize,
+    iconAfterStroke,
+    iconBefore,
+    iconBeforeBgFill,
+    iconBeforeFill,
+    iconBeforeSize,
+    iconBeforeStroke,
+    iconClear,
+    iconClearBgFill,
+    iconClearFill,
+    iconClearSize,
+    iconClearStroke,
+    placeholder,
+    type,
+    value,
+    onChange,
+    onClickClean,
+    onFocus,
+    onKeyDown
+  } = props;
 
   // const inputRef = useRef(null)
   // const [searchValue, setSearchValue] = useState('')
 
-  var onChangeSearchInput = React.useCallback(function (event) {
+  const onChangeSearchInput = React.useCallback(event => {
     // setSearchValue(event.target.value)
     onChange && onChange(event.target.value);
   }, [onChange]);
-  var onClickClearIcon = React.useCallback(function (event) {
+  const onClickClearIcon = React.useCallback(event => {
     event.stopPropagation();
     // setSearchValue('')
     onChange && onChange('');
@@ -91,74 +93,75 @@ var SearchInput = /*#__PURE__*/React__default.default.forwardRef(function Search
   //   setValue: setSearchValue,
   // })
 
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'search_shape_',
     propsKey: 'shape'
   });
-  var inputFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const inputFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'inputFill'
   });
-  var inputShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const inputShapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'search-input_shape_',
     propsKey: 'inputShape'
   });
-  var inputTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const inputTextSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text_size_',
     propsKey: 'inputTextSize'
   });
-  var inputWeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const inputWeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text-weight_',
     propsKey: 'inputTextWeight'
   });
-  var inputTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const inputTextColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text-color_',
     propsKey: 'inputTextColor'
   });
-  var inputTextStyleClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const inputTextStyleClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'text-style_',
     propsKey: 'inputTextStyle'
   });
-  var placeholderSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const placeholderSizeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     propsKey: 'placeholderTextSize'
   });
-  var placeholderWeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const placeholderWeightClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     propsKey: 'placeholderTextWeight'
   });
-  var placeholderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const placeholderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     propsKey: 'placeholderTextColor'
   });
-  var placeholderStyleClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const placeholderStyleClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     propsKey: 'placeholderTextStyle'
   });
-  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'width_',
     propsKey: 'width'
   });
-  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'borderColor'
   });
-  var borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_hover_',
     propsKey: 'borderHover'
   });
-  var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-width_',
     propsKey: 'borderWidth'
   });
-  var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-type_',
     propsKey: 'borderType'
   });
-  var _useStyles = useStyles.useStyles(props),
-    searchInputStyles = _useStyles.styles;
+  const {
+    styles: searchInputStyles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement("label", {
-    className: clsx__default.default(className, 'search-input', shapeClass, fillClass, widthClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, size && "search-input_size_" + size, type && "search-input_type_" + type),
+    className: clsx__default.default(className, 'search-input', shapeClass, fillClass, widthClass, borderColorClass, borderColorHoverClass, borderWidthClass, borderTypeClass, size && `search-input_size_${size}`, type && `search-input_type_${type}`),
     "data-tour": dataTour,
     style: searchInputStyles
   }, before, iconBefore && /*#__PURE__*/React__default.default.createElement(index.Icon, {
@@ -245,23 +248,25 @@ SearchInput.defaultProps = {
   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, {
+const SearchResult = /*#__PURE__*/React__default.default.forwardRef(function SearchResult(props, ref) {
+  const {
+    children,
+    className,
+    after,
+    before,
+    scrollHeight,
+    type
+  } = props;
+  const 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)
+    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'
+    scrollHeight: scrollHeight ? `${scrollHeight}px` : '300px'
   }, children), after));
 });
 SearchResult.propTypes = {

package/dist/components/Segmented.js

@@ -11,7 +11,7 @@ require('../constants/componentProps/textColorHover.js');
 require('../constants/componentProps/size.js');
 require('../constants/componentProps/textStyle.js');
 require('../constants/componentProps/textWeight.js');
-require('../useStyles-e4accb53.js');
+require('../hooks/useStyles.js');
 require('lodash/camelCase');
 require('lodash/maxBy');
 require('lodash/upperFirst');
@@ -27,98 +27,92 @@ 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,
-    type = props.type,
-    segments = props.segments,
-    activeSegment = props.activeSegment,
-    setActiveSegment = props.setActiveSegment,
-    size = props.size,
-    labelTextColor = props.labelTextColor,
-    labelTextActiveColor = props.labelTextActiveColor,
-    labelTextSize = props.labelTextSize;
-  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) {
+const Segmented = /*#__PURE__*/React__default.default.forwardRef((props, ref) => {
+  const {
+    name,
+    className,
+    type,
+    segments,
+    activeSegment,
+    setActiveSegment,
+    size,
+    labelTextColor,
+    labelTextActiveColor,
+    labelTextSize
+  } = props;
+  const controlRef = React.useRef(null);
+  const segmentsRefs = React.useMemo(() => new Map(segments.map(item => [item.value, /*#__PURE__*/React.createRef()])), [segments]);
+  React.useEffect(() => {
+    let offsetWidth = 0;
+    let offsetLeft = 0;
+    const activeSegmentRef = segmentsRefs.get(activeSegment.value);
+    if (activeSegmentRef?.current) {
       offsetWidth = activeSegmentRef.current.offsetWidth;
       offsetLeft = activeSegmentRef.current.offsetLeft;
     }
-    controlRef.current.style.setProperty('--segmented-active-width', offsetWidth + "px");
+    controlRef.current.style.setProperty('--segmented-active-width', `${offsetWidth}px`);
     // controlRef.current.style.setProperty('--segmented-active-x-pos', `${offsetLeft - 2}px`)
-    controlRef.current.style.setProperty('--segmented-active-x-pos', offsetLeft + "px");
+    controlRef.current.style.setProperty('--segmented-active-x-pos', `${offsetLeft}px`);
   }, [activeSegment, segmentsRefs]);
-  var indicatorFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const indicatorFillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'indicatorFill'
   });
-  var borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderColorClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-color_',
     propsKey: 'borderColor'
   });
-  var borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderWidthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-width_',
     propsKey: 'borderWidth'
   });
-  var borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const borderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border-type_',
     propsKey: 'borderType'
   });
-  var shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const shapeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'segmented_shape_',
     propsKey: 'shape'
   });
-  var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
   });
-  var widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const widthClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'segmented_width_',
     propsKey: 'width'
   });
-  var fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+  const fillHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_hover_',
     propsKey: 'fillHover'
   });
   return /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default(className, 'segmented', shapeClass, fillClass, widthClass, size && "segmented_size_" + size, type && "segmented_type_" + type),
+    className: clsx__default.default(className, 'segmented', shapeClass, fillClass, widthClass, size && `segmented_size_${size}`, type && `segmented_type_${type}`),
     ref: controlRef
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: "segmented__wrapper"
   }, /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('segmented__wrapper-inner', borderColorClass, borderWidthClass, borderTypeClass)
-  }, segments == null ? void 0 : segments.map(function (item, i) {
-    return /*#__PURE__*/React__default.default.createElement("div", {
-      className: clsx__default.default('segmented__item', fillHoverClass, 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: clsx__default.default('segmented__item-label'),
-      htmlFor: item.label
-    }, /*#__PURE__*/React__default.default.createElement(index.Text, {
-      className: "segmented__item-label-text",
-      textColor: item.value === activeSegment.value ? labelTextActiveColor : labelTextColor,
-      size: labelTextSize
-    }, item.label)));
-  }), /*#__PURE__*/React__default.default.createElement("div", {
+  }, segments?.map((item, i) => /*#__PURE__*/React__default.default.createElement("div", {
+    className: clsx__default.default('segmented__item', fillHoverClass, 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: () => setActiveSegment(item)
+  }), /*#__PURE__*/React__default.default.createElement("label", {
+    className: clsx__default.default('segmented__item-label'),
+    htmlFor: item.label
+  }, /*#__PURE__*/React__default.default.createElement(index.Text, {
+    className: "segmented__item-label-text",
+    textColor: item.value === activeSegment.value ? labelTextActiveColor : labelTextColor,
+    size: labelTextSize
+  }, item.label)))), /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('segmented__indicator', indicatorFillClass)
   }, "\xA0"))));
 });