@zohodesk/components 1.0.0-alpha-249 → 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 +23 -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 +3 -14
- package/es/AppContainer/docs/AppContainer__default.docs.js +0 -2
- package/es/Avatar/Avatar.js +36 -42
- package/es/Avatar/Avatar.module.css +29 -9
- 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/Avatar/props/defaultProps.js +2 -1
- package/es/Avatar/props/propTypes.js +2 -1
- package/es/AvatarTeam/AvatarTeam.js +1 -4
- package/es/AvatarTeam/AvatarTeam.module.css +21 -7
- 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/Button.module.css +97 -24
- 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/Buttongroup.module.css +37 -8
- 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 +1 -6
- package/es/CheckBox/CheckBox.module.css +17 -11
- 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 +87 -15
- package/es/DateTime/DateTimePopupFooter.js +2 -4
- package/es/DateTime/DateTimePopupHeader.js +2 -8
- package/es/DateTime/DateWidget.js +34 -101
- package/es/DateTime/DateWidget.module.css +9 -5
- package/es/DateTime/DaysRow.js +2 -4
- package/es/DateTime/Time.js +2 -10
- package/es/DateTime/YearView.js +4 -28
- package/es/DateTime/YearView.module.css +17 -7
- 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 +6 -29
- package/es/DropBox/DropBox.module.css +47 -11
- 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/DropDownHeading.module.css +7 -3
- package/es/DropDown/DropDownItem.js +0 -6
- package/es/DropDown/DropDownItem.module.css +32 -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 +34 -0
- package/es/Heading/Heading.module.css +5 -0
- package/es/Heading/docs/Heading__default.docs.js +19 -0
- package/es/Heading/props/defaultProps.js +5 -0
- package/es/Heading/props/propTypes.js +11 -0
- 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 +1 -9
- package/es/ListItem/ListItem.js +1 -10
- package/es/ListItem/ListItem.module.css +57 -25
- package/es/ListItem/ListItemWithAvatar.js +2 -10
- package/es/ListItem/ListItemWithCheckBox.js +1 -8
- package/es/ListItem/ListItemWithIcon.js +1 -9
- package/es/ListItem/ListItemWithRadio.js +1 -8
- 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 +9 -29
- package/es/Modal/__docs__/Modal__default.docs.js +1 -5
- package/es/MultiSelect/AdvancedGroupMultiSelect.js +11 -90
- package/es/MultiSelect/AdvancedMultiSelect.js +22 -40
- package/es/MultiSelect/EmptyState.js +0 -2
- package/es/MultiSelect/MultiSelect.js +49 -112
- package/es/MultiSelect/MultiSelect.module.css +28 -11
- package/es/MultiSelect/MultiSelectHeader.js +0 -3
- package/es/MultiSelect/MultiSelectWithAvatar.js +16 -17
- package/es/MultiSelect/SelectedOptions.js +4 -7
- package/es/MultiSelect/SelectedOptions.module.css +8 -2
- package/es/MultiSelect/Suggestions.js +4 -8
- 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/PopOver.module.css +1 -1
- package/es/PopOver/__tests__/PopOver.spec.js +1 -2
- package/es/PopOver/docs/PopOver__default.docs.js +0 -2
- package/es/Popup/Popup.js +25 -78
- 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/Radio.module.css +10 -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 -35
- package/es/Responsive/docs/Responsive__Custom.docs.js +22 -14
- package/es/Responsive/docs/Responsive__default.docs.js +1 -3
- package/es/Responsive/docs/style.module.css +17 -8
- 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 +1 -5
- package/es/Ribbon/Ribbon.js +0 -3
- package/es/Ribbon/Ribbon.module.css +93 -28
- 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/RippleEffect.module.css +9 -27
- package/es/RippleEffect/docs/RippleEffect__default.docs.js +12 -14
- package/es/Select/GroupSelect.js +28 -67
- package/es/Select/Select.js +48 -98
- package/es/Select/Select.module.css +15 -2
- package/es/Select/SelectWithAvatar.js +15 -24
- package/es/Select/SelectWithIcon.js +73 -54
- 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/Stencils.module.css +21 -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 +1 -6
- package/es/Switch/Switch.module.css +6 -7
- 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 +2 -5
- package/es/Tab/Tab.module.css +16 -7
- package/es/Tab/TabContent.js +0 -1
- package/es/Tab/TabContentWrapper.js +0 -2
- package/es/Tab/TabWrapper.js +3 -6
- package/es/Tab/Tabs.js +8 -55
- package/es/Tab/Tabs.module.css +42 -8
- 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/Tab/docs/tabdocs.module.css +1 -1
- package/es/Tag/Tag.js +1 -6
- package/es/Tag/Tag.module.css +36 -14
- 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 +1 -16
- package/es/TextBox/TextBox.module.css +7 -11
- 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 +1 -8
- package/es/TextBoxIcon/TextBoxIcon.module.css +12 -5
- 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 +1 -13
- package/es/Textarea/Textarea.module.css +6 -7
- 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/Tooltip.module.css +9 -8
- 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 +3 -8
- package/es/VelocityAnimation/VelocityAnimationGroup/docs/VelocityAnimationGroup__demo.docs.js +17 -28
- package/es/common/animation.module.css +219 -21
- package/es/common/basicReset.module.css +2 -12
- package/es/common/common.module.css +64 -18
- package/es/common/customscroll.module.css +17 -21
- package/es/common/docStyle.module.css +79 -32
- package/es/common/transition.module.css +50 -10
- package/es/deprecated/AdvancedMultiSelect.module.css +22 -8
- package/es/deprecated/PortalLayer/PortalLayer.js +17 -25
- package/es/deprecated/PortalLayer/docs/PortalLayer__default.docs.js +0 -7
- package/es/index.js +5 -2
- package/es/semantic/Button/Button.js +0 -3
- package/es/semantic/Button/docs/Button__default.docs.js +0 -3
- package/es/semantic/Button/semanticButton.module.css +3 -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 +102 -0
- package/lib/Accordion/AccordionItem.js +84 -0
- package/lib/Accordion/__tests__/Accordion.spec.js +82 -0
- package/lib/Accordion/docs/Accordion__Demo.docs.js +104 -0
- package/lib/Accordion/index.js +20 -0
- package/lib/Accordion/props/defaultProps.js +16 -0
- package/lib/Accordion/props/propTypes.js +39 -0
- package/lib/Animation/Animation.js +161 -0
- package/lib/Animation/__tests__/Animation.spec.js +19 -0
- package/lib/Animation/docs/Animation__default.docs.js +61 -0
- package/lib/Animation/docs/Animation__fadeIn.docs.js +61 -0
- package/lib/Animation/docs/Animation__scaleIn.docs.js +61 -0
- package/lib/Animation/docs/Animation__skewIn.docs.js +61 -0
- package/lib/Animation/docs/Animation__slideDown.docs.js +61 -0
- package/lib/Animation/docs/Animation__slideLeft.docs.js +61 -0
- package/lib/Animation/docs/Animation__zoomIn.docs.js +61 -0
- package/lib/Animation/props/defaultProps.js +14 -0
- package/lib/Animation/props/propTypes.js +20 -0
- package/lib/AppContainer/AppContainer.js +156 -0
- package/lib/AppContainer/AppContainer.module.css +18 -0
- package/lib/AppContainer/docs/AppContainer__default.docs.js +47 -0
- package/lib/AppContainer/props/defaultProps.js +15 -0
- package/lib/AppContainer/props/propTypes.js +23 -0
- package/lib/Avatar/Avatar.js +199 -0
- package/lib/Avatar/Avatar.module.css +135 -0
- package/lib/Avatar/__tests__/Avatar.spec.js +164 -0
- package/lib/Avatar/__tests__/__snapshots__/Avatar.spec.js.snap +288 -0
- package/lib/Avatar/docs/Avatar__custom.docs.js +62 -0
- package/lib/Avatar/docs/Avatar__default.docs.js +60 -0
- package/lib/Avatar/docs/Avatar__palette.docs.js +82 -0
- package/lib/Avatar/docs/Avatar__text.docs.js +61 -0
- package/lib/Avatar/props/defaultProps.js +21 -0
- package/lib/Avatar/props/propTypes.js +31 -0
- package/lib/AvatarTeam/AvatarTeam.js +99 -0
- package/lib/AvatarTeam/AvatarTeam.module.css +161 -0
- package/lib/AvatarTeam/__tests__/AvatarTeam.spec.js +79 -0
- package/lib/AvatarTeam/__tests__/__snapshots__/AvatarTeam.spec.js.snap +226 -0
- package/lib/AvatarTeam/docs/AvatarTeam__custom.docs.js +100 -0
- package/lib/AvatarTeam/docs/AvatarTeam__default.docs.js +58 -0
- package/lib/AvatarTeam/docs/AvatarTeam__palette.docs.js +77 -0
- package/lib/AvatarTeam/docs/AvatarTeam__size.docs.js +76 -0
- package/lib/AvatarTeam/props/defaultProps.js +20 -0
- package/lib/AvatarTeam/props/propTypes.js +31 -0
- package/lib/Button/Button.js +90 -0
- package/lib/Button/Button.module.css +522 -0
- package/lib/Button/__tests__/Button.spec.js +193 -0
- package/lib/Button/__tests__/__snapshots__/Button.spec.js.snap +191 -0
- package/lib/Button/docs/Button__custom.docs.js +800 -0
- package/lib/Button/docs/Button__default.docs.js +565 -0
- package/lib/Button/props/defaultProps.js +22 -0
- package/lib/Button/props/propTypes.js +30 -0
- package/lib/Buttongroup/Buttongroup.js +69 -0
- package/lib/Buttongroup/Buttongroup.module.css +89 -0
- package/lib/Buttongroup/__test__/Buttongroup.spec.js +76 -0
- package/lib/Buttongroup/__test__/__snapshots__/Buttongroup.spec.js.snap +146 -0
- package/lib/Buttongroup/docs/Buttongroup__custom.docs.js +64 -0
- package/lib/Buttongroup/docs/Buttongroup__footer.docs.js +60 -0
- package/lib/Buttongroup/docs/Buttongroup__header.docs.js +71 -0
- package/lib/Buttongroup/props/defaultProps.js +11 -0
- package/lib/Buttongroup/props/propTypes.js +15 -0
- package/lib/Card/Card.js +301 -0
- package/lib/Card/Card.module.css +20 -0
- package/lib/Card/__tests__/Card.spec.js +47 -0
- package/lib/Card/docs/Card__Custom.docs.js +63 -0
- package/lib/Card/docs/Card__Default.docs.js +66 -0
- package/lib/Card/docs/Card__Scroll.docs.js +87 -0
- package/lib/Card/index.js +33 -0
- package/lib/Card/props/defaultProps.js +23 -0
- package/lib/Card/props/propTypes.js +54 -0
- package/lib/CheckBox/CheckBox.js +183 -0
- package/lib/CheckBox/CheckBox.module.css +157 -0
- package/lib/CheckBox/__tests__/CheckBox.spec.js +15 -0
- package/lib/CheckBox/docs/CheckBox__custom.docs.js +323 -0
- package/lib/CheckBox/docs/CheckBox__default.docs.js +249 -0
- package/lib/CheckBox/props/defaultProps.js +25 -0
- package/lib/CheckBox/props/propTypes.js +49 -0
- package/lib/DateTime/CalendarView.js +227 -0
- package/lib/DateTime/DateTime.js +779 -0
- package/lib/DateTime/DateTime.module.css +233 -0
- package/lib/DateTime/DateTimePopupFooter.js +65 -0
- package/lib/DateTime/DateTimePopupHeader.js +117 -0
- package/lib/DateTime/DateWidget.js +1015 -0
- package/lib/DateTime/DateWidget.module.css +38 -0
- package/lib/DateTime/DaysRow.js +52 -0
- package/lib/DateTime/Time.js +205 -0
- package/lib/DateTime/YearView.js +267 -0
- package/lib/DateTime/YearView.module.css +81 -0
- package/lib/DateTime/__tests__/CalendarView.spec.js +37 -0
- package/lib/DateTime/__tests__/DateTime.spec.js +113 -0
- package/lib/DateTime/__tests__/DateWidget.spec.js +79 -0
- package/lib/DateTime/common.js +30 -0
- package/lib/DateTime/constants.js +76 -0
- package/lib/DateTime/dateFormatUtils/dateFormat.js +551 -0
- package/lib/DateTime/dateFormatUtils/dayChange.js +74 -0
- package/lib/DateTime/dateFormatUtils/index.js +225 -0
- package/lib/DateTime/dateFormatUtils/monthChange.js +84 -0
- package/lib/DateTime/dateFormatUtils/timeChange.js +208 -0
- package/lib/DateTime/dateFormatUtils/yearChange.js +108 -0
- package/lib/DateTime/docs/DateTime__default.docs.js +119 -0
- package/lib/DateTime/docs/DateWidget__default.docs.js +212 -0
- package/lib/DateTime/docs/timezonedata.json +1 -0
- package/lib/DateTime/index.js +13 -0
- package/lib/DateTime/objectUtils.js +72 -0
- package/lib/DateTime/props/defaultProps.js +61 -0
- package/lib/DateTime/props/propTypes.js +144 -0
- package/lib/DateTime/typeChecker.js +22 -0
- package/lib/DateTime/validator.js +290 -0
- package/lib/DropBox/DropBox.js +266 -0
- package/lib/DropBox/DropBox.module.css +406 -0
- package/lib/DropBox/DropBoxPositionMapping.json +145 -0
- package/lib/DropBox/__tests__/DropBox.spec.js +83 -0
- package/lib/DropBox/docs/DropBox__custom.docs.js +97 -0
- package/lib/DropBox/docs/DropBox__customOrder.docs.js +114 -0
- package/lib/DropBox/docs/DropBox__fixedPosition.docs.js +113 -0
- package/lib/DropBox/docs/DropBox__position.docs.js +118 -0
- package/lib/DropBox/docs/DropBox__size.docs.js +92 -0
- package/lib/DropBox/props/defaultProps.js +27 -0
- package/lib/DropBox/props/propTypes.js +55 -0
- package/lib/DropDown/DropDown.js +127 -0
- package/lib/DropDown/DropDown.module.css +5 -0
- package/lib/DropDown/DropDownHeading.js +64 -0
- package/lib/DropDown/DropDownHeading.module.css +53 -0
- package/lib/DropDown/DropDownItem.js +102 -0
- package/lib/DropDown/DropDownItem.module.css +94 -0
- package/lib/DropDown/DropDownSearch.js +88 -0
- package/lib/DropDown/DropDownSearch.module.css +14 -0
- package/lib/DropDown/DropDownSeparator.js +42 -0
- package/lib/DropDown/DropDownSeparator.module.css +7 -0
- package/lib/DropDown/__tests__/DropDown.spec.js +44 -0
- package/lib/DropDown/__tests__/DropDownItem.spec.js +46 -0
- package/lib/DropDown/__tests__/DropDownSearch.spec.js +14 -0
- package/lib/DropDown/docs/DropDownHeading__custom.docs.js +50 -0
- package/lib/DropDown/docs/DropDownHeading__default.docs.js +48 -0
- package/lib/DropDown/props/defaultProps.js +28 -0
- package/lib/DropDown/props/propTypes.js +89 -0
- package/lib/Heading/Heading.js +64 -0
- package/lib/Heading/Heading.module.css +5 -0
- package/lib/Heading/docs/Heading__default.docs.js +50 -0
- package/lib/Heading/props/defaultProps.js +12 -0
- package/lib/Heading/props/propTypes.js +19 -0
- package/lib/Label/Label.js +65 -0
- package/lib/Label/Label.module.css +52 -0
- package/lib/Label/LabelColors.module.css +21 -0
- package/lib/Label/__tests__/Label.spec.js +124 -0
- package/lib/Label/__tests__/__snapshots__/Label.spec.js.snap +101 -0
- package/lib/Label/docs/Label__clipped.docs.js +56 -0
- package/lib/Label/docs/Label__custom.docs.js +59 -0
- package/lib/Label/docs/Label__palette.docs.js +71 -0
- package/lib/Label/docs/Label__size.docs.js +58 -0
- package/lib/Label/docs/Label__type.docs.js +66 -0
- package/lib/Label/props/defaultProps.js +17 -0
- package/lib/Label/props/propTypes.js +22 -0
- package/lib/Layout/Box.js +104 -0
- package/lib/Layout/Container.js +122 -0
- package/lib/Layout/Layout.module.css +336 -0
- package/lib/Layout/__tests__/Box.spec.js +105 -0
- package/lib/Layout/__tests__/Container.spec.js +110 -0
- package/lib/Layout/docs/Layout__Hidden.docs.js +105 -0
- package/lib/Layout/docs/Layout__default.docs.js +77 -0
- package/lib/Layout/docs/Layout__four_Column.docs.js +107 -0
- package/lib/Layout/docs/Layout__three_Column.docs.js +104 -0
- package/lib/Layout/docs/Layout__two_Column.docs.js +97 -0
- package/lib/Layout/index.js +30 -0
- package/lib/Layout/props/defaultProps.js +20 -0
- package/lib/Layout/props/propTypes.js +51 -0
- package/lib/Layout/utils.js +45 -0
- package/lib/LightNightMode/Colors.json +497 -0
- package/lib/LightNightMode/docs/AlternativeColors.docs.js +128 -0
- package/lib/ListItem/ListContainer.js +93 -0
- package/lib/ListItem/ListItem.js +153 -0
- package/lib/ListItem/ListItem.module.css +209 -0
- package/lib/ListItem/ListItemWithAvatar.js +175 -0
- package/lib/ListItem/ListItemWithCheckBox.js +141 -0
- package/lib/ListItem/ListItemWithIcon.js +158 -0
- package/lib/ListItem/ListItemWithRadio.js +143 -0
- package/lib/ListItem/docs/ListItemWithAvatar__custom.docs.js +182 -0
- package/lib/ListItem/docs/ListItemWithAvatar__default.docs.js +139 -0
- package/lib/ListItem/docs/ListItemWithCheckBox__custom.docs.js +118 -0
- package/lib/ListItem/docs/ListItemWithCheckBox__default.docs.js +92 -0
- package/lib/ListItem/docs/ListItemWithIcon__custom.docs.js +95 -0
- package/lib/ListItem/docs/ListItemWithIcon__default.docs.js +89 -0
- package/lib/ListItem/docs/ListItemWithRadio__custom.docs.js +118 -0
- package/lib/ListItem/docs/ListItemWithRadio__default.docs.js +92 -0
- package/lib/ListItem/docs/ListItem__custom.docs.js +141 -0
- package/lib/ListItem/docs/ListItem__default.docs.js +109 -0
- package/lib/ListItem/props/defaultProps.js +97 -0
- package/lib/ListItem/props/propTypes.js +176 -0
- package/lib/Modal/Modal.js +174 -0
- package/lib/Modal/__docs__/Modal__default.docs.js +65 -0
- package/lib/Modal/props/defaultProps.js +10 -0
- package/lib/Modal/props/propTypes.js +14 -0
- package/lib/MultiSelect/AdvancedGroupMultiSelect.js +1032 -0
- package/lib/MultiSelect/AdvancedMultiSelect.js +552 -0
- package/lib/MultiSelect/EmptyState.js +85 -0
- package/lib/MultiSelect/MultiSelect.js +1044 -0
- package/lib/MultiSelect/MultiSelect.module.css +206 -0
- package/lib/MultiSelect/MultiSelectHeader.js +55 -0
- package/lib/MultiSelect/MultiSelectWithAvatar.js +304 -0
- package/lib/MultiSelect/SelectedOptions.js +97 -0
- package/lib/MultiSelect/SelectedOptions.module.css +15 -0
- package/lib/MultiSelect/Suggestions.js +158 -0
- package/lib/MultiSelect/__tests__/MultiSelect.spec.js +159 -0
- package/lib/MultiSelect/docs/AdvancedGroupMultiSelect__default.docs.js +154 -0
- package/lib/MultiSelect/docs/AdvancedMultiSelect__default.docs.js +140 -0
- package/lib/MultiSelect/docs/MultiSelectWithAvatar__default.docs.js +165 -0
- package/lib/MultiSelect/docs/MultiSelect__default.docs.js +186 -0
- package/lib/MultiSelect/props/defaultProps.js +158 -0
- package/lib/MultiSelect/props/propTypes.js +377 -0
- package/lib/PopOver/PopOver.js +252 -0
- package/lib/PopOver/PopOver.module.css +8 -0
- package/lib/PopOver/__tests__/PopOver.spec.js +17 -0
- package/lib/PopOver/docs/PopOver__default.docs.js +61 -0
- package/lib/PopOver/props/defaultProps.js +15 -0
- package/lib/PopOver/props/propTypes.js +63 -0
- package/lib/Popup/Popup.js +640 -0
- package/lib/Popup/PositionMapping.json +74 -0
- package/lib/Popup/__tests__/Popup.spec.js +155 -0
- package/lib/Popup/viewPort.js +354 -0
- package/lib/Provider/AvatarSize.js +19 -0
- package/lib/Provider/Config.js +25 -0
- package/lib/Provider/CssProvider.js +23 -0
- package/lib/Provider/IdProvider.js +68 -0
- package/lib/Provider/LibraryContext.js +54 -0
- package/lib/Provider/LibraryContextInit.js +11 -0
- package/lib/Provider/NumberGenerator/NumberGenerator.js +145 -0
- package/lib/Provider/ZindexProvider.js +57 -0
- package/lib/Provider/docs/Provider_Id__Class.docs.js +56 -0
- package/lib/Provider/docs/Provider_Id__Function.docs.js +24 -0
- package/lib/Provider/docs/Provider_Zindex__Class.docs.js +59 -0
- package/lib/Provider/docs/Provider_Zindex__Function.docs.js +29 -0
- package/lib/Provider.js +116 -0
- package/lib/Radio/Radio.js +146 -0
- package/lib/Radio/Radio.module.css +112 -0
- package/lib/Radio/__tests__/Radiospec.js +25 -0
- package/lib/Radio/docs/Radio__custom.docs.js +273 -0
- package/lib/Radio/docs/Radio__default.docs.js +197 -0
- package/lib/Radio/props/defaultProps.js +21 -0
- package/lib/Radio/props/propTypes.js +40 -0
- package/lib/Responsive/CustomResponsive.js +192 -0
- package/lib/Responsive/RefWrapper.js +47 -0
- package/lib/Responsive/ResizeComponent.js +237 -0
- package/lib/Responsive/ResizeObserver.js +151 -0
- package/lib/Responsive/Responsive.js +222 -0
- package/lib/Responsive/docs/Responsive__Custom.docs.js +247 -0
- package/lib/Responsive/docs/Responsive__default.docs.js +118 -0
- package/lib/Responsive/docs/style.module.css +56 -0
- package/lib/Responsive/index.js +28 -0
- package/lib/Responsive/props/defaultProps.js +23 -0
- package/lib/Responsive/props/propTypes.js +36 -0
- package/lib/Responsive/sizeObservers.js +176 -0
- package/lib/Responsive/utils/index.js +62 -0
- package/lib/Responsive/utils/shallowCompare.js +29 -0
- package/lib/Responsive/windowResizeObserver.js +55 -0
- package/lib/ResponsiveDropBox/ResponsiveDropBox.js +94 -0
- package/lib/ResponsiveDropBox/ResponsiveDropBox.module.css +6 -0
- package/lib/ResponsiveDropBox/props/defaultProps.js +11 -0
- package/lib/ResponsiveDropBox/props/propTypes.js +15 -0
- package/lib/Ribbon/Ribbon.js +71 -0
- package/lib/Ribbon/Ribbon.module.css +377 -0
- package/lib/Ribbon/__tests__/Ribbon.spec.js +171 -0
- package/lib/Ribbon/__tests__/__snapshots__/Ribbon.spec.js.snap +163 -0
- package/lib/Ribbon/docs/Ribbon__custom.docs.js +414 -0
- package/lib/Ribbon/docs/Ribbon__default.docs.js +370 -0
- package/lib/Ribbon/props/defaultProps.js +15 -0
- package/lib/Ribbon/props/propTypes.js +18 -0
- package/lib/RippleEffect/RippleEffect.js +35 -0
- package/lib/RippleEffect/RippleEffect.module.css +92 -0
- package/lib/RippleEffect/docs/RippleEffect__default.docs.js +462 -0
- package/lib/RippleEffect/props/defaultProps.js +16 -0
- package/lib/RippleEffect/props/propTypes.js +19 -0
- package/lib/Select/GroupSelect.js +771 -0
- package/lib/Select/Select.js +910 -0
- package/lib/Select/Select.module.css +109 -0
- package/lib/Select/SelectWithAvatar.js +340 -0
- package/lib/Select/SelectWithIcon.js +530 -0
- package/lib/Select/__tests__/Select.spec.js +341 -0
- package/lib/Select/docs/GroupSelect__default.docs.js +173 -0
- package/lib/Select/docs/SelectWithAvatar__default.docs.js +124 -0
- package/lib/Select/docs/SelectWithIcon__default.docs.js +165 -0
- package/lib/Select/docs/Select__default.docs.js +313 -0
- package/lib/Select/props/defaultProps.js +112 -0
- package/lib/Select/props/propTypes.js +280 -0
- package/lib/Stencils/Stencils.js +57 -0
- package/lib/Stencils/Stencils.module.css +96 -0
- package/lib/Stencils/__tests__/Stencils.spec.js +72 -0
- package/lib/Stencils/__tests__/__snapshots__/Stencils.spec.js.snap +49 -0
- package/lib/Stencils/docs/Stencils__custom.docs.js +72 -0
- package/lib/Stencils/docs/Stencils__default.docs.js +77 -0
- package/lib/Stencils/props/defaultProps.js +13 -0
- package/lib/Stencils/props/propTypes.js +15 -0
- package/lib/Switch/Switch.js +123 -0
- package/lib/Switch/Switch.module.css +111 -0
- package/lib/Switch/docs/Switch__custom.docs.js +180 -0
- package/lib/Switch/docs/Switch__default.docs.js +134 -0
- package/lib/Switch/props/defaultProps.js +17 -0
- package/lib/Switch/props/propTypes.js +35 -0
- package/lib/Tab/Tab.js +116 -0
- package/lib/Tab/Tab.module.css +101 -0
- package/lib/Tab/TabContent.js +33 -0
- package/lib/Tab/TabContent.module.css +4 -0
- package/lib/Tab/TabContentWrapper.js +33 -0
- package/lib/Tab/TabWrapper.js +69 -0
- package/lib/Tab/Tabs.js +581 -0
- package/lib/Tab/Tabs.module.css +141 -0
- package/lib/Tab/__tests__/Tab.spec.js +119 -0
- package/lib/Tab/__tests__/TabContent.spec.js +18 -0
- package/lib/Tab/__tests__/TabContentWrapper.spec.js +51 -0
- package/lib/Tab/__tests__/TabWrapper.spec.js +88 -0
- package/lib/Tab/__tests__/Tabs.spec.js +109 -0
- package/lib/Tab/docs/Tab__default.docs.js +283 -0
- package/lib/Tab/docs/tabdocs.module.css +29 -0
- package/lib/Tab/index.js +41 -0
- package/lib/Tab/props/defaultProps.js +50 -0
- package/lib/Tab/props/propTypes.js +114 -0
- package/lib/Tag/Tag.js +177 -0
- package/lib/Tag/Tag.module.css +255 -0
- package/lib/Tag/__tests__/Tag.spec.js +29 -0
- package/lib/Tag/docs/Tag__custom.docs.js +397 -0
- package/lib/Tag/docs/Tag__default.docs.js +352 -0
- package/lib/Tag/props/defaultProps.js +20 -0
- package/lib/Tag/props/propTypes.js +42 -0
- package/lib/TextBox/TextBox.js +193 -0
- package/lib/TextBox/TextBox.module.css +157 -0
- package/lib/TextBox/__tests__/TextBox.spec.js +195 -0
- package/lib/TextBox/__tests__/__snapshots__/TextBox.spec.js.snap +127 -0
- package/lib/TextBox/docs/TextBox__custom.docs.js +72 -0
- package/lib/TextBox/docs/TextBox__default.docs.js +69 -0
- package/lib/TextBox/docs/TextBox__size.docs.js +67 -0
- package/lib/TextBox/docs/TextBox__variant.docs.js +67 -0
- package/lib/TextBox/props/defaultProps.js +26 -0
- package/lib/TextBox/props/propTypes.js +57 -0
- package/lib/TextBoxIcon/TextBoxIcon.js +187 -0
- package/lib/TextBoxIcon/TextBoxIcon.module.css +78 -0
- package/lib/TextBoxIcon/__tests__/TextBoxIcon.spec.js +219 -0
- package/lib/TextBoxIcon/__tests__/__snapshots__/TextBoxIcon.spec.js.snap +334 -0
- package/lib/TextBoxIcon/docs/TextBoxIcon__custom.docs.js +118 -0
- package/lib/TextBoxIcon/docs/TextBoxIcon__default.docs.js +90 -0
- package/lib/TextBoxIcon/props/defaultProps.js +28 -0
- package/lib/TextBoxIcon/props/propTypes.js +57 -0
- package/lib/Textarea/Textarea.js +130 -0
- package/lib/Textarea/Textarea.module.css +139 -0
- package/lib/Textarea/__tests__/Textarea.spec.js +174 -0
- package/lib/Textarea/__tests__/__snapshots__/Textarea.spec.js.snap +97 -0
- package/lib/Textarea/docs/Textarea__animated.docs.js +70 -0
- package/lib/Textarea/docs/Textarea__custom.docs.js +111 -0
- package/lib/Textarea/docs/Textarea__default.docs.js +105 -0
- package/lib/Textarea/docs/Textarea__disabled.docs.js +58 -0
- package/lib/Textarea/props/defaultProps.js +23 -0
- package/lib/Textarea/props/propTypes.js +39 -0
- package/lib/Tooltip/Tooltip.js +516 -0
- package/lib/Tooltip/Tooltip.module.css +109 -0
- package/lib/Tooltip/__tests__/Tooltip.spec.js +75 -0
- package/lib/Tooltip/docs/Tooltip__default.docs.js +402 -0
- package/lib/Tooltip/props/defaultProps.js +11 -0
- package/lib/Tooltip/props/propTypes.js +16 -0
- package/lib/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +100 -0
- package/lib/VelocityAnimation/VelocityAnimation/docs/VelocityAnimation__demo.docs.js +123 -0
- package/lib/VelocityAnimation/VelocityAnimation/props/defaultProps.js +14 -0
- package/lib/VelocityAnimation/VelocityAnimation/props/propTypes.js +20 -0
- package/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +131 -0
- package/lib/VelocityAnimation/VelocityAnimationGroup/docs/VelocityAnimationGroup__demo.docs.js +174 -0
- package/lib/VelocityAnimation/VelocityAnimationGroup/props/defaultProps.js +22 -0
- package/lib/VelocityAnimation/VelocityAnimationGroup/props/propTypes.js +27 -0
- package/lib/common/animation.module.css +624 -0
- package/lib/common/avatarsizes.module.css +45 -0
- package/lib/common/basic.module.css +33 -0
- package/lib/common/basicReset.module.css +40 -0
- package/lib/common/common.module.css +525 -0
- package/lib/common/customscroll.module.css +89 -0
- package/lib/common/docStyle.module.css +766 -0
- package/lib/common/reset.module.css +12 -0
- package/lib/common/transition.module.css +146 -0
- package/lib/css.js +42 -0
- package/lib/deprecated/AdvancedMultiSelect.module.css +127 -0
- package/lib/deprecated/PortalLayer/PortalLayer.js +126 -0
- package/lib/deprecated/PortalLayer/docs/PortalLayer__default.docs.js +111 -0
- package/lib/deprecated/PortalLayer/props/defaultProps.js +12 -0
- package/lib/deprecated/PortalLayer/props/propTypes.js +19 -0
- package/lib/deprecated/advancedMultiSelectVariableJson.js +82 -0
- package/lib/index.js +1245 -0
- package/lib/semantic/Button/Button.js +81 -0
- package/lib/semantic/Button/docs/Button__default.docs.js +43 -0
- package/lib/semantic/Button/props/defaultProps.js +19 -0
- package/lib/semantic/Button/props/propTypes.js +34 -0
- package/lib/semantic/Button/semanticButton.module.css +9 -0
- package/lib/utils/Common.js +391 -0
- package/lib/utils/ContextOptimizer.js +43 -0
- package/lib/utils/__tests__/constructFullName.spec.js +11 -0
- package/lib/utils/__tests__/debounce.spec.js +39 -0
- package/lib/utils/__tests__/getInitial.spec.js +25 -0
- package/lib/utils/constant.js +10 -0
- package/lib/utils/constructFullName.js +25 -0
- package/lib/utils/datetime/common.js +206 -0
- package/lib/utils/debounce.js +25 -0
- package/lib/utils/dropDownUtils.js +491 -0
- package/lib/utils/dummyFunction.js +8 -0
- package/lib/utils/getHTMLFontSize.js +10 -0
- package/lib/utils/getInitial.js +27 -0
- package/lib/utils/scrollTo.js +20 -0
- package/lib/utils/shallowEqual.js +33 -0
- package/package.json +1 -1
|
@@ -14,6 +14,8 @@
|
|
|
14
14
|
}
|
|
15
15
|
.disabled,.readonly {
|
|
16
16
|
--textboxicon_icon_cursor: not-allowed;
|
|
17
|
+
}
|
|
18
|
+
.disabled, .readonly {
|
|
17
19
|
cursor: not-allowed;
|
|
18
20
|
}
|
|
19
21
|
.icon {
|
|
@@ -34,15 +36,20 @@
|
|
|
34
36
|
.line {
|
|
35
37
|
position: absolute;
|
|
36
38
|
bottom: 0;
|
|
37
|
-
left: 0;
|
|
38
|
-
right: 0;
|
|
39
39
|
min-height: 1px;
|
|
40
40
|
transition: var(--zd_transition2);
|
|
41
|
-
transform: perspective(1px);
|
|
42
41
|
height: var(--textboxicon_line_height);
|
|
42
|
+
transform: perspective(1px);
|
|
43
|
+
}
|
|
44
|
+
[dir=ltr] .line {
|
|
45
|
+
left: 0;
|
|
46
|
+
right: 0;
|
|
47
|
+
}
|
|
48
|
+
[dir=rtl] .line {
|
|
49
|
+
right: 0;
|
|
50
|
+
left: 0;
|
|
43
51
|
}
|
|
44
|
-
.line,
|
|
45
|
-
.borderColor_default {
|
|
52
|
+
.line, .borderColor_default {
|
|
46
53
|
background-color: var(--textboxicon_line_color);
|
|
47
54
|
}
|
|
48
55
|
.borderColor_transparent {
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import TextBoxIcon from '../TextBoxIcon';
|
|
3
|
-
import renderer from 'react-test-renderer';
|
|
3
|
+
import renderer from 'react-test-renderer';
|
|
4
|
+
|
|
5
|
+
// children: PropTypes.node,
|
|
4
6
|
// disabled: PropTypes.bool,
|
|
5
7
|
// iconRotated: PropTypes.bool,
|
|
6
8
|
// id: PropTypes.string,
|
|
@@ -134,7 +136,9 @@ describe('TextBoxIcon component', () => {
|
|
|
134
136
|
text: "Text Box Working"
|
|
135
137
|
}));
|
|
136
138
|
expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBoxIcon').getAttribute('placeholder')).toMatch(/Text Box/);
|
|
137
|
-
});
|
|
139
|
+
});
|
|
140
|
+
|
|
141
|
+
// it('Check disabled works', () => {
|
|
138
142
|
// let renderedDOM = TestUtils.renderIntoDocument(
|
|
139
143
|
// <TextBoxIcon maxLength='100' placeHolder='Text Box' size='medium' variant='primary' value='Text Box Working' disabled />
|
|
140
144
|
// );
|
|
@@ -150,6 +154,7 @@ describe('TextBoxIcon component', () => {
|
|
|
150
154
|
// pass
|
|
151
155
|
// ).toBe(true);
|
|
152
156
|
// });
|
|
157
|
+
|
|
153
158
|
// it('Check readOnly works', () => {
|
|
154
159
|
// let renderedDOM = TestUtils.renderIntoDocument(
|
|
155
160
|
// <TextBoxIcon maxLength='100' placeHolder='Text Box' size='medium' variant='primary' value='Text Box Working' readOnly />
|
package/es/Textarea/Textarea.js
CHANGED
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign
|
|
2
|
-
|
|
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); }
|
|
3
2
|
import React from 'react';
|
|
4
3
|
import { defaultProps } from './props/defaultProps';
|
|
5
4
|
import { propTypes } from './props/propTypes';
|
|
6
5
|
/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['resizeX', 'resizeY', 'noresize', 'resizeboth', 'xsmall', 'small', 'medium', 'large', 'xlarge', 'default', 'primary'] }] */
|
|
7
|
-
|
|
8
6
|
import style from './Textarea.module.css';
|
|
9
7
|
export default class Textarea extends React.Component {
|
|
10
8
|
constructor(props) {
|
|
@@ -13,7 +11,6 @@ export default class Textarea extends React.Component {
|
|
|
13
11
|
this.onKeyDown = this.onKeyDown.bind(this);
|
|
14
12
|
this.onBlur = this.onBlur.bind(this);
|
|
15
13
|
}
|
|
16
|
-
|
|
17
14
|
onChange(e) {
|
|
18
15
|
e && e.preventDefault();
|
|
19
16
|
let {
|
|
@@ -21,7 +18,6 @@ export default class Textarea extends React.Component {
|
|
|
21
18
|
} = this.props;
|
|
22
19
|
onChange && onChange(e.target.value, e);
|
|
23
20
|
}
|
|
24
|
-
|
|
25
21
|
onBlur(e) {
|
|
26
22
|
e && e.preventDefault();
|
|
27
23
|
let {
|
|
@@ -29,14 +25,12 @@ export default class Textarea extends React.Component {
|
|
|
29
25
|
} = this.props;
|
|
30
26
|
onBlur && onBlur(e.target.value, e);
|
|
31
27
|
}
|
|
32
|
-
|
|
33
28
|
onKeyDown(e) {
|
|
34
29
|
let {
|
|
35
30
|
onKeyDown
|
|
36
31
|
} = this.props;
|
|
37
32
|
onKeyDown && onKeyDown(e);
|
|
38
33
|
}
|
|
39
|
-
|
|
40
34
|
render() {
|
|
41
35
|
let {
|
|
42
36
|
size,
|
|
@@ -72,19 +66,15 @@ export default class Textarea extends React.Component {
|
|
|
72
66
|
none: 'noresize'
|
|
73
67
|
};
|
|
74
68
|
let options = {};
|
|
75
|
-
|
|
76
69
|
if (isReadOnly) {
|
|
77
70
|
options.readOnly = 'readOnly';
|
|
78
71
|
}
|
|
79
|
-
|
|
80
72
|
if (isDisabled) {
|
|
81
73
|
options.disabled = 'disabled';
|
|
82
74
|
}
|
|
83
|
-
|
|
84
75
|
if (autoFocus) {
|
|
85
76
|
options.autoFocus = true;
|
|
86
77
|
}
|
|
87
|
-
|
|
88
78
|
let classList = needAppearance ? `${style.container} ${style[size]} ${style[variant]} ${needBorder ? style.needBorder : style.noBorder} ${resize ? style[resizes[resize]] : style[resizes.none]} ${animated ? `${style[`${size}animated`]}` : ''} ${isDisabled && !needEffect || isReadOnly && !needEffect ? '' : style.effect}` : `${style.basic}`;
|
|
89
79
|
return /*#__PURE__*/React.createElement("textarea", _extends({
|
|
90
80
|
"aria-label": ariaLabel,
|
|
@@ -103,11 +93,9 @@ export default class Textarea extends React.Component {
|
|
|
103
93
|
id: htmlId
|
|
104
94
|
}));
|
|
105
95
|
}
|
|
106
|
-
|
|
107
96
|
}
|
|
108
97
|
Textarea.defaultProps = defaultProps;
|
|
109
98
|
Textarea.propTypes = propTypes;
|
|
110
|
-
|
|
111
99
|
if (false) {
|
|
112
100
|
Textarea.docs = {
|
|
113
101
|
componentGroup: 'Form Elements',
|
|
@@ -19,11 +19,10 @@
|
|
|
19
19
|
appearance: none;
|
|
20
20
|
outline: 0;
|
|
21
21
|
letter-spacing: 0.1px;
|
|
22
|
-
cursor: var(--textarea_cursor);
|
|
23
22
|
color: var(--textarea_text_color);
|
|
23
|
+
cursor: var(--textarea_cursor);
|
|
24
24
|
}
|
|
25
|
-
.basic,
|
|
26
|
-
.noBorder {
|
|
25
|
+
.basic, .noBorder {
|
|
27
26
|
border-width: var(--textarea_border_width);
|
|
28
27
|
}
|
|
29
28
|
.basic::placeholder {
|
|
@@ -61,20 +60,20 @@
|
|
|
61
60
|
composes: basic;
|
|
62
61
|
transition: border var(--zd_transition2) linear 0s,
|
|
63
62
|
height var(--zd_transition2) linear 0s;
|
|
64
|
-
-webkit-transition: border var(--zd_transition2) linear 0s,
|
|
65
|
-
height var(--zd_transition2) linear 0s;
|
|
66
63
|
-moz-transition: border var(--zd_transition2) linear 0s,
|
|
67
64
|
height var(--zd_transition2) linear 0s;
|
|
68
65
|
width: 100%;
|
|
69
66
|
max-width: 100%;
|
|
70
67
|
min-width: 100px;
|
|
71
|
-
border-style: solid;
|
|
72
68
|
font-size: var(--textarea_font_size);
|
|
73
69
|
line-height: var(--textarea_line_height);
|
|
70
|
+
height: var(--textarea_height);
|
|
71
|
+
-webkit-transition: border var(--zd_transition2) linear 0s,
|
|
72
|
+
height var(--zd_transition2) linear 0s;
|
|
73
|
+
border-style: solid;
|
|
74
74
|
background-color: var(--zdt_textarea_default_bg);
|
|
75
75
|
border-color: var(--textarea_border_color);
|
|
76
76
|
padding: var(--textarea_padding);
|
|
77
|
-
height: var(--textarea_height);
|
|
78
77
|
}
|
|
79
78
|
.needBorder {
|
|
80
79
|
--textarea_border_width: 0 0 1px 0;
|
|
@@ -135,7 +135,8 @@ describe('Textarea component', () => {
|
|
|
135
135
|
needBorder: false
|
|
136
136
|
}));
|
|
137
137
|
expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'TextareaComp').className).toMatch(/noBorder/);
|
|
138
|
-
});
|
|
138
|
+
});
|
|
139
|
+
// it('Check disabled works', () => {
|
|
139
140
|
// let renderedDOM = TestUtils.renderIntoDocument(
|
|
140
141
|
// <Textarea maxLength='100' placeHolder='Text Area' resize='vertical' size='large' variant='primary' text='Text Area Working' disabled needBorder={false} />
|
|
141
142
|
// );
|
|
@@ -151,7 +152,6 @@ describe('Textarea component', () => {
|
|
|
151
152
|
// pass
|
|
152
153
|
// ).toBe(true);
|
|
153
154
|
// });
|
|
154
|
-
|
|
155
155
|
it('Check check onchange works', () => {
|
|
156
156
|
let mockfn = jest.fn();
|
|
157
157
|
let renderedDOM = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(Textarea, {
|
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,25 +1,28 @@
|
|
|
1
1
|
.tooltiptext {
|
|
2
2
|
position: fixed;
|
|
3
3
|
z-index: 9999999; /*Hook for editor alert*/
|
|
4
|
-
animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
|
|
5
4
|
pointer-events: none;
|
|
6
5
|
box-shadow: 0 4px 12px 0 var(--zdt_tooltip_default_box_shadow);
|
|
7
6
|
border-radius: var(--zd_size4);
|
|
7
|
+
}[dir=ltr] .tooltiptext {
|
|
8
|
+
animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
|
|
9
|
+
}[dir=rtl] .tooltiptext {
|
|
10
|
+
animation: tooltip-grow var(--zd_transition7) cubic-bezier(0.175, 0.885, 0.32, 1.15);
|
|
8
11
|
}
|
|
9
12
|
.tooltipcont {
|
|
10
|
-
background-color: var(--zdt_tooltip_default_bg);
|
|
11
13
|
color: var(--zdt_tooltip_default_text);
|
|
12
|
-
padding: 0 var(--zd_size10);
|
|
13
14
|
font-size: var(--zd_font_size13);
|
|
14
15
|
font-family: var(--zd_semibold);
|
|
15
16
|
word-break: break-word;
|
|
16
|
-
border-style: solid;
|
|
17
|
-
border-color: transparent;
|
|
18
|
-
border-radius: var(--zd_size4);
|
|
19
17
|
max-width: 420px;
|
|
20
18
|
line-height: var(--zd_size20);
|
|
21
19
|
min-height: var(--zd_size24);
|
|
22
20
|
overflow: hidden;
|
|
21
|
+
background-color: var(--zdt_tooltip_default_bg);
|
|
22
|
+
padding: 0 var(--zd_size10);
|
|
23
|
+
border-style: solid;
|
|
24
|
+
border-color: transparent;
|
|
25
|
+
border-radius: var(--zd_size4);
|
|
23
26
|
}
|
|
24
27
|
.tooltipWrapCont {
|
|
25
28
|
white-space: pre-wrap;
|
|
@@ -27,7 +30,6 @@
|
|
|
27
30
|
.tooltipNormalCont {
|
|
28
31
|
white-space: normal;
|
|
29
32
|
}
|
|
30
|
-
/*rtl:begin:ignore*/
|
|
31
33
|
.tooltiparrow {
|
|
32
34
|
content: '';
|
|
33
35
|
position: absolute;
|
|
@@ -73,7 +75,6 @@
|
|
|
73
75
|
.arrowRight {
|
|
74
76
|
transform: rotate(135deg) translateY(50%);
|
|
75
77
|
}
|
|
76
|
-
/*rtl:end:ignore*/
|
|
77
78
|
@keyframes tooltip-grow {
|
|
78
79
|
from {
|
|
79
80
|
opacity: 0;
|
|
@@ -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));
|