@zohodesk/components 1.0.0-alpha-250 → 1.0.0-alpha-252
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -0
- package/assets/Appearance/dark/mode/darkMode.module.css +2 -1
- package/assets/Appearance/default/mode/defaultMode.module.css +2 -1
- package/assets/Appearance/pureDark/mode/pureDarkMode.module.css +2 -1
- package/es/Accordion/Accordion.js +0 -7
- package/es/Accordion/AccordionItem.js +0 -4
- package/es/Accordion/docs/Accordion__Demo.docs.js +0 -2
- package/es/Animation/Animation.js +0 -3
- package/es/Animation/docs/Animation__default.docs.js +0 -2
- package/es/Animation/docs/Animation__fadeIn.docs.js +0 -2
- package/es/Animation/docs/Animation__scaleIn.docs.js +0 -2
- package/es/Animation/docs/Animation__skewIn.docs.js +0 -2
- package/es/Animation/docs/Animation__slideDown.docs.js +0 -2
- package/es/Animation/docs/Animation__slideLeft.docs.js +0 -2
- package/es/Animation/docs/Animation__zoomIn.docs.js +0 -2
- package/es/AppContainer/AppContainer.js +2 -13
- package/es/AppContainer/docs/AppContainer__default.docs.js +0 -2
- package/es/Avatar/Avatar.js +7 -21
- package/es/Avatar/docs/Avatar__custom.docs.js +1 -3
- package/es/Avatar/docs/Avatar__default.docs.js +1 -3
- package/es/Avatar/docs/Avatar__palette.docs.js +1 -3
- package/es/Avatar/docs/Avatar__text.docs.js +1 -3
- package/es/AvatarTeam/AvatarTeam.js +0 -3
- package/es/AvatarTeam/docs/AvatarTeam__custom.docs.js +0 -2
- package/es/AvatarTeam/docs/AvatarTeam__default.docs.js +0 -2
- package/es/AvatarTeam/docs/AvatarTeam__palette.docs.js +0 -2
- package/es/AvatarTeam/docs/AvatarTeam__size.docs.js +0 -2
- package/es/Button/Button.js +0 -4
- package/es/Button/docs/Button__custom.docs.js +11 -13
- package/es/Button/docs/Button__default.docs.js +11 -13
- package/es/Buttongroup/Buttongroup.js +0 -3
- package/es/Buttongroup/docs/Buttongroup__custom.docs.js +0 -2
- package/es/Buttongroup/docs/Buttongroup__footer.docs.js +0 -2
- package/es/Buttongroup/docs/Buttongroup__header.docs.js +0 -2
- package/es/Card/Card.js +7 -22
- package/es/Card/docs/Card__Custom.docs.js +0 -2
- package/es/Card/docs/Card__Default.docs.js +0 -2
- package/es/Card/docs/Card__Scroll.docs.js +0 -3
- package/es/CheckBox/CheckBox.js +0 -5
- package/es/CheckBox/docs/CheckBox__custom.docs.js +12 -16
- package/es/CheckBox/docs/CheckBox__default.docs.js +12 -16
- package/es/DateTime/CalendarView.js +26 -34
- package/es/DateTime/DateTime.js +22 -77
- package/es/DateTime/DateTime.module.css +50 -5
- package/es/DateTime/DateTimePopupFooter.js +2 -4
- package/es/DateTime/DateTimePopupHeader.js +2 -8
- package/es/DateTime/DateWidget.js +34 -101
- package/es/DateTime/DaysRow.js +2 -4
- package/es/DateTime/Time.js +2 -10
- package/es/DateTime/YearView.js +4 -28
- package/es/DateTime/__tests__/CalendarView.spec.js +0 -1
- package/es/DateTime/__tests__/DateTime.spec.js +0 -1
- package/es/DateTime/__tests__/DateWidget.spec.js +3 -2
- package/es/DateTime/common.js +0 -3
- package/es/DateTime/constants.js +0 -1
- package/es/DateTime/dateFormatUtils/dateFormat.js +30 -63
- package/es/DateTime/dateFormatUtils/dayChange.js +4 -13
- package/es/DateTime/dateFormatUtils/index.js +2 -28
- package/es/DateTime/dateFormatUtils/monthChange.js +0 -8
- package/es/DateTime/dateFormatUtils/timeChange.js +6 -22
- package/es/DateTime/dateFormatUtils/yearChange.js +2 -11
- package/es/DateTime/docs/DateTime__default.docs.js +6 -9
- package/es/DateTime/docs/DateWidget__default.docs.js +0 -5
- package/es/DateTime/objectUtils.js +20 -14
- package/es/DateTime/props/propTypes.js +4 -2
- package/es/DateTime/typeChecker.js +0 -3
- package/es/DateTime/validator.js +6 -58
- package/es/DropBox/DropBox.js +5 -28
- package/es/DropBox/docs/DropBox__custom.docs.js +25 -27
- package/es/DropBox/docs/DropBox__customOrder.docs.js +0 -7
- package/es/DropBox/docs/DropBox__fixedPosition.docs.js +0 -7
- package/es/DropBox/docs/DropBox__position.docs.js +35 -37
- package/es/DropBox/docs/DropBox__size.docs.js +28 -30
- package/es/DropDown/DropDown.js +1 -9
- package/es/DropDown/DropDownHeading.js +2 -4
- package/es/DropDown/DropDownItem.js +0 -6
- package/es/DropDown/DropDownSearch.js +0 -4
- package/es/DropDown/DropDownSeparator.js +0 -1
- package/es/DropDown/__tests__/DropDown.spec.js +2 -1
- package/es/DropDown/docs/DropDownHeading__custom.docs.js +0 -2
- package/es/DropDown/docs/DropDownHeading__default.docs.js +0 -2
- package/es/Heading/Heading.js +0 -2
- package/es/Heading/Heading.module.css +3 -3
- package/es/Heading/docs/Heading__default.docs.js +0 -2
- package/es/Label/Label.js +0 -2
- package/es/Label/docs/Label__clipped.docs.js +0 -2
- package/es/Label/docs/Label__custom.docs.js +0 -2
- package/es/Label/docs/Label__palette.docs.js +0 -2
- package/es/Label/docs/Label__size.docs.js +0 -2
- package/es/Label/docs/Label__type.docs.js +0 -2
- package/es/Layout/Box.js +0 -13
- package/es/Layout/Container.js +1 -12
- package/es/Layout/docs/Layout__Hidden.docs.js +0 -1
- package/es/Layout/docs/Layout__default.docs.js +0 -1
- package/es/Layout/docs/Layout__four_Column.docs.js +0 -1
- package/es/Layout/docs/Layout__three_Column.docs.js +0 -1
- package/es/Layout/docs/Layout__two_Column.docs.js +0 -1
- package/es/LightNightMode/docs/AlternativeColors.docs.js +0 -2
- package/es/ListItem/ListContainer.js +0 -8
- package/es/ListItem/ListItem.js +0 -9
- package/es/ListItem/ListItemWithAvatar.js +1 -9
- package/es/ListItem/ListItemWithCheckBox.js +0 -7
- package/es/ListItem/ListItemWithIcon.js +0 -8
- package/es/ListItem/ListItemWithRadio.js +0 -7
- package/es/ListItem/docs/ListItemWithAvatar__custom.docs.js +0 -2
- package/es/ListItem/docs/ListItemWithAvatar__default.docs.js +0 -2
- package/es/ListItem/docs/ListItemWithCheckBox__custom.docs.js +0 -2
- package/es/ListItem/docs/ListItemWithCheckBox__default.docs.js +0 -2
- package/es/ListItem/docs/ListItemWithIcon__custom.docs.js +0 -2
- package/es/ListItem/docs/ListItemWithIcon__default.docs.js +0 -2
- package/es/ListItem/docs/ListItemWithRadio__custom.docs.js +0 -2
- package/es/ListItem/docs/ListItemWithRadio__default.docs.js +0 -2
- package/es/ListItem/docs/ListItem__custom.docs.js +0 -2
- package/es/ListItem/docs/ListItem__default.docs.js +0 -2
- package/es/Modal/Modal.js +8 -28
- package/es/Modal/__docs__/Modal__default.docs.js +1 -5
- package/es/MultiSelect/AdvancedGroupMultiSelect.js +11 -90
- package/es/MultiSelect/AdvancedMultiSelect.js +21 -39
- package/es/MultiSelect/EmptyState.js +0 -2
- package/es/MultiSelect/MultiSelect.js +49 -112
- package/es/MultiSelect/MultiSelectHeader.js +0 -3
- package/es/MultiSelect/MultiSelectWithAvatar.js +16 -17
- package/es/MultiSelect/SelectedOptions.js +3 -6
- package/es/MultiSelect/Suggestions.js +3 -7
- package/es/MultiSelect/__tests__/MultiSelect.spec.js +6 -4
- package/es/MultiSelect/docs/AdvancedGroupMultiSelect__default.docs.js +0 -7
- package/es/MultiSelect/docs/AdvancedMultiSelect__default.docs.js +1 -7
- package/es/MultiSelect/docs/MultiSelectWithAvatar__default.docs.js +1 -5
- package/es/MultiSelect/docs/MultiSelect__default.docs.js +1 -6
- package/es/MultiSelect/props/defaultProps.js +8 -4
- package/es/MultiSelect/props/propTypes.js +8 -6
- package/es/PopOver/PopOver.js +0 -18
- package/es/PopOver/__tests__/PopOver.spec.js +1 -2
- package/es/PopOver/docs/PopOver__default.docs.js +0 -2
- package/es/Popup/Popup.js +24 -77
- package/es/Popup/__tests__/Popup.spec.js +5 -17
- package/es/Popup/viewPort.js +4 -16
- package/es/Provider/IdProvider.js +2 -9
- package/es/Provider/LibraryContext.js +4 -6
- package/es/Provider/NumberGenerator/NumberGenerator.js +7 -21
- package/es/Provider/ZindexProvider.js +2 -9
- package/es/Provider/docs/Provider_Id__Class.docs.js +3 -4
- package/es/Provider/docs/Provider_Id__Function.docs.js +0 -1
- package/es/Provider/docs/Provider_Zindex__Class.docs.js +3 -4
- package/es/Provider/docs/Provider_Zindex__Function.docs.js +0 -1
- package/es/Provider.js +3 -7
- package/es/Radio/Radio.js +0 -4
- package/es/Radio/docs/Radio__custom.docs.js +12 -16
- package/es/Radio/docs/Radio__default.docs.js +12 -16
- package/es/Responsive/CustomResponsive.js +18 -28
- package/es/Responsive/RefWrapper.js +7 -6
- package/es/Responsive/ResizeComponent.js +25 -35
- package/es/Responsive/ResizeObserver.js +6 -26
- package/es/Responsive/Responsive.js +20 -34
- package/es/Responsive/docs/Responsive__Custom.docs.js +22 -14
- package/es/Responsive/docs/Responsive__default.docs.js +1 -3
- package/es/Responsive/sizeObservers.js +7 -28
- package/es/Responsive/utils/index.js +5 -7
- package/es/Responsive/utils/shallowCompare.js +2 -7
- package/es/Responsive/windowResizeObserver.js +0 -7
- package/es/ResponsiveDropBox/ResponsiveDropBox.js +0 -4
- package/es/Ribbon/Ribbon.js +0 -3
- package/es/Ribbon/docs/Ribbon__custom.docs.js +13 -14
- package/es/Ribbon/docs/Ribbon__default.docs.js +13 -14
- package/es/RippleEffect/RippleEffect.js +0 -1
- package/es/RippleEffect/docs/RippleEffect__default.docs.js +12 -14
- package/es/Select/GroupSelect.js +28 -67
- package/es/Select/Select.js +47 -97
- package/es/Select/Select.module.css +3 -0
- package/es/Select/SelectWithAvatar.js +15 -24
- package/es/Select/SelectWithIcon.js +73 -53
- package/es/Select/__tests__/Select.spec.js +8 -6
- package/es/Select/docs/GroupSelect__default.docs.js +1 -6
- package/es/Select/docs/SelectWithAvatar__default.docs.js +0 -4
- package/es/Select/docs/SelectWithIcon__default.docs.js +0 -4
- package/es/Select/docs/Select__default.docs.js +0 -5
- package/es/Select/props/defaultProps.js +8 -4
- package/es/Select/props/propTypes.js +8 -5
- package/es/Stencils/Stencils.js +0 -3
- package/es/Stencils/docs/Stencils__custom.docs.js +0 -2
- package/es/Stencils/docs/Stencils__default.docs.js +0 -2
- package/es/Switch/Switch.js +0 -5
- package/es/Switch/docs/Switch__custom.docs.js +12 -14
- package/es/Switch/docs/Switch__default.docs.js +12 -14
- package/es/Tab/Tab.js +1 -4
- package/es/Tab/TabContent.js +0 -1
- package/es/Tab/TabContentWrapper.js +0 -2
- package/es/Tab/TabWrapper.js +2 -5
- package/es/Tab/Tabs.js +7 -54
- package/es/Tab/__tests__/Tab.spec.js +2 -1
- package/es/Tab/__tests__/TabWrapper.spec.js +0 -1
- package/es/Tab/docs/Tab__default.docs.js +0 -5
- package/es/Tag/Tag.js +1 -6
- package/es/Tag/docs/Tag__custom.docs.js +11 -13
- package/es/Tag/docs/Tag__default.docs.js +11 -13
- package/es/TextBox/TextBox.js +0 -15
- package/es/TextBox/__tests__/TextBox.spec.js +4 -1
- package/es/TextBox/docs/TextBox__custom.docs.js +0 -2
- package/es/TextBox/docs/TextBox__default.docs.js +0 -2
- package/es/TextBox/docs/TextBox__size.docs.js +0 -2
- package/es/TextBox/docs/TextBox__variant.docs.js +0 -2
- package/es/TextBoxIcon/TextBoxIcon.js +0 -7
- package/es/TextBoxIcon/__tests__/TextBoxIcon.spec.js +7 -2
- package/es/TextBoxIcon/docs/TextBoxIcon__custom.docs.js +0 -2
- package/es/TextBoxIcon/docs/TextBoxIcon__default.docs.js +0 -2
- package/es/Textarea/Textarea.js +0 -12
- package/es/Textarea/__tests__/Textarea.spec.js +2 -2
- package/es/Textarea/docs/Textarea__animated.docs.js +0 -2
- package/es/Textarea/docs/Textarea__custom.docs.js +0 -2
- package/es/Textarea/docs/Textarea__default.docs.js +0 -2
- package/es/Textarea/docs/Textarea__disabled.docs.js +0 -2
- package/es/Tooltip/Tooltip.js +11 -58
- package/es/Tooltip/__tests__/Tooltip.spec.js +0 -5
- package/es/Tooltip/docs/Tooltip__default.docs.js +63 -67
- package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +0 -3
- package/es/VelocityAnimation/VelocityAnimation/docs/VelocityAnimation__demo.docs.js +0 -5
- package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +2 -7
- package/es/VelocityAnimation/VelocityAnimationGroup/docs/VelocityAnimationGroup__demo.docs.js +17 -28
- package/es/deprecated/PortalLayer/PortalLayer.js +17 -25
- package/es/deprecated/PortalLayer/docs/PortalLayer__default.docs.js +0 -7
- package/es/index.js +2 -1
- package/es/semantic/Button/Button.js +0 -3
- package/es/semantic/Button/docs/Button__default.docs.js +0 -3
- package/es/utils/Common.js +23 -47
- package/es/utils/ContextOptimizer.js +5 -4
- package/es/utils/__tests__/debounce.spec.js +2 -2
- package/es/utils/constructFullName.js +0 -2
- package/es/utils/datetime/common.js +5 -16
- package/es/utils/debounce.js +1 -5
- package/es/utils/dropDownUtils.js +11 -67
- package/es/utils/getInitial.js +0 -4
- package/es/utils/shallowEqual.js +0 -6
- package/lib/Accordion/Accordion.js +10 -39
- package/lib/Accordion/AccordionItem.js +12 -38
- package/lib/Accordion/__tests__/Accordion.spec.js +0 -3
- package/lib/Accordion/docs/Accordion__Demo.docs.js +0 -22
- package/lib/Accordion/index.js +0 -3
- package/lib/Accordion/props/propTypes.js +0 -3
- package/lib/Animation/Animation.js +12 -37
- package/lib/Animation/__tests__/Animation.spec.js +7 -11
- package/lib/Animation/docs/Animation__default.docs.js +0 -24
- package/lib/Animation/docs/Animation__fadeIn.docs.js +0 -24
- package/lib/Animation/docs/Animation__scaleIn.docs.js +0 -24
- package/lib/Animation/docs/Animation__skewIn.docs.js +0 -24
- package/lib/Animation/docs/Animation__slideDown.docs.js +0 -24
- package/lib/Animation/docs/Animation__slideLeft.docs.js +0 -24
- package/lib/Animation/docs/Animation__zoomIn.docs.js +0 -24
- package/lib/Animation/props/propTypes.js +0 -3
- package/lib/AppContainer/AppContainer.js +14 -52
- package/lib/AppContainer/docs/AppContainer__default.docs.js +0 -23
- package/lib/AppContainer/props/propTypes.js +0 -3
- package/lib/Avatar/Avatar.js +27 -71
- package/lib/Avatar/__tests__/Avatar.spec.js +0 -44
- package/lib/Avatar/docs/Avatar__custom.docs.js +1 -26
- package/lib/Avatar/docs/Avatar__default.docs.js +1 -24
- package/lib/Avatar/docs/Avatar__palette.docs.js +1 -26
- package/lib/Avatar/docs/Avatar__text.docs.js +1 -26
- package/lib/Avatar/props/propTypes.js +0 -3
- package/lib/AvatarTeam/AvatarTeam.js +20 -47
- package/lib/AvatarTeam/__tests__/AvatarTeam.spec.js +0 -13
- package/lib/AvatarTeam/docs/AvatarTeam__custom.docs.js +0 -24
- package/lib/AvatarTeam/docs/AvatarTeam__default.docs.js +0 -24
- package/lib/AvatarTeam/docs/AvatarTeam__palette.docs.js +0 -24
- package/lib/AvatarTeam/docs/AvatarTeam__size.docs.js +0 -24
- package/lib/AvatarTeam/props/propTypes.js +0 -3
- package/lib/Button/Button.js +19 -44
- package/lib/Button/__tests__/Button.spec.js +0 -40
- package/lib/Button/docs/Button__custom.docs.js +11 -37
- package/lib/Button/docs/Button__default.docs.js +11 -36
- package/lib/Button/props/defaultProps.js +0 -2
- package/lib/Button/props/propTypes.js +0 -3
- package/lib/Buttongroup/Buttongroup.js +5 -31
- package/lib/Buttongroup/__test__/Buttongroup.spec.js +0 -10
- package/lib/Buttongroup/docs/Buttongroup__custom.docs.js +0 -25
- package/lib/Buttongroup/docs/Buttongroup__footer.docs.js +0 -25
- package/lib/Buttongroup/docs/Buttongroup__header.docs.js +0 -27
- package/lib/Buttongroup/props/propTypes.js +0 -3
- package/lib/Card/Card.js +41 -102
- package/lib/Card/__tests__/Card.spec.js +1 -10
- package/lib/Card/docs/Card__Custom.docs.js +0 -27
- package/lib/Card/docs/Card__Default.docs.js +0 -26
- package/lib/Card/docs/Card__Scroll.docs.js +3 -30
- package/lib/Card/index.js +0 -4
- package/lib/Card/props/propTypes.js +0 -3
- package/lib/CheckBox/CheckBox.js +40 -69
- package/lib/CheckBox/__tests__/CheckBox.spec.js +0 -3
- package/lib/CheckBox/docs/CheckBox__custom.docs.js +12 -37
- package/lib/CheckBox/docs/CheckBox__default.docs.js +12 -36
- package/lib/CheckBox/props/propTypes.js +0 -3
- package/lib/DateTime/CalendarView.js +40 -79
- package/lib/DateTime/DateTime.js +164 -245
- package/lib/DateTime/DateTime.module.css +50 -5
- package/lib/DateTime/DateTimePopupFooter.js +5 -30
- package/lib/DateTime/DateTimePopupHeader.js +13 -45
- package/lib/DateTime/DateWidget.js +243 -349
- package/lib/DateTime/DaysRow.js +2 -26
- package/lib/DateTime/Time.js +29 -72
- package/lib/DateTime/YearView.js +25 -75
- package/lib/DateTime/__tests__/CalendarView.spec.js +5 -13
- package/lib/DateTime/__tests__/DateTime.spec.js +37 -51
- package/lib/DateTime/__tests__/DateWidget.spec.js +8 -10
- package/lib/DateTime/common.js +0 -6
- package/lib/DateTime/constants.js +0 -1
- package/lib/DateTime/dateFormatUtils/dateFormat.js +122 -184
- package/lib/DateTime/dateFormatUtils/dayChange.js +7 -14
- package/lib/DateTime/dateFormatUtils/index.js +12 -61
- package/lib/DateTime/dateFormatUtils/monthChange.js +9 -19
- package/lib/DateTime/dateFormatUtils/timeChange.js +20 -52
- package/lib/DateTime/dateFormatUtils/yearChange.js +11 -22
- package/lib/DateTime/docs/DateTime__default.docs.js +10 -33
- package/lib/DateTime/docs/DateWidget__default.docs.js +2 -30
- package/lib/DateTime/index.js +0 -2
- package/lib/DateTime/objectUtils.js +20 -24
- package/lib/DateTime/props/propTypes.js +4 -5
- package/lib/DateTime/typeChecker.js +0 -4
- package/lib/DateTime/validator.js +6 -69
- package/lib/DropBox/DropBox.js +58 -119
- package/lib/DropBox/__tests__/DropBox.spec.js +2 -6
- package/lib/DropBox/docs/DropBox__custom.docs.js +25 -50
- package/lib/DropBox/docs/DropBox__customOrder.docs.js +9 -36
- package/lib/DropBox/docs/DropBox__fixedPosition.docs.js +9 -36
- package/lib/DropBox/docs/DropBox__position.docs.js +35 -59
- package/lib/DropBox/docs/DropBox__size.docs.js +28 -52
- package/lib/DropBox/props/propTypes.js +0 -3
- package/lib/DropDown/DropDown.js +3 -53
- package/lib/DropDown/DropDownHeading.js +11 -35
- package/lib/DropDown/DropDownItem.js +17 -41
- package/lib/DropDown/DropDownSearch.js +15 -41
- package/lib/DropDown/DropDownSeparator.js +1 -23
- package/lib/DropDown/__tests__/DropDown.spec.js +9 -15
- package/lib/DropDown/__tests__/DropDownItem.spec.js +4 -9
- package/lib/DropDown/__tests__/DropDownSearch.spec.js +0 -3
- package/lib/DropDown/docs/DropDownHeading__custom.docs.js +0 -23
- package/lib/DropDown/docs/DropDownHeading__default.docs.js +0 -22
- package/lib/DropDown/props/propTypes.js +0 -5
- package/lib/Heading/Heading.js +8 -35
- package/lib/Heading/Heading.module.css +3 -3
- package/lib/Heading/docs/Heading__default.docs.js +0 -24
- package/lib/Heading/props/propTypes.js +0 -3
- package/lib/Label/Label.js +11 -36
- package/lib/Label/__tests__/Label.spec.js +1 -14
- package/lib/Label/docs/Label__clipped.docs.js +0 -25
- package/lib/Label/docs/Label__custom.docs.js +0 -26
- package/lib/Label/docs/Label__palette.docs.js +0 -25
- package/lib/Label/docs/Label__size.docs.js +0 -25
- package/lib/Label/docs/Label__type.docs.js +0 -25
- package/lib/Label/props/propTypes.js +0 -3
- package/lib/Layout/Box.js +11 -31
- package/lib/Layout/Container.js +10 -29
- package/lib/Layout/__tests__/Box.spec.js +49 -65
- package/lib/Layout/__tests__/Container.spec.js +50 -67
- package/lib/Layout/docs/Layout__Hidden.docs.js +0 -22
- package/lib/Layout/docs/Layout__default.docs.js +0 -21
- package/lib/Layout/docs/Layout__four_Column.docs.js +0 -22
- package/lib/Layout/docs/Layout__three_Column.docs.js +0 -22
- package/lib/Layout/docs/Layout__two_Column.docs.js +0 -22
- package/lib/Layout/index.js +0 -4
- package/lib/Layout/props/propTypes.js +0 -3
- package/lib/Layout/utils.js +0 -10
- package/lib/LightNightMode/docs/AlternativeColors.docs.js +1 -26
- package/lib/ListItem/ListContainer.js +25 -46
- package/lib/ListItem/ListItem.js +37 -66
- package/lib/ListItem/ListItemWithAvatar.js +41 -72
- package/lib/ListItem/ListItemWithCheckBox.js +32 -61
- package/lib/ListItem/ListItemWithIcon.js +36 -65
- package/lib/ListItem/ListItemWithRadio.js +33 -62
- package/lib/ListItem/docs/ListItemWithAvatar__custom.docs.js +0 -24
- package/lib/ListItem/docs/ListItemWithAvatar__default.docs.js +0 -23
- package/lib/ListItem/docs/ListItemWithCheckBox__custom.docs.js +0 -24
- package/lib/ListItem/docs/ListItemWithCheckBox__default.docs.js +0 -23
- package/lib/ListItem/docs/ListItemWithIcon__custom.docs.js +0 -24
- package/lib/ListItem/docs/ListItemWithIcon__default.docs.js +0 -23
- package/lib/ListItem/docs/ListItemWithRadio__custom.docs.js +0 -24
- package/lib/ListItem/docs/ListItemWithRadio__default.docs.js +0 -23
- package/lib/ListItem/docs/ListItem__custom.docs.js +0 -23
- package/lib/ListItem/docs/ListItem__default.docs.js +0 -22
- package/lib/ListItem/props/propTypes.js +0 -5
- package/lib/Modal/Modal.js +4 -44
- package/lib/Modal/__docs__/Modal__default.docs.js +0 -23
- package/lib/Modal/props/propTypes.js +0 -3
- package/lib/MultiSelect/AdvancedGroupMultiSelect.js +157 -289
- package/lib/MultiSelect/AdvancedMultiSelect.js +130 -203
- package/lib/MultiSelect/EmptyState.js +21 -44
- package/lib/MultiSelect/MultiSelect.js +213 -325
- package/lib/MultiSelect/MultiSelectHeader.js +5 -29
- package/lib/MultiSelect/MultiSelectWithAvatar.js +61 -98
- package/lib/MultiSelect/SelectedOptions.js +15 -44
- package/lib/MultiSelect/Suggestions.js +26 -59
- package/lib/MultiSelect/__tests__/MultiSelect.spec.js +75 -86
- package/lib/MultiSelect/docs/AdvancedGroupMultiSelect__default.docs.js +0 -23
- package/lib/MultiSelect/docs/AdvancedMultiSelect__default.docs.js +3 -28
- package/lib/MultiSelect/docs/MultiSelectWithAvatar__default.docs.js +2 -28
- package/lib/MultiSelect/docs/MultiSelect__default.docs.js +2 -30
- package/lib/MultiSelect/props/defaultProps.js +8 -6
- package/lib/MultiSelect/props/propTypes.js +8 -9
- package/lib/PopOver/PopOver.js +44 -94
- package/lib/PopOver/__tests__/PopOver.spec.js +1 -4
- package/lib/PopOver/docs/PopOver__default.docs.js +0 -25
- package/lib/PopOver/props/propTypes.js +0 -3
- package/lib/Popup/Popup.js +77 -156
- package/lib/Popup/__tests__/Popup.spec.js +5 -42
- package/lib/Popup/viewPort.js +14 -28
- package/lib/Provider/AvatarSize.js +0 -4
- package/lib/Provider/Config.js +0 -2
- package/lib/Provider/CssProvider.js +0 -4
- package/lib/Provider/IdProvider.js +3 -17
- package/lib/Provider/LibraryContext.js +10 -32
- package/lib/Provider/LibraryContextInit.js +0 -4
- package/lib/Provider/NumberGenerator/NumberGenerator.js +14 -43
- package/lib/Provider/ZindexProvider.js +3 -15
- package/lib/Provider/docs/Provider_Id__Class.docs.js +3 -24
- package/lib/Provider/docs/Provider_Id__Function.docs.js +0 -5
- package/lib/Provider/docs/Provider_Zindex__Class.docs.js +3 -24
- package/lib/Provider/docs/Provider_Zindex__Function.docs.js +0 -5
- package/lib/Provider.js +2 -61
- package/lib/Radio/Radio.js +33 -60
- package/lib/Radio/__tests__/Radiospec.js +5 -9
- package/lib/Radio/docs/Radio__custom.docs.js +12 -38
- package/lib/Radio/docs/Radio__default.docs.js +12 -37
- package/lib/Radio/props/propTypes.js +0 -3
- package/lib/Responsive/CustomResponsive.js +23 -67
- package/lib/Responsive/RefWrapper.js +7 -15
- package/lib/Responsive/ResizeComponent.js +27 -58
- package/lib/Responsive/ResizeObserver.js +6 -23
- package/lib/Responsive/Responsive.js +24 -76
- package/lib/Responsive/docs/Responsive__Custom.docs.js +29 -54
- package/lib/Responsive/docs/Responsive__default.docs.js +4 -28
- package/lib/Responsive/index.js +0 -2
- package/lib/Responsive/props/propTypes.js +0 -3
- package/lib/Responsive/sizeObservers.js +13 -51
- package/lib/Responsive/utils/index.js +3 -11
- package/lib/Responsive/utils/shallowCompare.js +2 -11
- package/lib/Responsive/windowResizeObserver.js +0 -8
- package/lib/ResponsiveDropBox/ResponsiveDropBox.js +14 -44
- package/lib/ResponsiveDropBox/props/propTypes.js +0 -3
- package/lib/Ribbon/Ribbon.js +7 -31
- package/lib/Ribbon/__tests__/Ribbon.spec.js +0 -22
- package/lib/Ribbon/docs/Ribbon__custom.docs.js +13 -36
- package/lib/Ribbon/docs/Ribbon__default.docs.js +13 -35
- package/lib/Ribbon/props/propTypes.js +0 -3
- package/lib/RippleEffect/RippleEffect.js +7 -18
- package/lib/RippleEffect/docs/RippleEffect__default.docs.js +12 -34
- package/lib/RippleEffect/props/propTypes.js +0 -3
- package/lib/Select/GroupSelect.js +138 -230
- package/lib/Select/Select.js +213 -297
- package/lib/Select/Select.module.css +3 -0
- package/lib/Select/SelectWithAvatar.js +61 -104
- package/lib/Select/SelectWithIcon.js +149 -143
- package/lib/Select/__tests__/Select.spec.js +89 -131
- package/lib/Select/docs/GroupSelect__default.docs.js +0 -26
- package/lib/Select/docs/SelectWithAvatar__default.docs.js +0 -28
- package/lib/Select/docs/SelectWithIcon__default.docs.js +4 -29
- package/lib/Select/docs/Select__default.docs.js +0 -27
- package/lib/Select/props/defaultProps.js +7 -8
- package/lib/Select/props/propTypes.js +8 -8
- package/lib/Stencils/Stencils.js +4 -28
- package/lib/Stencils/__tests__/Stencils.spec.js +0 -12
- package/lib/Stencils/docs/Stencils__custom.docs.js +0 -24
- package/lib/Stencils/docs/Stencils__default.docs.js +0 -24
- package/lib/Stencils/props/propTypes.js +0 -3
- package/lib/Switch/Switch.js +27 -55
- package/lib/Switch/docs/Switch__custom.docs.js +12 -35
- package/lib/Switch/docs/Switch__default.docs.js +12 -34
- package/lib/Switch/props/propTypes.js +0 -3
- package/lib/Tab/Tab.js +23 -39
- package/lib/Tab/TabContent.js +4 -11
- package/lib/Tab/TabContentWrapper.js +5 -12
- package/lib/Tab/TabWrapper.js +16 -34
- package/lib/Tab/Tabs.js +85 -166
- package/lib/Tab/__tests__/Tab.spec.js +63 -74
- package/lib/Tab/__tests__/TabContent.spec.js +6 -10
- package/lib/Tab/__tests__/TabContentWrapper.spec.js +20 -28
- package/lib/Tab/__tests__/TabWrapper.spec.js +0 -12
- package/lib/Tab/__tests__/Tabs.spec.js +39 -53
- package/lib/Tab/docs/Tab__default.docs.js +0 -25
- package/lib/Tab/index.js +0 -6
- package/lib/Tab/props/propTypes.js +0 -3
- package/lib/Tag/Tag.js +37 -70
- package/lib/Tag/__tests__/Tag.spec.js +8 -14
- package/lib/Tag/docs/Tag__custom.docs.js +11 -37
- package/lib/Tag/docs/Tag__default.docs.js +11 -36
- package/lib/Tag/props/propTypes.js +0 -3
- package/lib/TextBox/TextBox.js +52 -83
- package/lib/TextBox/__tests__/TextBox.spec.js +4 -14
- package/lib/TextBox/docs/TextBox__custom.docs.js +0 -26
- package/lib/TextBox/docs/TextBox__default.docs.js +0 -26
- package/lib/TextBox/docs/TextBox__size.docs.js +0 -26
- package/lib/TextBox/docs/TextBox__variant.docs.js +0 -26
- package/lib/TextBox/props/propTypes.js +0 -5
- package/lib/TextBoxIcon/TextBoxIcon.js +48 -80
- package/lib/TextBoxIcon/__tests__/TextBoxIcon.spec.js +5 -14
- package/lib/TextBoxIcon/docs/TextBoxIcon__custom.docs.js +0 -27
- package/lib/TextBoxIcon/docs/TextBoxIcon__default.docs.js +0 -27
- package/lib/TextBoxIcon/props/propTypes.js +0 -3
- package/lib/Textarea/Textarea.js +22 -52
- package/lib/Textarea/__tests__/Textarea.spec.js +2 -14
- package/lib/Textarea/docs/Textarea__animated.docs.js +0 -25
- package/lib/Textarea/docs/Textarea__custom.docs.js +0 -26
- package/lib/Textarea/docs/Textarea__default.docs.js +0 -25
- package/lib/Textarea/docs/Textarea__disabled.docs.js +0 -25
- package/lib/Textarea/props/propTypes.js +0 -3
- package/lib/Tooltip/Tooltip.js +25 -92
- package/lib/Tooltip/__tests__/Tooltip.spec.js +0 -23
- package/lib/Tooltip/docs/Tooltip__default.docs.js +63 -91
- package/lib/Tooltip/props/propTypes.js +0 -3
- package/lib/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +11 -39
- package/lib/VelocityAnimation/VelocityAnimation/docs/VelocityAnimation__demo.docs.js +2 -29
- package/lib/VelocityAnimation/VelocityAnimation/props/propTypes.js +0 -3
- package/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +18 -51
- package/lib/VelocityAnimation/VelocityAnimationGroup/docs/VelocityAnimationGroup__demo.docs.js +22 -54
- package/lib/VelocityAnimation/VelocityAnimationGroup/props/propTypes.js +0 -3
- package/lib/css.js +0 -39
- package/lib/deprecated/PortalLayer/PortalLayer.js +17 -45
- package/lib/deprecated/PortalLayer/docs/PortalLayer__default.docs.js +2 -36
- package/lib/deprecated/PortalLayer/props/propTypes.js +0 -3
- package/lib/index.js +0 -158
- package/lib/semantic/Button/Button.js +17 -41
- package/lib/semantic/Button/docs/Button__default.docs.js +0 -23
- package/lib/semantic/Button/props/propTypes.js +0 -3
- package/lib/utils/Common.js +29 -95
- package/lib/utils/ContextOptimizer.js +10 -16
- package/lib/utils/__tests__/constructFullName.spec.js +0 -1
- package/lib/utils/__tests__/debounce.spec.js +2 -3
- package/lib/utils/__tests__/getInitial.spec.js +0 -1
- package/lib/utils/constructFullName.js +2 -11
- package/lib/utils/datetime/common.js +5 -32
- package/lib/utils/debounce.js +1 -6
- package/lib/utils/dropDownUtils.js +54 -171
- package/lib/utils/dummyFunction.js +0 -2
- package/lib/utils/getHTMLFontSize.js +0 -1
- package/lib/utils/getInitial.js +0 -6
- package/lib/utils/scrollTo.js +0 -2
- package/lib/utils/shallowEqual.js +0 -8
- package/package.json +1 -1
package/es/Tooltip/Tooltip.js
CHANGED
|
@@ -26,49 +26,39 @@ export default class Tooltip extends React.Component {
|
|
|
26
26
|
this.tooltipContainerClientRect = {};
|
|
27
27
|
this.tooltipContainerEl = {};
|
|
28
28
|
}
|
|
29
|
-
|
|
30
29
|
onResize(sizeOfObservedEl, observedEl) {
|
|
31
30
|
this.isResized = true;
|
|
32
31
|
}
|
|
33
|
-
|
|
34
32
|
observeElement() {
|
|
35
33
|
this.tooltipContainerEl = this.getToolTipContainerEl();
|
|
36
34
|
this.observer.observe(this.tooltipContainerEl);
|
|
37
35
|
}
|
|
38
|
-
|
|
39
36
|
unObserveElement() {
|
|
40
37
|
this.observer.disconnect();
|
|
41
38
|
}
|
|
42
|
-
|
|
43
39
|
getClientRectOfContEl(el) {
|
|
44
40
|
if (this.isResized) {
|
|
45
41
|
return this.setClientRectOfContEl(el);
|
|
46
42
|
}
|
|
47
|
-
|
|
48
43
|
return this.tooltipContainerClientRect;
|
|
49
44
|
}
|
|
50
|
-
|
|
51
45
|
setClientRectOfContEl(containerEl) {
|
|
52
46
|
this.isResized = false;
|
|
53
47
|
this.tooltipContainerClientRect = containerEl.getBoundingClientRect();
|
|
54
48
|
return this.tooltipContainerClientRect;
|
|
55
49
|
}
|
|
56
|
-
|
|
57
50
|
getToolTipContainerEl() {
|
|
58
51
|
const getTooltipContainer = getLibraryConfig('getTooltipContainer');
|
|
59
52
|
const tooltipContainer = typeof getTooltipContainer === 'function' ? getTooltipContainer() : null;
|
|
60
53
|
return tooltipContainer ? tooltipContainer : document.body;
|
|
61
54
|
}
|
|
62
|
-
|
|
63
55
|
getToolTipDOM(el) {
|
|
64
56
|
this.toolTip = el;
|
|
65
57
|
}
|
|
66
|
-
|
|
67
58
|
reset() {
|
|
68
59
|
let {
|
|
69
60
|
title
|
|
70
61
|
} = this.state;
|
|
71
|
-
|
|
72
62
|
if (title !== null) {
|
|
73
63
|
this.setState({
|
|
74
64
|
title: null,
|
|
@@ -77,9 +67,8 @@ export default class Tooltip extends React.Component {
|
|
|
77
67
|
});
|
|
78
68
|
}
|
|
79
69
|
}
|
|
80
|
-
/* left and right screen edge check for top and bottom tooltip position */
|
|
81
|
-
|
|
82
70
|
|
|
71
|
+
/* left and right screen edge check for top and bottom tooltip position */
|
|
83
72
|
leftRightScreenEdge(tLeft, toolTipArrowLeft, thisLeft, thisWidth, tooltipoffsetWidth, bodyWidth, rightEdge, bodyLeft) {
|
|
84
73
|
if (tLeft - bodyLeft <= 1) {
|
|
85
74
|
// top & bottom position left side screen edge case
|
|
@@ -95,7 +84,6 @@ export default class Tooltip extends React.Component {
|
|
|
95
84
|
tLeft = parseInt(thisLeft - (tooltipoffsetWidth - thisWidth) / 2);
|
|
96
85
|
toolTipArrowLeft = parseInt(tooltipoffsetWidth / 2 - 4);
|
|
97
86
|
}
|
|
98
|
-
|
|
99
87
|
return {
|
|
100
88
|
tLeft,
|
|
101
89
|
toolTipArrowLeft,
|
|
@@ -106,9 +94,8 @@ export default class Tooltip extends React.Component {
|
|
|
106
94
|
rightEdge
|
|
107
95
|
};
|
|
108
96
|
}
|
|
109
|
-
/* top and bottom screen edge check for left and right tooltip position */
|
|
110
|
-
|
|
111
97
|
|
|
98
|
+
/* top and bottom screen edge check for left and right tooltip position */
|
|
112
99
|
topBottomScreenEdge(tTop, toolTipArrowTop, thisTop, thisHeight, tooltipoffsetHeight, bodyHeight, bottomEdge) {
|
|
113
100
|
if (tTop <= 1) {
|
|
114
101
|
tTop = 2;
|
|
@@ -118,7 +105,6 @@ export default class Tooltip extends React.Component {
|
|
|
118
105
|
tTop -= bottomEdge;
|
|
119
106
|
toolTipArrowTop += bottomEdge;
|
|
120
107
|
}
|
|
121
|
-
|
|
122
108
|
return {
|
|
123
109
|
tTop,
|
|
124
110
|
toolTipArrowTop,
|
|
@@ -129,19 +115,16 @@ export default class Tooltip extends React.Component {
|
|
|
129
115
|
bottomEdge
|
|
130
116
|
};
|
|
131
117
|
}
|
|
132
|
-
|
|
133
118
|
handleOver(e, targetElement) {
|
|
134
119
|
let containerElement = this.tooltipContainerEl;
|
|
135
120
|
let element = e.target;
|
|
136
121
|
let titleDiv = element.hasAttribute('data-title') || element.hasAttribute('title') ? element : element.closest('[data-title]') || element.closest('[title]');
|
|
137
|
-
|
|
138
122
|
if (titleDiv) {
|
|
139
123
|
let title = titleDiv.getAttribute('data-title') || titleDiv.getAttribute('title');
|
|
140
|
-
/* if data-title-position is left or right change right and left in rtl case */
|
|
141
124
|
|
|
125
|
+
/* if data-title-position is left or right change right and left in rtl case */
|
|
142
126
|
let isPosition = titleDiv.getAttribute('data-title-position');
|
|
143
127
|
let elem = this.getDirection;
|
|
144
|
-
|
|
145
128
|
if (elem.getAttribute('dir') == 'rtl') {
|
|
146
129
|
if (isPosition == 'left') {
|
|
147
130
|
isPosition = 'right';
|
|
@@ -149,42 +132,34 @@ export default class Tooltip extends React.Component {
|
|
|
149
132
|
isPosition = 'left';
|
|
150
133
|
}
|
|
151
134
|
}
|
|
152
|
-
|
|
153
135
|
if (title !== '' && title) {
|
|
154
136
|
titleDiv.setAttribute('data-title', title);
|
|
155
137
|
titleDiv.removeAttribute('title');
|
|
156
|
-
|
|
157
138
|
if (element.nodeName !== 'I' && element.innerText && element.innerText.trim() !== '') {
|
|
158
139
|
let isContentDotted = '';
|
|
159
|
-
|
|
160
140
|
if (element.scrollWidth !== 0) {
|
|
161
141
|
isContentDotted = element.offsetWidth < element.scrollWidth;
|
|
162
|
-
|
|
163
142
|
if (!isContentDotted) {
|
|
164
143
|
isContentDotted = element.offsetHeight < element.scrollHeight;
|
|
165
|
-
}
|
|
144
|
+
}
|
|
145
|
+
// if (!isContentDotted) {Need to check the code Sivanesh
|
|
166
146
|
// isContentDotted = element.offsetHeight < element.scrollHeight;
|
|
167
147
|
// }
|
|
168
|
-
|
|
169
148
|
} else {
|
|
170
149
|
isContentDotted = element.parentElement.offsetWidth < element.parentElement.scrollWidth;
|
|
171
150
|
}
|
|
172
|
-
|
|
173
151
|
let originText = element.innerText.replace(/\s/g, '').toLowerCase();
|
|
174
152
|
let tooltipText = title.replace(/\s/g, '').toLowerCase();
|
|
175
153
|
let isDefaultTooltip = element.hasAttribute('data-istitle') || element.hasAttribute('istitle') ? element.getAttribute('data-istitle') || element.getAttribute('istitle') : 'false';
|
|
176
154
|
isDefaultTooltip = isDefaultTooltip === 'true';
|
|
177
155
|
let isSameText = originText.indexOf(tooltipText) !== -1 ? true : false;
|
|
178
|
-
|
|
179
156
|
if (!isContentDotted && isSameText && !isDefaultTooltip) {
|
|
180
157
|
return false;
|
|
181
158
|
}
|
|
182
|
-
|
|
183
159
|
if (isContentDotted && titleDiv.getAttribute('data-dottedTitle')) {
|
|
184
160
|
title = titleDiv.getAttribute('data-dottedTitle');
|
|
185
161
|
}
|
|
186
162
|
}
|
|
187
|
-
|
|
188
163
|
let isHtml = titleDiv.getAttribute('data-ishtml');
|
|
189
164
|
let dataTooltipnoArrow = titleDiv.getAttribute('data-tooltip-noarrow') === 'true' ? true : false;
|
|
190
165
|
let dataTooltipWrap = titleDiv.getAttribute('data-title-wrap') === 'true' ? true : false;
|
|
@@ -197,7 +172,6 @@ export default class Tooltip extends React.Component {
|
|
|
197
172
|
dataTooltipWrap
|
|
198
173
|
}, () => {
|
|
199
174
|
let tooltip = this.toolTip;
|
|
200
|
-
|
|
201
175
|
if (tooltip) {
|
|
202
176
|
/* element top, left, height, width */
|
|
203
177
|
let thisTop = clientRect.top;
|
|
@@ -205,11 +179,9 @@ export default class Tooltip extends React.Component {
|
|
|
205
179
|
let thisHeight = clientRect.height;
|
|
206
180
|
let thisWidth = clientRect.width;
|
|
207
181
|
/* box layout left spacing */
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
182
|
+
let bodyLeft = boxLayout.left;
|
|
183
|
+
// let checkTop = thisTop + thisHeight;
|
|
211
184
|
/* element left plus element width */
|
|
212
|
-
|
|
213
185
|
let checkLeft = thisLeft + thisWidth;
|
|
214
186
|
let tTop;
|
|
215
187
|
let tLeft;
|
|
@@ -219,7 +191,6 @@ export default class Tooltip extends React.Component {
|
|
|
219
191
|
let bottomEdge;
|
|
220
192
|
let tooltipLeft;
|
|
221
193
|
/* offset width, height of body */
|
|
222
|
-
|
|
223
194
|
let bodyWidth = containerElement.offsetWidth;
|
|
224
195
|
let bodyHeight = containerElement.offsetHeight;
|
|
225
196
|
let isArrowHorizontal = false;
|
|
@@ -227,16 +198,12 @@ export default class Tooltip extends React.Component {
|
|
|
227
198
|
let isArrowRight = false;
|
|
228
199
|
let tWidth = '';
|
|
229
200
|
/* overall body height minus element top + element height */
|
|
230
|
-
|
|
231
201
|
let thisBottom = bodyHeight - (thisTop + thisHeight);
|
|
232
202
|
/* overall body width minus element left + element width */
|
|
233
|
-
|
|
234
203
|
let thisRight = bodyWidth - (thisLeft + thisWidth);
|
|
235
204
|
/* tooltip width and height */
|
|
236
|
-
|
|
237
205
|
let tooltipoffsetWidth = tooltip.offsetWidth;
|
|
238
206
|
let tooltipoffsetHeight = tooltip.offsetHeight;
|
|
239
|
-
|
|
240
207
|
if (isPosition) {
|
|
241
208
|
if (isPosition == 'top') {
|
|
242
209
|
/* if top does not have enough space show tooltip in bottom area */
|
|
@@ -264,9 +231,8 @@ export default class Tooltip extends React.Component {
|
|
|
264
231
|
toolTipArrowLeft = parseInt(tooltipoffsetWidth / 2 - 6);
|
|
265
232
|
isArrowDown = true;
|
|
266
233
|
}
|
|
267
|
-
/* top tooltip left and right corner edge case */
|
|
268
|
-
|
|
269
234
|
|
|
235
|
+
/* top tooltip left and right corner edge case */
|
|
270
236
|
let values = this.leftRightScreenEdge(tLeft, toolTipArrowLeft, thisLeft, thisWidth, tooltipoffsetWidth, bodyWidth, rightEdge, bodyLeft);
|
|
271
237
|
tLeft = values.tLeft, toolTipArrowLeft = values.toolTipArrowLeft, thisLeft = values.thisLeft, thisWidth = values.thisWidth, tooltipoffsetWidth = values.tooltipoffsetWidth, bodyWidth = values.bodyWidth, rightEdge = values.rightEdge;
|
|
272
238
|
} else if (isPosition == 'bottom') {
|
|
@@ -295,14 +261,12 @@ export default class Tooltip extends React.Component {
|
|
|
295
261
|
toolTipArrowLeft = parseInt(tooltipoffsetWidth / 2 - 6);
|
|
296
262
|
isArrowDown = false;
|
|
297
263
|
}
|
|
298
|
-
/* bottom tooltip left and right corner edge case */
|
|
299
|
-
|
|
300
264
|
|
|
265
|
+
/* bottom tooltip left and right corner edge case */
|
|
301
266
|
let values = this.leftRightScreenEdge(tLeft, toolTipArrowLeft, thisLeft, thisWidth, tooltipoffsetWidth, bodyWidth, rightEdge, bodyLeft);
|
|
302
267
|
tLeft = values.tLeft, toolTipArrowLeft = values.toolTipArrowLeft, thisLeft = values.thisLeft, thisWidth = values.thisWidth, tooltipoffsetWidth = values.tooltipoffsetWidth, bodyWidth = values.bodyWidth, rightEdge = values.rightEdge;
|
|
303
268
|
} else if (isPosition == 'left') {
|
|
304
269
|
isArrowHorizontal = true;
|
|
305
|
-
|
|
306
270
|
if (thisLeft - bodyLeft <= tooltipoffsetWidth) {
|
|
307
271
|
if (thisLeft - bodyLeft <= thisRight) {
|
|
308
272
|
/* if left does not have enough space show tooltip in right area */
|
|
@@ -331,14 +295,12 @@ export default class Tooltip extends React.Component {
|
|
|
331
295
|
toolTipArrowLeft = parseInt(tooltipoffsetWidth - 2);
|
|
332
296
|
isArrowRight = true;
|
|
333
297
|
}
|
|
334
|
-
/* left tooltip top and bottom corner edge case */
|
|
335
|
-
|
|
336
298
|
|
|
299
|
+
/* left tooltip top and bottom corner edge case */
|
|
337
300
|
let values = this.topBottomScreenEdge(tTop, toolTipArrowTop, thisTop, thisHeight, tooltipoffsetHeight, bodyHeight, bottomEdge);
|
|
338
301
|
tTop = values.tTop, toolTipArrowTop = values.toolTipArrowTop, thisTop = values.thisTop, thisHeight = values.thisHeight, tooltipoffsetHeight = values.tooltipoffsetHeight, bodyHeight = values.bodyHeight, bottomEdge = values.bottomEdge;
|
|
339
302
|
} else if (isPosition == 'right') {
|
|
340
303
|
isArrowHorizontal = true;
|
|
341
|
-
|
|
342
304
|
if (thisRight + bodyLeft <= tooltipoffsetWidth) {
|
|
343
305
|
if (thisLeft + bodyLeft <= thisRight) {
|
|
344
306
|
/* if right space is larger than left space show tooltip in right (default) area */
|
|
@@ -374,13 +336,11 @@ export default class Tooltip extends React.Component {
|
|
|
374
336
|
toolTipArrowLeft = -1;
|
|
375
337
|
isArrowRight = false;
|
|
376
338
|
}
|
|
377
|
-
/* right tooltip left and right corner edge case */
|
|
378
|
-
|
|
379
339
|
|
|
340
|
+
/* right tooltip left and right corner edge case */
|
|
380
341
|
let values = this.topBottomScreenEdge(tTop, toolTipArrowTop, thisTop, thisHeight, tooltipoffsetHeight, bodyHeight, bottomEdge);
|
|
381
342
|
tTop = values.tTop, toolTipArrowTop = values.toolTipArrowTop, thisTop = values.thisTop, thisHeight = values.thisHeight, tooltipoffsetHeight = values.tooltipoffsetHeight, bodyHeight = values.bodyHeight, bottomEdge = values.bottomEdge;
|
|
382
343
|
}
|
|
383
|
-
|
|
384
344
|
this.setState({
|
|
385
345
|
top: tTop,
|
|
386
346
|
left: tLeft,
|
|
@@ -398,7 +358,6 @@ export default class Tooltip extends React.Component {
|
|
|
398
358
|
tTop = parseInt(thisTop + thisHeight + 10);
|
|
399
359
|
tLeft = parseInt(thisLeft - (tooltipoffsetWidth / 2 - thisWidth / 2) + 2);
|
|
400
360
|
tooltipLeft = parseInt(tooltipoffsetWidth / 2 - 6);
|
|
401
|
-
|
|
402
361
|
if (tLeft - bodyLeft <= 1) {
|
|
403
362
|
// default left side screen edge case
|
|
404
363
|
tooltipLeft = parseInt(thisLeft - bodyLeft + thisWidth / 2 - 6);
|
|
@@ -412,9 +371,7 @@ export default class Tooltip extends React.Component {
|
|
|
412
371
|
tLeft = parseInt(thisLeft - (tooltipoffsetWidth - thisWidth) / 2);
|
|
413
372
|
tooltipLeft = parseInt(tooltipoffsetWidth / 2 - 4);
|
|
414
373
|
}
|
|
415
|
-
|
|
416
374
|
isArrowDown = false;
|
|
417
|
-
|
|
418
375
|
if (tTop + tooltipoffsetHeight > bodyHeight) {
|
|
419
376
|
/* if bottom does not have enough space show tooltip in top area */
|
|
420
377
|
if (thisTop > thisBottom) {
|
|
@@ -422,7 +379,6 @@ export default class Tooltip extends React.Component {
|
|
|
422
379
|
tTop -= tooltipoffsetHeight + thisHeight + 20;
|
|
423
380
|
}
|
|
424
381
|
}
|
|
425
|
-
|
|
426
382
|
if (isArrowDown) {
|
|
427
383
|
let arrowTop = tooltipoffsetHeight - 4;
|
|
428
384
|
this.setState({
|
|
@@ -454,7 +410,6 @@ export default class Tooltip extends React.Component {
|
|
|
454
410
|
this.reset();
|
|
455
411
|
}
|
|
456
412
|
}
|
|
457
|
-
|
|
458
413
|
render() {
|
|
459
414
|
let {
|
|
460
415
|
title,
|
|
@@ -501,11 +456,9 @@ export default class Tooltip extends React.Component {
|
|
|
501
456
|
className: tooltipCss
|
|
502
457
|
}, title)) : null;
|
|
503
458
|
}
|
|
504
|
-
|
|
505
459
|
}
|
|
506
460
|
Tooltip.propTypes = propTypes;
|
|
507
461
|
Tooltip.defaultProps = defaultProps;
|
|
508
|
-
|
|
509
462
|
if (false) {
|
|
510
463
|
Tooltip.docs = {
|
|
511
464
|
componentGroup: 'Atom',
|
|
@@ -1,18 +1,15 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import renderer from 'react-test-renderer';
|
|
3
3
|
import Tooltip from '../Tooltip';
|
|
4
|
-
|
|
5
4
|
class SampleComponent extends React.Component {
|
|
6
5
|
constructor(props) {
|
|
7
6
|
super(props);
|
|
8
7
|
this.toolTipRef = /*#__PURE__*/React.createRef();
|
|
9
8
|
this.setToolTipRef = this.setToolTipRef.bind(this);
|
|
10
9
|
}
|
|
11
|
-
|
|
12
10
|
setToolTipRef(ref) {
|
|
13
11
|
this.toolTipRef = ref;
|
|
14
12
|
}
|
|
15
|
-
|
|
16
13
|
render() {
|
|
17
14
|
return /*#__PURE__*/React.createElement("div", {
|
|
18
15
|
onMouseOver: e => this.toolTipRef && this.toolTipRef.handleOver(e),
|
|
@@ -24,9 +21,7 @@ class SampleComponent extends React.Component {
|
|
|
24
21
|
ref: this.setToolTipRef
|
|
25
22
|
}));
|
|
26
23
|
}
|
|
27
|
-
|
|
28
24
|
}
|
|
29
|
-
|
|
30
25
|
describe('Tooltip component conditions', () => {
|
|
31
26
|
it('Is HandleOver Executed', () => {
|
|
32
27
|
let sampleComponent = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(SampleComponent, null));
|
|
@@ -7,60 +7,59 @@ export default class Tooltip__default extends Component {
|
|
|
7
7
|
super(props);
|
|
8
8
|
this.tooltip = this.tooltip.bind(this);
|
|
9
9
|
}
|
|
10
|
-
|
|
11
10
|
tooltip() {
|
|
12
11
|
let titleStyle = {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
12
|
+
fontSize: '15px',
|
|
13
|
+
padding: '15px 0',
|
|
14
|
+
borderTop: '1px solid #e0e0e0',
|
|
15
|
+
marginTop: '20px'
|
|
16
|
+
},
|
|
17
|
+
inlineBlock = {
|
|
18
|
+
display: 'inline-block',
|
|
19
|
+
marginRight: '10px',
|
|
20
|
+
marginBottom: '5px'
|
|
21
|
+
},
|
|
22
|
+
dottedstyle = {
|
|
23
|
+
display: 'inline-flex',
|
|
24
|
+
width: '100px',
|
|
25
|
+
textOverflow: 'ellipsis',
|
|
26
|
+
whitepace: 'nowrap',
|
|
27
|
+
overflow: 'hidden',
|
|
28
|
+
marginRight: '10px',
|
|
29
|
+
whiteSpace: 'nowrap'
|
|
30
|
+
},
|
|
31
|
+
flex = {
|
|
32
|
+
display: 'inline-flex',
|
|
33
|
+
alignItems: 'center',
|
|
34
|
+
fontSize: '14px'
|
|
35
|
+
},
|
|
36
|
+
clampDotted = {
|
|
37
|
+
overflow: 'hidden',
|
|
38
|
+
display: '-webkit-box',
|
|
39
|
+
webkitLineClamp: '3',
|
|
40
|
+
webkitBoxOrient: 'vertical',
|
|
41
|
+
width: '100px',
|
|
42
|
+
fontSize: '14px',
|
|
43
|
+
background: 'var(--zdt_cta_primary_bg)',
|
|
44
|
+
padding: '3px 15px',
|
|
45
|
+
color: '#fff',
|
|
46
|
+
borderRadius: '4px',
|
|
47
|
+
marginBottom: '5px'
|
|
48
|
+
},
|
|
49
|
+
whiteSpaceNoWrap = {
|
|
50
|
+
overflow: 'hidden',
|
|
51
|
+
display: '-webkit-box',
|
|
52
|
+
webkitLineClamp: '3',
|
|
53
|
+
webkitBoxOrient: 'vertical',
|
|
54
|
+
whiteSpace: 'pre-wrap',
|
|
55
|
+
fontSize: '14px',
|
|
56
|
+
background: 'var(--zdt_cta_primary_bg)',
|
|
57
|
+
padding: '3px 15px',
|
|
58
|
+
color: '#fff',
|
|
59
|
+
borderRadius: '4px',
|
|
60
|
+
marginBottom: '5px',
|
|
61
|
+
width: '200px'
|
|
62
|
+
};
|
|
64
63
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
65
64
|
style: titleStyle
|
|
66
65
|
}, /*#__PURE__*/React.createElement("b", null, "Top Position Tooltip"), " - 1) Lengthy Content, 2) Default Top, 3) Show in Bottom Area if Top doesn t have enough space, 4) Dotted Tooltip, 5) HTML in Tooltip, 6) Tooltip without Arrow, 7)No-Wrapped(normal) Tooltip, 8) Wrapped Tooltip"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", {
|
|
@@ -334,21 +333,20 @@ export default class Tooltip__default extends Component {
|
|
|
334
333
|
"data-title-wrap": "true"
|
|
335
334
|
}, /*#__PURE__*/React.createElement("span", null, `Multiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted\nMultiple Line Dotted`)));
|
|
336
335
|
}
|
|
337
|
-
|
|
338
336
|
render() {
|
|
339
337
|
let parent = {
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
338
|
+
display: 'flex'
|
|
339
|
+
},
|
|
340
|
+
split = {
|
|
341
|
+
padding: '20px',
|
|
342
|
+
width: '50%'
|
|
343
|
+
},
|
|
344
|
+
dark = {
|
|
345
|
+
background: '#2c334d',
|
|
346
|
+
padding: '20px',
|
|
347
|
+
width: '50%',
|
|
348
|
+
color: '#fff'
|
|
349
|
+
};
|
|
352
350
|
return /*#__PURE__*/React.createElement("div", {
|
|
353
351
|
onMouseOver: e => this.tooltipRef && this.tooltipRef.handleOver(e)
|
|
354
352
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -359,9 +357,7 @@ export default class Tooltip__default extends Component {
|
|
|
359
357
|
style: dark
|
|
360
358
|
}, this.tooltip())));
|
|
361
359
|
}
|
|
362
|
-
|
|
363
360
|
}
|
|
364
|
-
|
|
365
361
|
if (false) {
|
|
366
362
|
Tooltip__default.docs = {
|
|
367
363
|
componentGroup: 'Atom',
|
|
@@ -8,7 +8,6 @@ export default class VelocityAnimation extends React.Component {
|
|
|
8
8
|
constructor(props) {
|
|
9
9
|
super(props);
|
|
10
10
|
}
|
|
11
|
-
|
|
12
11
|
render() {
|
|
13
12
|
let {
|
|
14
13
|
children,
|
|
@@ -66,12 +65,10 @@ export default class VelocityAnimation extends React.Component {
|
|
|
66
65
|
interruptBehavior: "queue"
|
|
67
66
|
}, children);
|
|
68
67
|
}
|
|
69
|
-
|
|
70
68
|
}
|
|
71
69
|
VelocityAnimation.defaultProps = defaultProps;
|
|
72
70
|
VelocityAnimation.propTypes = propTypes;
|
|
73
71
|
VelocityAnimation.contextType = LibraryContext;
|
|
74
|
-
|
|
75
72
|
if (false) {
|
|
76
73
|
VelocityAnimation.docs = {
|
|
77
74
|
componentGroup: 'Animation'
|
|
@@ -35,19 +35,16 @@ export default class VelocityAnimation__demo extends React.Component {
|
|
|
35
35
|
this.handleChange = this.handleChange.bind(this);
|
|
36
36
|
this.handleView = this.handleView.bind(this);
|
|
37
37
|
}
|
|
38
|
-
|
|
39
38
|
handleChange(fieldId, value) {
|
|
40
39
|
this.setState({
|
|
41
40
|
value
|
|
42
41
|
});
|
|
43
42
|
}
|
|
44
|
-
|
|
45
43
|
handleView() {
|
|
46
44
|
this.setState({
|
|
47
45
|
isActive: !this.state.isActive
|
|
48
46
|
});
|
|
49
47
|
}
|
|
50
|
-
|
|
51
48
|
render() {
|
|
52
49
|
let {
|
|
53
50
|
value,
|
|
@@ -87,9 +84,7 @@ export default class VelocityAnimation__demo extends React.Component {
|
|
|
87
84
|
style: animate
|
|
88
85
|
}, "Animation"))));
|
|
89
86
|
}
|
|
90
|
-
|
|
91
87
|
}
|
|
92
|
-
|
|
93
88
|
if (false) {
|
|
94
89
|
VelocityAnimation__demo.docs = {
|
|
95
90
|
componentGroup: 'Animation'
|
|
@@ -1,12 +1,10 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
|
|
3
2
|
import React from 'react';
|
|
4
3
|
import { defaultProps } from './props/defaultProps';
|
|
5
4
|
import { propTypes } from './props/propTypes';
|
|
6
5
|
import { VelocityTransitionGroup } from 'velocity-react';
|
|
7
6
|
import 'velocity-animate/velocity.ui';
|
|
8
7
|
import LibraryContext from '../../Provider/LibraryContextInit';
|
|
9
|
-
|
|
10
8
|
function clearProps(props) {
|
|
11
9
|
let newProps = Object.assign({}, props);
|
|
12
10
|
Object.keys(VelocityAnimationGroup.propTypes).forEach(key => {
|
|
@@ -14,12 +12,10 @@ function clearProps(props) {
|
|
|
14
12
|
});
|
|
15
13
|
return newProps;
|
|
16
14
|
}
|
|
17
|
-
|
|
18
15
|
export default class VelocityAnimationGroup extends React.Component {
|
|
19
16
|
constructor(props) {
|
|
20
17
|
super(props);
|
|
21
18
|
}
|
|
22
|
-
|
|
23
19
|
render() {
|
|
24
20
|
let {
|
|
25
21
|
children,
|
|
@@ -95,14 +91,13 @@ export default class VelocityAnimationGroup extends React.Component {
|
|
|
95
91
|
enterShowStyle: enterShowStyle
|
|
96
92
|
}, childProps), isActive ? children : null);
|
|
97
93
|
}
|
|
98
|
-
|
|
99
94
|
}
|
|
100
|
-
VelocityAnimationGroup.defaultProps = {
|
|
95
|
+
VelocityAnimationGroup.defaultProps = {
|
|
96
|
+
...defaultProps,
|
|
101
97
|
component: React.Fragment
|
|
102
98
|
};
|
|
103
99
|
VelocityAnimationGroup.propTypes = propTypes;
|
|
104
100
|
VelocityAnimationGroup.contextType = LibraryContext;
|
|
105
|
-
|
|
106
101
|
if (false) {
|
|
107
102
|
VelocityAnimationGroup.docs = {
|
|
108
103
|
componentGroup: 'Animation'
|
package/es/VelocityAnimation/VelocityAnimationGroup/docs/VelocityAnimationGroup__demo.docs.js
CHANGED
|
@@ -6,20 +6,16 @@ import Button from '../../../Button/Button';
|
|
|
6
6
|
import VelocityAnimationGroup from '../VelocityAnimationGroup';
|
|
7
7
|
import { Container } from '../../../Layout';
|
|
8
8
|
let animations = ['fade', 'slideDown', 'flyDown', 'shrink', 'expand', 'slideRight', 'slideLeft'];
|
|
9
|
-
|
|
10
9
|
function animationList() {
|
|
11
10
|
let animationList = [];
|
|
12
|
-
|
|
13
11
|
for (let i = 0; i < animations.length; i++) {
|
|
14
12
|
animationList.push(Object.assign({
|
|
15
13
|
text: `${animations[i]}`,
|
|
16
14
|
id: `${animations[i]}-1`
|
|
17
15
|
}));
|
|
18
16
|
}
|
|
19
|
-
|
|
20
17
|
return animationList;
|
|
21
18
|
}
|
|
22
|
-
|
|
23
19
|
export default class VelocityAnimationGroup__demo extends React.Component {
|
|
24
20
|
constructor(props) {
|
|
25
21
|
super(props);
|
|
@@ -34,19 +30,16 @@ export default class VelocityAnimationGroup__demo extends React.Component {
|
|
|
34
30
|
this.handleView = this.handleView.bind(this);
|
|
35
31
|
this.handleSelect = this.handleSelect.bind(this);
|
|
36
32
|
}
|
|
37
|
-
|
|
38
33
|
componentDidMount() {
|
|
39
34
|
this.setState({
|
|
40
35
|
animationName: this.state.animationList[0]
|
|
41
36
|
});
|
|
42
37
|
}
|
|
43
|
-
|
|
44
38
|
handleView() {
|
|
45
39
|
this.setState({
|
|
46
40
|
isActive: !this.state.isActive
|
|
47
41
|
});
|
|
48
42
|
}
|
|
49
|
-
|
|
50
43
|
handleChange(name, value) {
|
|
51
44
|
if (name == 'entryTime') {
|
|
52
45
|
this.setState({
|
|
@@ -58,13 +51,11 @@ export default class VelocityAnimationGroup__demo extends React.Component {
|
|
|
58
51
|
});
|
|
59
52
|
}
|
|
60
53
|
}
|
|
61
|
-
|
|
62
54
|
handleSelect(fieldId, selectedValue) {
|
|
63
55
|
this.setState({
|
|
64
56
|
animationName: selectedValue
|
|
65
57
|
});
|
|
66
58
|
}
|
|
67
|
-
|
|
68
59
|
render() {
|
|
69
60
|
let {
|
|
70
61
|
entryTime,
|
|
@@ -74,23 +65,23 @@ export default class VelocityAnimationGroup__demo extends React.Component {
|
|
|
74
65
|
animationList
|
|
75
66
|
} = this.state;
|
|
76
67
|
let animate = {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
68
|
+
width: '200px',
|
|
69
|
+
height: '100px',
|
|
70
|
+
background: 'var(--dot_black)',
|
|
71
|
+
textAlign: 'center',
|
|
72
|
+
color: 'var(--dot_white)',
|
|
73
|
+
lineHeight: '100px'
|
|
74
|
+
},
|
|
75
|
+
field = {
|
|
76
|
+
display: 'flex',
|
|
77
|
+
justifyContent: 'space-between',
|
|
78
|
+
padding: '20px 0'
|
|
79
|
+
},
|
|
80
|
+
box = {
|
|
81
|
+
display: 'flex',
|
|
82
|
+
alignItems: 'center',
|
|
83
|
+
flexDirection: 'column'
|
|
84
|
+
};
|
|
94
85
|
return /*#__PURE__*/React.createElement("span", {
|
|
95
86
|
style: box
|
|
96
87
|
}, /*#__PURE__*/React.createElement("div", {
|
|
@@ -140,9 +131,7 @@ export default class VelocityAnimationGroup__demo extends React.Component {
|
|
|
140
131
|
style: animate
|
|
141
132
|
}, "Animation")));
|
|
142
133
|
}
|
|
143
|
-
|
|
144
134
|
}
|
|
145
|
-
|
|
146
135
|
if (false) {
|
|
147
136
|
VelocityAnimationGroup__demo.docs = {
|
|
148
137
|
componentGroup: 'Animation'
|