@itcase/ui 1.1.8 → 1.1.10

package/dist/DropdownItem-Dgf0LRhx.js

@@ -1,644 +0,0 @@
-import React__default, { useRef, useState, useCallback, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { useDeviceTargetClass } from './hooks/useDeviceTargetClass.js';
-import { useStyles } from './hooks/useStyles.js';
-import { D as Divider } from './Divider-BlBwMHgl.js';
-import { L as Link } from './Link-ByBzBRDH.js';
-import { T as Text } from './Text-BcGbRc14.js';
-import fillProps from './constants/componentProps/fill.js';
-import shapeProps from './constants/componentProps/shape.js';
-import typeProps from './constants/componentProps/type.js';
-import underlineProps from './constants/componentProps/underline.js';
-import sizeProps from './constants/componentProps/size.js';
-
-function Dropdown(props) {
-  const {
-    animationClose,
-    animationOpen,
-    children,
-    className,
-    id,
-    set,
-    isOpen,
-    setIsOpen
-  } = props;
-  const dropdownRef = useRef(null);
-
-  // const [isOpen, setIsOpen] = useState(false)
-  const [animationState, setAnimationState] = useState({
-    className: ''
-  });
-  const onAnimationEnd = useCallback(event => {
-    // When component is change his visibility(display) in DOM,
-    // animation of close can run unnecessary on showing element.
-    // const dropdownElement = dropdownRef.current
-    setAnimationState(prevState => ({
-      className: isOpen ? prevState.className : ''
-    }));
-  }, [isOpen]);
-  useEffect(() => {
-    setAnimationState(prevState => ({
-      className: isOpen ? animationOpen : animationClose
-    }));
-  }, [isOpen]);
-
-  // Close dropdown by click outside
-  useEffect(() => {
-    // Add a handler to keep track of the click target.
-    function onClickWindow(event) {
-      const dropdownElement = dropdownRef.current;
-      if (dropdownElement) {
-        // Is event target inside of dropdown element
-        const isContainsTarget = dropdownElement.contains(event.target);
-        // Is dropdown element has "open" class
-        const hasOpenClass = dropdownElement.classList.contains(animationOpen);
-        if (!isContainsTarget && hasOpenClass) {
-          // Trigger close event with animation
-          // dropdownElement.click() - trigger "onClickWindow" again
-          setIsOpen(false);
-        }
-      }
-    }
-    // Add event listener for current dropdown on first render
-    window.addEventListener('click', onClickWindow);
-    return () => {
-      // Remove event listener for current dropdown on unmount
-      window.removeEventListener('click', onClickWindow);
-    };
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const fillClass = useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'fill'
-  });
-  const fillHoverClass = useDeviceTargetClass(props, {
-    prefix: 'fill_hover_',
-    propsKey: 'fillHover'
-  });
-  const shapeClass = useDeviceTargetClass(props, {
-    prefix: 'dropdown_shape_',
-    propsKey: 'shape'
-  });
-  const elevationClass = useDeviceTargetClass(props, {
-    prefix: 'elevation_',
-    propsKey: 'elevation'
-  });
-  const alignmentClass = useDeviceTargetClass(props, {
-    prefix: 'alignment_',
-    propsKey: 'alignment'
-  });
-  const {
-    styles
-  } = useStyles(props);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: clsx(className, 'dropdown', alignmentClass, set && `dropdown_set_${set}`, shapeClass, elevationClass, isOpen ? 'dropdown_state_open' : 'dropdown_state_close', animationState.className),
-    ref: dropdownRef,
-    style: styles
-  }, children && /*#__PURE__*/React__default.createElement("div", {
-    className: clsx('dropdown__wrapper', fillClass, fillHoverClass)
-    // Add "onAnimationEnd" only for wrapper for ignore dropdown button
-    ,
-    onAnimationEnd: onAnimationEnd
-  }, children));
-}
-Dropdown.propTypes = {
-  className: PropTypes.string,
-  isCloseByClickOutside: PropTypes.bool
-};
-Dropdown.defaultProps = {
-  animationOpen: 'dropdown_animation_open',
-  animationClose: 'dropdown_animation_close',
-  set: 'normal'
-};
-Dropdown.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "Dropdown",
-  "props": {
-    "animationOpen": {
-      "defaultValue": {
-        "value": "'dropdown_animation_open'",
-        "computed": false
-      },
-      "required": false
-    },
-    "animationClose": {
-      "defaultValue": {
-        "value": "'dropdown_animation_close'",
-        "computed": false
-      },
-      "required": false
-    },
-    "set": {
-      "defaultValue": {
-        "value": "'normal'",
-        "computed": false
-      },
-      "required": false
-    },
-    "className": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "isCloseByClickOutside": {
-      "description": "",
-      "type": {
-        "name": "bool"
-      },
-      "required": false
-    }
-  }
-};
-
-function DropdownItem(props) {
-  const {
-    isActive,
-    isHover,
-    appearance,
-    after,
-    before,
-    children,
-    className,
-    href,
-    link,
-    set,
-    rel,
-    desc,
-    descTextGradient,
-    descTextSize,
-    descTextWeight,
-    descTextColor,
-    descTextWrap,
-    descTextColorHover,
-    descTextStyle,
-    label,
-    target,
-    labelTextColorActive,
-    labelTextGradient,
-    labelTextSize,
-    labelTextWeight,
-    labelTextColor,
-    labelTextWrap,
-    labelTextColorHover,
-    labelTextStyle,
-    showDivider,
-    dividerDirection,
-    dividerFill,
-    dividerSize,
-    underline,
-    onClick,
-    onMouseEnter
-  } = props;
-  const alignDirectionClass = useDeviceTargetClass(props, {
-    prefix: 'align_',
-    propsKey: 'alignDirection'
-  });
-  const alignClass = useDeviceTargetClass(props, {
-    prefix: 'align_',
-    propsKey: 'align'
-  });
-  const directionClass = useDeviceTargetClass(props, {
-    prefix: 'dropdown__item_direction_',
-    propsKey: 'direction'
-  });
-  const fillClass = useDeviceTargetClass(props, {
-    prefix: 'fill_',
-    propsKey: 'fill'
-  });
-  const fillHoverClass = useDeviceTargetClass(props, {
-    prefix: 'fill_hover_',
-    propsKey: 'fillHover'
-  });
-  const fillActiveClass = useDeviceTargetClass(props, {
-    prefix: 'fill_active_',
-    propsKey: 'fillActive'
-  });
-  const fillActiveHoverClass = useDeviceTargetClass(props, {
-    prefix: 'fill_active_hover_',
-    propsKey: 'fillActiveHover'
-  });
-  const fillDisabledClass = useDeviceTargetClass(props, {
-    prefix: 'fill_disabled_',
-    propsKey: 'fillDisabled'
-  });
-  const linkFillClass = useDeviceTargetClass(props, {
-    propsKey: 'linkFill'
-  });
-  const sizeClass = useDeviceTargetClass(props, {
-    prefix: 'dropdown__item_size_',
-    propsKey: 'size'
-  });
-  const shapeClass = useDeviceTargetClass(props, {
-    prefix: 'dropdown__item_shape_',
-    propsKey: 'shape'
-  });
-  const justifyContentClass = useDeviceTargetClass(props, {
-    prefix: 'dropdown__item_justify-content_',
-    propsKey: 'justifyContent'
-  });
-  const typeClass = useDeviceTargetClass(props, {
-    prefix: 'dropdown__item_type_',
-    propsKey: 'type'
-  });
-  const widthClass = useDeviceTargetClass(props, {
-    prefix: 'width_',
-    propsKey: 'width'
-  });
-  const {
-    styles: dropdownItem
-  } = useStyles(props);
-  return /*#__PURE__*/React__default.createElement("div", {
-    className: clsx('dropdown__item', isActive && 'dropdown__item_state_active', isHover && 'dropdown__item_state_hover', directionClass, className, fillClass, fillHoverClass, fillActiveClass, fillActiveHoverClass, fillDisabledClass, sizeClass, shapeClass, typeClass, widthClass, onClick && 'cursor_type_pointer', set && `dropdown__item_set_${set}`, justifyContentClass),
-    style: dropdownItem,
-    onClick: onClick,
-    onMouseEnter: onMouseEnter
-  }, /*#__PURE__*/React__default.createElement(Link, {
-    href: link || href,
-    className: clsx('dropdown__item-link', alignDirectionClass, alignClass),
-    underline: underline,
-    fill: linkFillClass,
-    target: target,
-    rel: rel
-  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, before, children || /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label && /*#__PURE__*/React__default.createElement(Text, {
-    className: "dropdown__item-label",
-    textColorActive: isActive && labelTextColorActive,
-    textGradient: labelTextGradient,
-    size: labelTextSize,
-    textWeight: labelTextWeight,
-    textColor: labelTextColor,
-    textWrap: labelTextWrap,
-    textColorHover: labelTextColorHover,
-    textStyle: labelTextStyle
-  }, label), desc && /*#__PURE__*/React__default.createElement(Text, {
-    className: "dropdown__item-desc",
-    textGradient: descTextGradient,
-    size: descTextSize,
-    textWeight: descTextWeight,
-    textColor: descTextColor,
-    textWrap: descTextWrap,
-    textColorHover: descTextColorHover,
-    textStyle: descTextStyle
-  }, desc)), after)), showDivider && /*#__PURE__*/React__default.createElement(Divider, {
-    direction: dividerDirection,
-    fill: dividerFill,
-    size: dividerSize,
-    width: "fill"
-  }));
-}
-DropdownItem.propTypes = {
-  after: PropTypes.any,
-  before: PropTypes.any,
-  children: PropTypes.any,
-  className: PropTypes.string,
-  desc: PropTypes.string,
-  fill: PropTypes.oneOf(fillProps),
-  fillDesktop: PropTypes.oneOf(fillProps),
-  fillMobile: PropTypes.oneOf(fillProps),
-  fillTablet: PropTypes.oneOf(fillProps),
-  linkFill: PropTypes.oneOf(fillProps),
-  linkFillDesktop: PropTypes.oneOf(fillProps),
-  linkFillMobile: PropTypes.oneOf(fillProps),
-  linkFillTablet: PropTypes.oneOf(fillProps),
-  isActive: PropTypes.bool,
-  label: PropTypes.string,
-  onClick: PropTypes.func,
-  onMouseEnter: PropTypes.func,
-  size: PropTypes.oneOf(sizeProps),
-  sizeDesktop: PropTypes.oneOf(sizeProps),
-  sizeMobile: PropTypes.oneOf(sizeProps),
-  sizeTablet: PropTypes.oneOf(sizeProps),
-  LinkComponent: PropTypes.any,
-  href: PropTypes.string,
-  link: PropTypes.string,
-  target: PropTypes.string,
-  rel: PropTypes.string,
-  shape: PropTypes.oneOf(shapeProps),
-  shapeDesktop: PropTypes.oneOf(shapeProps),
-  shapeMobile: PropTypes.oneOf(shapeProps),
-  shapeTablet: PropTypes.oneOf(shapeProps),
-  type: PropTypes.oneOf(typeProps),
-  typeDesktop: PropTypes.oneOf(typeProps),
-  typeMobile: PropTypes.oneOf(typeProps),
-  typeTablet: PropTypes.oneOf(typeProps),
-  underline: PropTypes.oneOf(underlineProps)
-};
-DropdownItem.defaultProps = {
-  size: 'm',
-  LinkComponent: 'a',
-  direction: 'horizontal'
-};
-DropdownItem.__docgenInfo = {
-  "description": "",
-  "methods": [],
-  "displayName": "DropdownItem",
-  "props": {
-    "size": {
-      "defaultValue": {
-        "value": "'m'",
-        "computed": false
-      },
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "sizeProps"
-      },
-      "required": false
-    },
-    "LinkComponent": {
-      "defaultValue": {
-        "value": "'a'",
-        "computed": false
-      },
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "direction": {
-      "defaultValue": {
-        "value": "'horizontal'",
-        "computed": false
-      },
-      "required": false
-    },
-    "after": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "before": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "children": {
-      "description": "",
-      "type": {
-        "name": "any"
-      },
-      "required": false
-    },
-    "className": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "desc": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "fill": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
-      },
-      "required": false
-    },
-    "fillDesktop": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
-      },
-      "required": false
-    },
-    "fillMobile": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
-      },
-      "required": false
-    },
-    "fillTablet": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
-      },
-      "required": false
-    },
-    "linkFill": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
-      },
-      "required": false
-    },
-    "linkFillDesktop": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
-      },
-      "required": false
-    },
-    "linkFillMobile": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
-      },
-      "required": false
-    },
-    "linkFillTablet": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "fillProps"
-      },
-      "required": false
-    },
-    "isActive": {
-      "description": "",
-      "type": {
-        "name": "bool"
-      },
-      "required": false
-    },
-    "label": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "onClick": {
-      "description": "",
-      "type": {
-        "name": "func"
-      },
-      "required": false
-    },
-    "onMouseEnter": {
-      "description": "",
-      "type": {
-        "name": "func"
-      },
-      "required": false
-    },
-    "sizeDesktop": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "sizeProps"
-      },
-      "required": false
-    },
-    "sizeMobile": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "sizeProps"
-      },
-      "required": false
-    },
-    "sizeTablet": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "sizeProps"
-      },
-      "required": false
-    },
-    "href": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "link": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "target": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "rel": {
-      "description": "",
-      "type": {
-        "name": "string"
-      },
-      "required": false
-    },
-    "shape": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "shapeProps"
-      },
-      "required": false
-    },
-    "shapeDesktop": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "shapeProps"
-      },
-      "required": false
-    },
-    "shapeMobile": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "shapeProps"
-      },
-      "required": false
-    },
-    "shapeTablet": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "shapeProps"
-      },
-      "required": false
-    },
-    "type": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "typeProps"
-      },
-      "required": false
-    },
-    "typeDesktop": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "typeProps"
-      },
-      "required": false
-    },
-    "typeMobile": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "typeProps"
-      },
-      "required": false
-    },
-    "typeTablet": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "typeProps"
-      },
-      "required": false
-    },
-    "underline": {
-      "description": "",
-      "type": {
-        "name": "enum",
-        "computed": true,
-        "value": "underlineProps"
-      },
-      "required": false
-    }
-  }
-};
-
-export { Dropdown as D, DropdownItem as a };