@zohodesk/components 1.0.0-temp-164 → 1.0.0-temp-166
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 +34 -0
- package/assets/Appearance/dark/mode/Component_DarkMode.module.css +151 -151
- package/assets/Appearance/dark/themes/blue/blue_CTA_DarkModifyCategory.module.css +450 -450
- package/assets/Appearance/dark/themes/blue/blue_CTA_DarkTheme.module.css +30 -30
- package/assets/Appearance/dark/themes/green/green_CTA_DarkModifyCategory.module.css +450 -450
- package/assets/Appearance/dark/themes/green/green_CTA_DarkTheme.module.css +30 -30
- package/assets/Appearance/dark/themes/orange/orange_CTA_DarkModifyCategory.module.css +450 -450
- package/assets/Appearance/dark/themes/orange/orange_CTA_DarkTheme.module.css +30 -30
- package/assets/Appearance/dark/themes/red/red_CTA_DarkModifyCategory.module.css +450 -450
- package/assets/Appearance/dark/themes/red/red_CTA_DarkTheme.module.css +30 -30
- package/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkModifyCategory.module.css +450 -450
- package/assets/Appearance/dark/themes/yellow/yellow_CTA_DarkTheme.module.css +30 -30
- package/assets/Appearance/light/mode/Component_LightMode.module.css +148 -148
- package/assets/Appearance/light/themes/blue/blue_CTA_LightModifyCategory.module.css +450 -450
- package/assets/Appearance/light/themes/blue/blue_CTA_LightTheme.module.css +30 -30
- package/assets/Appearance/light/themes/green/green_CTA_LightModifyCategory.module.css +450 -450
- package/assets/Appearance/light/themes/green/green_CTA_LightTheme.module.css +30 -30
- package/assets/Appearance/light/themes/orange/orange_CTA_LightModifyCategory.module.css +450 -450
- package/assets/Appearance/light/themes/orange/orange_CTA_LightTheme.module.css +30 -30
- package/assets/Appearance/light/themes/red/red_CTA_LightModifyCategory.module.css +450 -450
- package/assets/Appearance/light/themes/red/red_CTA_LightTheme.module.css +30 -30
- package/assets/Appearance/light/themes/yellow/yellow_CTA_LightModifyCategory.module.css +450 -450
- package/assets/Appearance/light/themes/yellow/yellow_CTA_LightTheme.module.css +30 -30
- package/assets/Appearance/pureDark/mode/Component_PureDarkMode.module.css +153 -153
- package/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkModifyCategory.module.css +450 -450
- package/assets/Appearance/pureDark/themes/blue/blue_CTA_PureDarkTheme.module.css +30 -30
- package/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkModifyCategory.module.css +450 -450
- package/assets/Appearance/pureDark/themes/green/green_CTA_PureDarkTheme.module.css +30 -30
- package/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkModifyCategory.module.css +450 -450
- package/assets/Appearance/pureDark/themes/orange/orange_CTA_PureDarkTheme.module.css +30 -30
- package/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkModifyCategory.module.css +450 -450
- package/assets/Appearance/pureDark/themes/red/red_CTA_PureDarkTheme.module.css +30 -30
- package/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkModifyCategory.module.css +450 -450
- package/assets/Appearance/pureDark/themes/yellow/yellow_CTA_PureDarkTheme.module.css +30 -30
- package/es/Accordion/Accordion.js +8 -3
- package/es/Accordion/AccordionItem.js +5 -2
- package/es/Animation/Animation.js +3 -3
- package/es/AppContainer/AppContainer.js +27 -10
- package/es/AppContainer/AppContainer.module.css +2 -2
- package/es/AppContainer/props/defaultProps.js +2 -1
- package/es/AppContainer/props/propTypes.js +1 -0
- package/es/Avatar/Avatar.js +26 -11
- package/es/Avatar/Avatar.module.css +18 -18
- package/es/AvatarTeam/AvatarTeam.js +4 -3
- package/es/AvatarTeam/AvatarTeam.module.css +35 -35
- package/es/Button/Button.js +5 -3
- package/es/Button/css/Button.module.css +70 -70
- package/es/Buttongroup/Buttongroup.js +4 -3
- package/es/Buttongroup/Buttongroup.module.css +14 -15
- package/es/Card/Card.js +21 -10
- package/es/CheckBox/CheckBox.js +5 -3
- package/es/CheckBox/CheckBox.module.css +15 -15
- package/es/DateTime/CalendarView.js +33 -20
- package/es/DateTime/DateTime.js +113 -12
- package/es/DateTime/DateTime.module.css +39 -39
- package/es/DateTime/DateTimePopupFooter.js +4 -2
- package/es/DateTime/DateTimePopupHeader.js +8 -2
- package/es/DateTime/DateWidget.js +100 -35
- package/es/DateTime/DateWidget.module.css +5 -5
- package/es/DateTime/DaysRow.js +4 -2
- package/es/DateTime/Time.js +10 -2
- package/es/DateTime/YearView.js +28 -4
- package/es/DateTime/YearView.module.css +15 -15
- package/es/DateTime/__tests__/CalendarView.spec.js +1 -0
- package/es/DateTime/__tests__/DateTime.spec.js +1 -0
- package/es/DateTime/__tests__/DateWidget.spec.js +2 -3
- package/es/DateTime/common.js +3 -0
- package/es/DateTime/constants.js +1 -0
- package/es/DateTime/dateFormatUtils/dateFormat.js +63 -30
- package/es/DateTime/dateFormatUtils/dateFormats.js +0 -1
- package/es/DateTime/dateFormatUtils/dayChange.js +13 -4
- package/es/DateTime/dateFormatUtils/index.js +32 -2
- package/es/DateTime/dateFormatUtils/monthChange.js +8 -0
- package/es/DateTime/dateFormatUtils/timeChange.js +22 -6
- package/es/DateTime/dateFormatUtils/yearChange.js +11 -2
- package/es/DateTime/objectUtils.js +14 -20
- package/es/DateTime/props/defaultProps.js +2 -1
- package/es/DateTime/typeChecker.js +3 -0
- package/es/DateTime/validator.js +58 -6
- package/es/DropBox/DropBox.js +9 -5
- package/es/DropBox/DropBoxElement/DropBoxElement.js +18 -6
- package/es/DropBox/DropBoxElement/css/DropBoxElement.module.css +85 -79
- package/es/DropBox/DropBoxElement/css/cssJSLogic.js +6 -4
- package/es/DropBox/DropBoxElement/props/propTypes.js +1 -1
- package/es/DropBox/DropBoxElement/useDropboxPosCalc.js +3 -0
- package/es/DropBox/__tests__/DropBox.spec.js +2 -2
- package/es/DropBox/css/DropBox.module.css +6 -6
- package/es/DropBox/props/defaultProps.js +1 -2
- package/es/DropBox/props/propTypes.js +1 -2
- package/es/DropDown/DropDown.js +10 -5
- package/es/DropDown/DropDown.module.css +2 -2
- package/es/DropDown/DropDownHeading.js +5 -5
- package/es/DropDown/DropDownHeading.module.css +6 -6
- package/es/DropDown/DropDownItem.js +8 -1
- package/es/DropDown/DropDownItem.module.css +12 -12
- package/es/DropDown/DropDownSearch.js +4 -0
- package/es/DropDown/DropDownSearch.module.css +3 -3
- package/es/DropDown/DropDownSeparator.js +1 -0
- package/es/DropDown/DropDownSeparator.module.css +2 -2
- package/es/DropDown/__tests__/DropDown.spec.js +1 -2
- package/es/Heading/Heading.js +3 -3
- package/es/Heading/Heading.module.css +2 -2
- package/es/Label/Label.js +3 -3
- package/es/Label/Label.module.css +5 -5
- package/es/Layout/Box.js +17 -3
- package/es/Layout/Container.js +16 -4
- package/es/Layout/Layout.module.css +15 -15
- package/es/Layout/index.js +1 -2
- package/es/Layout/props/defaultProps.js +2 -0
- package/es/Layout/props/propTypes.js +2 -0
- package/es/Layout/utils.js +5 -1
- package/es/ListItem/ListContainer.js +8 -3
- package/es/ListItem/ListItem.js +9 -3
- package/es/ListItem/ListItem.module.css +38 -38
- package/es/ListItem/ListItemWithAvatar.js +9 -3
- package/es/ListItem/ListItemWithCheckBox.js +7 -2
- package/es/ListItem/ListItemWithIcon.js +8 -3
- package/es/ListItem/ListItemWithRadio.js +7 -3
- package/es/Modal/Modal.js +28 -11
- package/es/MultiSelect/AdvancedGroupMultiSelect.js +90 -13
- package/es/MultiSelect/AdvancedMultiSelect.js +33 -9
- package/es/MultiSelect/EmptyState.js +6 -0
- package/es/MultiSelect/MultiSelect.js +100 -32
- package/es/MultiSelect/MultiSelect.module.css +31 -31
- package/es/MultiSelect/MultiSelectHeader.js +3 -0
- package/es/MultiSelect/MultiSelectWithAvatar.js +13 -6
- package/es/MultiSelect/SelectedOptions.js +6 -3
- package/es/MultiSelect/SelectedOptions.module.css +5 -5
- package/es/MultiSelect/Suggestions.js +7 -3
- package/es/MultiSelect/__tests__/MultiSelect.spec.js +4 -6
- package/es/MultiSelect/props/propTypes.js +2 -0
- package/es/PopOver/PopOver.js +18 -2
- package/es/PopOver/__tests__/PopOver.spec.js +2 -1
- package/es/Popup/Popup.js +77 -27
- package/es/Popup/__tests__/Popup.spec.js +17 -5
- package/es/Popup/viewPort.js +16 -4
- package/es/Provider/IdProvider.js +10 -5
- package/es/Provider/LibraryContext.js +6 -4
- package/es/Provider/NumberGenerator/NumberGenerator.js +21 -7
- package/es/Provider/ZindexProvider.js +9 -2
- package/es/Radio/Radio.js +4 -2
- package/es/Radio/Radio.module.css +9 -9
- package/es/Responsive/CustomResponsive.js +30 -18
- package/es/Responsive/RefWrapper.js +6 -7
- package/es/Responsive/ResizeComponent.js +35 -25
- package/es/Responsive/ResizeObserver.js +26 -6
- package/es/Responsive/Responsive.js +34 -20
- package/es/Responsive/index.js +1 -3
- package/es/Responsive/sizeObservers.js +28 -7
- package/es/Responsive/utils/index.js +7 -5
- package/es/Responsive/utils/shallowCompare.js +7 -2
- package/es/Responsive/windowResizeObserver.js +7 -0
- package/es/ResponsiveDropBox/ResponsiveDropBox.js +4 -0
- package/es/ResponsiveDropBox/ResponsiveDropBox.module.css +2 -2
- package/es/Ribbon/Ribbon.js +4 -2
- package/es/Ribbon/Ribbon.module.css +46 -48
- package/es/RippleEffect/RippleEffect.js +1 -3
- package/es/Select/GroupSelect.js +59 -14
- package/es/Select/Select.js +81 -34
- package/es/Select/Select.module.css +23 -23
- package/es/Select/SelectWithAvatar.js +19 -4
- package/es/Select/SelectWithIcon.js +48 -6
- package/es/Select/__tests__/Select.spec.js +6 -8
- package/es/Select/props/propTypes.js +1 -0
- package/es/Stencils/Stencils.js +3 -3
- package/es/Stencils/Stencils.module.css +11 -11
- package/es/Switch/Switch.js +6 -3
- package/es/Switch/Switch.module.css +23 -23
- package/es/Tab/Tab.js +4 -4
- package/es/Tab/Tab.module.css +14 -14
- package/es/Tab/TabContent.js +1 -0
- package/es/Tab/TabContentWrapper.js +2 -0
- package/es/Tab/TabWrapper.js +5 -2
- package/es/Tab/Tabs.js +56 -8
- package/es/Tab/Tabs.module.css +24 -42
- package/es/Tab/__tests__/Tab.spec.js +1 -3
- package/es/Tab/__tests__/TabWrapper.spec.js +1 -0
- package/es/Tag/Tag.js +7 -3
- package/es/Tag/Tag.module.css +25 -25
- package/es/TextBox/TextBox.js +16 -3
- package/es/TextBox/TextBox.module.css +9 -9
- package/es/TextBox/__tests__/TextBox.spec.js +1 -4
- package/es/TextBoxIcon/TextBoxIcon.js +9 -2
- package/es/TextBoxIcon/TextBoxIcon.module.css +7 -7
- package/es/TextBoxIcon/__tests__/TextBoxIcon.spec.js +2 -7
- package/es/Textarea/Textarea.js +13 -3
- package/es/Textarea/Textarea.module.css +21 -21
- package/es/Textarea/__tests__/Textarea.spec.js +2 -2
- package/es/Tooltip/Tooltip.js +60 -15
- package/es/Tooltip/Tooltip.module.css +5 -5
- package/es/Tooltip/__tests__/Tooltip.spec.js +5 -0
- package/es/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +3 -2
- package/es/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +7 -5
- package/es/common/animation.module.css +8 -8
- package/es/common/avatarsizes.module.css +16 -16
- package/es/common/basicReset.module.css +3 -3
- package/es/common/common.module.css +24 -24
- package/es/common/customscroll.module.css +2 -2
- package/es/deprecated/AdvancedMultiSelect.module.css +18 -18
- package/es/deprecated/PortalLayer/PortalLayer.js +25 -20
- package/es/semantic/Button/Button.js +4 -2
- package/es/semantic/Button/semanticButton.module.css +1 -1
- package/es/utils/Common.js +58 -9
- package/es/utils/ContextOptimizer.js +4 -5
- package/es/utils/__tests__/debounce.spec.js +2 -2
- package/es/utils/constructFullName.js +2 -0
- package/es/utils/css/compileClassNames.js +5 -0
- package/es/utils/css/mergeStyle.js +7 -6
- package/es/utils/css/utils.js +1 -0
- package/es/utils/datetime/GMTZones.js +48 -0
- package/es/utils/datetime/common.js +31 -7
- package/es/utils/debounce.js +5 -1
- package/es/utils/dropDownUtils.js +68 -11
- package/es/utils/getInitial.js +4 -0
- package/es/utils/shallowEqual.js +6 -0
- package/lib/Accordion/Accordion.js +43 -18
- package/lib/Accordion/AccordionItem.js +41 -18
- package/lib/Accordion/__tests__/Accordion.spec.js +3 -0
- package/lib/Accordion/index.js +3 -0
- package/lib/Accordion/props/propTypes.js +3 -0
- package/lib/Animation/Animation.js +38 -18
- package/lib/Animation/__tests__/Animation.spec.js +11 -7
- package/lib/Animation/props/propTypes.js +3 -0
- package/lib/AppContainer/AppContainer.js +66 -26
- package/lib/AppContainer/AppContainer.module.css +2 -2
- package/lib/AppContainer/props/defaultProps.js +2 -1
- package/lib/AppContainer/props/propTypes.js +4 -0
- package/lib/Avatar/Avatar.js +81 -38
- package/lib/Avatar/Avatar.module.css +18 -18
- package/lib/Avatar/__tests__/Avatar.spec.js +44 -0
- package/lib/Avatar/props/propTypes.js +3 -0
- package/lib/AvatarTeam/AvatarTeam.js +53 -30
- package/lib/AvatarTeam/AvatarTeam.module.css +35 -35
- package/lib/AvatarTeam/__tests__/AvatarTeam.spec.js +13 -0
- package/lib/AvatarTeam/props/propTypes.js +3 -0
- package/lib/Button/Button.js +32 -20
- package/lib/Button/css/Button.module.css +70 -70
- package/lib/Button/css/cssJSLogic.js +18 -17
- package/lib/Button/index.js +3 -0
- package/lib/Button/props/defaultProps.js +2 -0
- package/lib/Button/props/propTypes.js +3 -0
- package/lib/Buttongroup/Buttongroup.js +33 -12
- package/lib/Buttongroup/Buttongroup.module.css +14 -15
- package/lib/Buttongroup/__test__/Buttongroup.spec.js +10 -0
- package/lib/Buttongroup/props/propTypes.js +3 -0
- package/lib/Card/Card.js +102 -46
- package/lib/Card/__tests__/Card.spec.js +10 -1
- package/lib/Card/index.js +4 -0
- package/lib/Card/props/propTypes.js +3 -0
- package/lib/CheckBox/CheckBox.js +71 -47
- package/lib/CheckBox/CheckBox.module.css +15 -15
- package/lib/CheckBox/__tests__/CheckBox.spec.js +3 -0
- package/lib/CheckBox/props/propTypes.js +3 -0
- package/lib/DateTime/CalendarView.js +83 -42
- package/lib/DateTime/DateTime.js +287 -160
- package/lib/DateTime/DateTime.module.css +39 -39
- package/lib/DateTime/DateTimePopupFooter.js +31 -8
- package/lib/DateTime/DateTimePopupHeader.js +48 -17
- package/lib/DateTime/DateWidget.js +354 -250
- package/lib/DateTime/DateWidget.module.css +5 -5
- package/lib/DateTime/DaysRow.js +27 -5
- package/lib/DateTime/Time.js +73 -32
- package/lib/DateTime/YearView.js +77 -28
- package/lib/DateTime/YearView.module.css +15 -15
- package/lib/DateTime/__tests__/CalendarView.spec.js +13 -5
- package/lib/DateTime/__tests__/DateTime.spec.js +51 -37
- package/lib/DateTime/__tests__/DateWidget.spec.js +10 -8
- package/lib/DateTime/common.js +6 -0
- package/lib/DateTime/constants.js +1 -0
- package/lib/DateTime/dateFormatUtils/dateFormat.js +184 -122
- package/lib/DateTime/dateFormatUtils/dateFormats.js +0 -1
- package/lib/DateTime/dateFormatUtils/dayChange.js +14 -7
- package/lib/DateTime/dateFormatUtils/index.js +74 -16
- package/lib/DateTime/dateFormatUtils/monthChange.js +19 -9
- package/lib/DateTime/dateFormatUtils/timeChange.js +54 -22
- package/lib/DateTime/dateFormatUtils/yearChange.js +22 -11
- package/lib/DateTime/index.js +2 -0
- package/lib/DateTime/objectUtils.js +24 -20
- package/lib/DateTime/props/defaultProps.js +2 -1
- package/lib/DateTime/props/propTypes.js +11 -1
- package/lib/DateTime/typeChecker.js +4 -0
- package/lib/DateTime/validator.js +73 -10
- package/lib/DropBox/DropBox.js +36 -12
- package/lib/DropBox/DropBoxElement/DropBoxElement.js +68 -42
- package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css +85 -79
- package/lib/DropBox/DropBoxElement/css/cssJSLogic.js +43 -34
- package/lib/DropBox/DropBoxElement/props/propTypes.js +4 -1
- package/lib/DropBox/DropBoxElement/useDropboxPosCalc.js +14 -9
- package/lib/DropBox/__tests__/DropBox.spec.js +8 -4
- package/lib/DropBox/css/DropBox.module.css +6 -6
- package/lib/DropBox/css/cssJSLogic.js +3 -1
- package/lib/DropBox/props/defaultProps.js +8 -4
- package/lib/DropBox/props/propTypes.js +10 -4
- package/lib/DropDown/DropDown.js +54 -9
- package/lib/DropDown/DropDown.module.css +2 -2
- package/lib/DropDown/DropDownHeading.js +40 -20
- package/lib/DropDown/DropDownHeading.module.css +6 -6
- package/lib/DropDown/DropDownItem.js +44 -21
- package/lib/DropDown/DropDownItem.module.css +12 -12
- package/lib/DropDown/DropDownSearch.js +40 -17
- package/lib/DropDown/DropDownSearch.module.css +3 -3
- package/lib/DropDown/DropDownSeparator.js +24 -4
- package/lib/DropDown/DropDownSeparator.module.css +2 -2
- package/lib/DropDown/__tests__/DropDown.spec.js +15 -9
- package/lib/DropDown/__tests__/DropDownItem.spec.js +9 -4
- package/lib/DropDown/__tests__/DropDownSearch.spec.js +3 -0
- package/lib/DropDown/index.js +9 -0
- package/lib/DropDown/props/propTypes.js +6 -4
- package/lib/Heading/Heading.js +39 -16
- package/lib/Heading/Heading.module.css +2 -2
- package/lib/Heading/props/propTypes.js +3 -0
- package/lib/Label/Label.js +40 -19
- package/lib/Label/Label.module.css +5 -5
- package/lib/Label/__tests__/Label.spec.js +14 -1
- package/lib/Label/props/propTypes.js +3 -0
- package/lib/Layout/Box.js +39 -15
- package/lib/Layout/Container.js +37 -14
- package/lib/Layout/Layout.module.css +15 -15
- package/lib/Layout/__tests__/Box.spec.js +65 -49
- package/lib/Layout/__tests__/Container.spec.js +67 -50
- package/lib/Layout/index.js +3 -0
- package/lib/Layout/props/defaultProps.js +2 -0
- package/lib/Layout/props/propTypes.js +5 -0
- package/lib/Layout/utils.js +15 -1
- package/lib/ListItem/ListContainer.js +48 -27
- package/lib/ListItem/ListItem.js +69 -45
- package/lib/ListItem/ListItem.module.css +38 -38
- package/lib/ListItem/ListItemWithAvatar.js +75 -48
- package/lib/ListItem/ListItemWithCheckBox.js +64 -39
- package/lib/ListItem/ListItemWithIcon.js +68 -44
- package/lib/ListItem/ListItemWithRadio.js +65 -41
- package/lib/ListItem/index.js +7 -0
- package/lib/ListItem/props/propTypes.js +6 -4
- package/lib/Modal/Modal.js +45 -10
- package/lib/Modal/props/propTypes.js +3 -0
- package/lib/MultiSelect/AdvancedGroupMultiSelect.js +295 -166
- package/lib/MultiSelect/AdvancedMultiSelect.js +203 -125
- package/lib/MultiSelect/EmptyState.js +49 -24
- package/lib/MultiSelect/MultiSelect.js +324 -206
- package/lib/MultiSelect/MultiSelect.module.css +31 -31
- package/lib/MultiSelect/MultiSelectHeader.js +30 -8
- package/lib/MultiSelect/MultiSelectWithAvatar.js +106 -63
- package/lib/MultiSelect/SelectedOptions.js +43 -17
- package/lib/MultiSelect/SelectedOptions.module.css +5 -5
- package/lib/MultiSelect/Suggestions.js +64 -32
- package/lib/MultiSelect/__tests__/MultiSelect.spec.js +86 -75
- package/lib/MultiSelect/index.js +5 -0
- package/lib/MultiSelect/props/defaultProps.js +2 -0
- package/lib/MultiSelect/props/propTypes.js +5 -0
- package/lib/PopOver/PopOver.js +95 -49
- package/lib/PopOver/__tests__/PopOver.spec.js +4 -1
- package/lib/PopOver/index.js +4 -0
- package/lib/PopOver/props/propTypes.js +3 -0
- package/lib/Popup/Popup.js +158 -84
- package/lib/Popup/__tests__/Popup.spec.js +43 -8
- package/lib/Popup/viewPort.js +28 -14
- package/lib/Provider/AvatarSize.js +4 -0
- package/lib/Provider/Config.js +2 -0
- package/lib/Provider/CssProvider.js +4 -0
- package/lib/Provider/IdProvider.js +17 -6
- package/lib/Provider/LibraryContext.js +35 -15
- package/lib/Provider/LibraryContextInit.js +4 -0
- package/lib/Provider/NumberGenerator/NumberGenerator.js +44 -15
- package/lib/Provider/ZindexProvider.js +15 -3
- package/lib/Provider/index.js +5 -0
- package/lib/Radio/Radio.js +61 -38
- package/lib/Radio/Radio.module.css +9 -9
- package/lib/Radio/__tests__/Radiospec.js +9 -5
- package/lib/Radio/props/propTypes.js +3 -0
- package/lib/Responsive/CustomResponsive.js +73 -29
- package/lib/Responsive/RefWrapper.js +17 -11
- package/lib/Responsive/ResizeComponent.js +62 -36
- package/lib/Responsive/ResizeObserver.js +24 -10
- package/lib/Responsive/Responsive.js +80 -30
- package/lib/Responsive/index.js +4 -0
- package/lib/Responsive/props/propTypes.js +3 -0
- package/lib/Responsive/sizeObservers.js +53 -17
- package/lib/Responsive/utils/index.js +11 -3
- package/lib/Responsive/utils/shallowCompare.js +11 -2
- package/lib/Responsive/windowResizeObserver.js +8 -0
- package/lib/ResponsiveDropBox/ResponsiveDropBox.js +45 -17
- package/lib/ResponsiveDropBox/ResponsiveDropBox.module.css +2 -2
- package/lib/ResponsiveDropBox/props/propTypes.js +3 -0
- package/lib/Ribbon/Ribbon.js +34 -13
- package/lib/Ribbon/Ribbon.module.css +46 -48
- package/lib/Ribbon/__tests__/Ribbon.spec.js +22 -0
- package/lib/Ribbon/props/propTypes.js +3 -0
- package/lib/RippleEffect/RippleEffect.js +18 -10
- package/lib/RippleEffect/props/propTypes.js +3 -0
- package/lib/Select/GroupSelect.js +230 -130
- package/lib/Select/Select.js +292 -210
- package/lib/Select/Select.module.css +23 -23
- package/lib/Select/SelectWithAvatar.js +104 -56
- package/lib/Select/SelectWithIcon.js +134 -77
- package/lib/Select/__tests__/Select.spec.js +133 -91
- package/lib/Select/index.js +5 -0
- package/lib/Select/props/defaultProps.js +5 -4
- package/lib/Select/props/propTypes.js +4 -0
- package/lib/Stencils/Stencils.js +29 -10
- package/lib/Stencils/Stencils.module.css +11 -11
- package/lib/Stencils/__tests__/Stencils.spec.js +12 -0
- package/lib/Stencils/props/propTypes.js +3 -0
- package/lib/Switch/Switch.js +58 -34
- package/lib/Switch/Switch.module.css +23 -23
- package/lib/Switch/props/propTypes.js +3 -0
- package/lib/Tab/Tab.js +40 -27
- package/lib/Tab/Tab.module.css +14 -14
- package/lib/Tab/TabContent.js +12 -5
- package/lib/Tab/TabContentWrapper.js +13 -6
- package/lib/Tab/TabWrapper.js +37 -19
- package/lib/Tab/Tabs.js +173 -92
- package/lib/Tab/Tabs.module.css +24 -42
- package/lib/Tab/__tests__/Tab.spec.js +67 -58
- package/lib/Tab/__tests__/TabContent.spec.js +10 -6
- package/lib/Tab/__tests__/TabContentWrapper.spec.js +28 -20
- package/lib/Tab/__tests__/TabWrapper.spec.js +12 -0
- package/lib/Tab/__tests__/Tabs.spec.js +53 -39
- package/lib/Tab/index.js +6 -0
- package/lib/Tab/props/propTypes.js +3 -0
- package/lib/Tag/Tag.js +73 -43
- package/lib/Tag/Tag.module.css +25 -25
- package/lib/Tag/__tests__/Tag.spec.js +14 -8
- package/lib/Tag/props/propTypes.js +3 -0
- package/lib/TextBox/TextBox.js +86 -59
- package/lib/TextBox/TextBox.module.css +9 -9
- package/lib/TextBox/__tests__/TextBox.spec.js +14 -4
- package/lib/TextBox/props/propTypes.js +6 -4
- package/lib/TextBoxIcon/TextBoxIcon.js +79 -52
- package/lib/TextBoxIcon/TextBoxIcon.module.css +7 -7
- package/lib/TextBoxIcon/__tests__/TextBoxIcon.spec.js +14 -5
- package/lib/TextBoxIcon/props/propTypes.js +3 -0
- package/lib/Textarea/Textarea.js +55 -29
- package/lib/Textarea/Textarea.module.css +21 -21
- package/lib/Textarea/__tests__/Textarea.spec.js +14 -2
- package/lib/Textarea/props/propTypes.js +3 -0
- package/lib/Tooltip/Tooltip.js +96 -32
- package/lib/Tooltip/Tooltip.module.css +5 -5
- package/lib/Tooltip/__tests__/Tooltip.spec.js +24 -3
- package/lib/Tooltip/props/propTypes.js +3 -0
- package/lib/VelocityAnimation/VelocityAnimation/VelocityAnimation.js +40 -16
- package/lib/VelocityAnimation/VelocityAnimation/props/propTypes.js +3 -0
- package/lib/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js +53 -25
- package/lib/VelocityAnimation/VelocityAnimationGroup/props/propTypes.js +3 -0
- package/lib/VelocityAnimation/index.js +3 -0
- package/lib/common/animation.module.css +8 -8
- package/lib/common/avatarsizes.module.css +16 -16
- package/lib/common/basicReset.module.css +3 -3
- package/lib/common/common.module.css +24 -24
- package/lib/common/customscroll.module.css +2 -2
- package/lib/css.js +40 -0
- package/lib/deprecated/AdvancedMultiSelect.module.css +18 -18
- package/lib/deprecated/PortalLayer/PortalLayer.js +46 -23
- package/lib/deprecated/PortalLayer/props/propTypes.js +3 -0
- package/lib/index.js +57 -0
- package/lib/semantic/Button/Button.js +43 -22
- package/lib/semantic/Button/props/propTypes.js +3 -0
- package/lib/semantic/Button/semanticButton.module.css +1 -1
- package/lib/semantic/index.js +2 -0
- package/lib/utils/Common.js +117 -19
- package/lib/utils/ContextOptimizer.js +16 -10
- package/lib/utils/__tests__/constructFullName.spec.js +1 -0
- package/lib/utils/__tests__/debounce.spec.js +3 -2
- package/lib/utils/__tests__/getInitial.spec.js +1 -0
- package/lib/utils/constructFullName.js +13 -4
- package/lib/utils/css/compileClassNames.js +6 -0
- package/lib/utils/css/mergeStyle.js +10 -7
- package/lib/utils/css/utils.js +8 -0
- package/lib/utils/datetime/GMTZones.js +55 -0
- package/lib/utils/datetime/common.js +52 -7
- package/lib/utils/debounce.js +6 -1
- package/lib/utils/dropDownUtils.js +175 -59
- package/lib/utils/dummyFunction.js +2 -0
- package/lib/utils/getHTMLFontSize.js +1 -0
- package/lib/utils/getInitial.js +6 -0
- package/lib/utils/index.js +4 -0
- package/lib/utils/scrollTo.js +2 -0
- package/lib/utils/shallowEqual.js +8 -0
- package/package.json +18 -27
|
@@ -5,9 +5,9 @@
|
|
|
5
5
|
--textbox_border_width: 0;
|
|
6
6
|
--textbox_border_style: solid;
|
|
7
7
|
--textbox_border_color: var(--zdt_textbox_default_border);
|
|
8
|
-
--textbox_font_size:
|
|
8
|
+
--textbox_font_size: var(--zd_font_size14);
|
|
9
9
|
--textbox_width: 100%;
|
|
10
|
-
--textbox_height:
|
|
10
|
+
--textbox_height: var(--zd_size35);
|
|
11
11
|
--textbox_border_radius: none;
|
|
12
12
|
--textbox_font_family: var(--zd_regular);
|
|
13
13
|
/* Variable:Ignore */
|
|
@@ -111,24 +111,24 @@
|
|
|
111
111
|
/* Size */
|
|
112
112
|
.xmedium,
|
|
113
113
|
.medium {
|
|
114
|
-
--textbox_font_size:
|
|
114
|
+
--textbox_font_size: var(--zd_font_size14);
|
|
115
115
|
}
|
|
116
116
|
.xmedium {
|
|
117
|
-
--textbox_height:
|
|
117
|
+
--textbox_height: var(--zd_size28);
|
|
118
118
|
--textbox_line_height: 28px;
|
|
119
119
|
}
|
|
120
120
|
.medium {
|
|
121
|
-
--textbox_height:
|
|
121
|
+
--textbox_height: var(--zd_size35);
|
|
122
122
|
--textbox_line_height: 35px;
|
|
123
123
|
}
|
|
124
124
|
.small {
|
|
125
|
-
--textbox_font_size:
|
|
126
|
-
--textbox_height:
|
|
125
|
+
--textbox_font_size: var(--zd_font_size12);
|
|
126
|
+
--textbox_height: var(--zd_size28);
|
|
127
127
|
--textbox_line_height: 28px;
|
|
128
128
|
}
|
|
129
129
|
.xsmall {
|
|
130
|
-
--textbox_font_size:
|
|
131
|
-
--textbox_height:
|
|
130
|
+
--textbox_font_size: var(--zd_font_size13);
|
|
131
|
+
--textbox_height: var(--zd_size25);
|
|
132
132
|
--textbox_line_height: 25px;
|
|
133
133
|
}
|
|
134
134
|
.default,
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _react = _interopRequireDefault(require("react"));
|
|
4
|
+
|
|
4
5
|
var _TextBox = _interopRequireDefault(require("../TextBox"));
|
|
6
|
+
|
|
5
7
|
var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
|
|
8
|
+
|
|
6
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
10
|
+
|
|
7
11
|
describe('TextBox component', function () {
|
|
8
12
|
it('should display size small', function () {
|
|
9
13
|
var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
|
|
@@ -12,6 +16,7 @@ describe('TextBox component', function () {
|
|
|
12
16
|
size: "small",
|
|
13
17
|
variant: "default"
|
|
14
18
|
}));
|
|
19
|
+
|
|
15
20
|
var tree = ele.toJSON();
|
|
16
21
|
expect(tree).toMatchSnapshot();
|
|
17
22
|
});
|
|
@@ -22,6 +27,7 @@ describe('TextBox component', function () {
|
|
|
22
27
|
size: "medium",
|
|
23
28
|
variant: "default"
|
|
24
29
|
}));
|
|
30
|
+
|
|
25
31
|
var tree = ele.toJSON();
|
|
26
32
|
expect(tree).toMatchSnapshot();
|
|
27
33
|
});
|
|
@@ -32,6 +38,7 @@ describe('TextBox component', function () {
|
|
|
32
38
|
size: "xmedium",
|
|
33
39
|
variant: "default"
|
|
34
40
|
}));
|
|
41
|
+
|
|
35
42
|
var tree = ele.toJSON();
|
|
36
43
|
expect(tree).toMatchSnapshot();
|
|
37
44
|
});
|
|
@@ -42,6 +49,7 @@ describe('TextBox component', function () {
|
|
|
42
49
|
size: "small",
|
|
43
50
|
variant: "primary"
|
|
44
51
|
}));
|
|
52
|
+
|
|
45
53
|
var tree = ele.toJSON();
|
|
46
54
|
expect(tree).toMatchSnapshot();
|
|
47
55
|
});
|
|
@@ -52,6 +60,7 @@ describe('TextBox component', function () {
|
|
|
52
60
|
size: "medium",
|
|
53
61
|
variant: "primary"
|
|
54
62
|
}));
|
|
63
|
+
|
|
55
64
|
var tree = ele.toJSON();
|
|
56
65
|
expect(tree).toMatchSnapshot();
|
|
57
66
|
});
|
|
@@ -62,6 +71,7 @@ describe('TextBox component', function () {
|
|
|
62
71
|
size: "xmedium",
|
|
63
72
|
variant: "primary"
|
|
64
73
|
}));
|
|
74
|
+
|
|
65
75
|
var tree = ele.toJSON();
|
|
66
76
|
expect(tree).toMatchSnapshot();
|
|
67
77
|
});
|
|
@@ -72,6 +82,7 @@ describe('TextBox component', function () {
|
|
|
72
82
|
size: "small",
|
|
73
83
|
variant: "secondary"
|
|
74
84
|
}));
|
|
85
|
+
|
|
75
86
|
var tree = ele.toJSON();
|
|
76
87
|
expect(tree).toMatchSnapshot();
|
|
77
88
|
});
|
|
@@ -82,6 +93,7 @@ describe('TextBox component', function () {
|
|
|
82
93
|
size: "medium",
|
|
83
94
|
variant: "secondary"
|
|
84
95
|
}));
|
|
96
|
+
|
|
85
97
|
var tree = ele.toJSON();
|
|
86
98
|
expect(tree).toMatchSnapshot();
|
|
87
99
|
});
|
|
@@ -92,6 +104,7 @@ describe('TextBox component', function () {
|
|
|
92
104
|
size: "xmedium",
|
|
93
105
|
variant: "secondary"
|
|
94
106
|
}));
|
|
107
|
+
|
|
95
108
|
var tree = ele.toJSON();
|
|
96
109
|
expect(tree).toMatchSnapshot();
|
|
97
110
|
});
|
|
@@ -114,9 +127,7 @@ describe('TextBox component', function () {
|
|
|
114
127
|
text: "Text Box Working"
|
|
115
128
|
}));
|
|
116
129
|
expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBox').getAttribute('placeholder')).toMatch(/Text Box/);
|
|
117
|
-
});
|
|
118
|
-
|
|
119
|
-
// it('Check disabled works', () => {
|
|
130
|
+
}); // it('Check disabled works', () => {
|
|
120
131
|
// let renderedDOM = TestUtils.renderIntoDocument(
|
|
121
132
|
// <TextBox maxLength='100' placeHolder='Text Box' size='medium' variant='primary' value='Text Box Working' disabled />
|
|
122
133
|
// );
|
|
@@ -132,7 +143,6 @@ describe('TextBox component', function () {
|
|
|
132
143
|
// pass
|
|
133
144
|
// ).toBe(true);
|
|
134
145
|
// });
|
|
135
|
-
|
|
136
146
|
// it('Check readOnly works', () => {
|
|
137
147
|
// let renderedDOM = TestUtils.renderIntoDocument(
|
|
138
148
|
// <TextBox maxLength='100' placeHolder='Text Box' size='medium' variant='primary' value='Text Box Working' readOnly />
|
|
@@ -4,13 +4,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.propTypes = void 0;
|
|
7
|
+
|
|
7
8
|
var _propTypes2 = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
|
|
8
10
|
var _propTypes;
|
|
11
|
+
|
|
9
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
10
|
-
|
|
11
|
-
function _defineProperty(obj, key, value) {
|
|
12
|
-
|
|
13
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
13
|
+
|
|
14
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
15
|
+
|
|
14
16
|
var propTypes = (_propTypes = {
|
|
15
17
|
autofocus: _propTypes2["default"].bool,
|
|
16
18
|
borderColor: _propTypes2["default"].oneOf(['transparent', 'default']),
|
|
@@ -1,39 +1,63 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
+
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
exports["default"] = void 0;
|
|
9
|
+
|
|
8
10
|
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
|
|
9
12
|
var _defaultProps = require("./props/defaultProps");
|
|
13
|
+
|
|
10
14
|
var _propTypes = require("./props/propTypes");
|
|
15
|
+
|
|
11
16
|
var _TextBox = _interopRequireDefault(require("../TextBox/TextBox"));
|
|
17
|
+
|
|
12
18
|
var _Layout = require("../Layout");
|
|
19
|
+
|
|
13
20
|
var _icons = require("@zohodesk/icons");
|
|
21
|
+
|
|
14
22
|
var _semanticButtonModule = _interopRequireDefault(require("../semantic/Button/semanticButton.module.css"));
|
|
23
|
+
|
|
15
24
|
var _TextBoxIconModule = _interopRequireDefault(require("./TextBoxIcon.module.css"));
|
|
25
|
+
|
|
16
26
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
27
|
+
|
|
17
28
|
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); }
|
|
29
|
+
|
|
18
30
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
19
|
-
|
|
31
|
+
|
|
32
|
+
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
|
33
|
+
|
|
20
34
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
21
|
-
|
|
22
|
-
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
35
|
+
|
|
23
36
|
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
|
|
37
|
+
|
|
24
38
|
function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
|
|
39
|
+
|
|
25
40
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
41
|
+
|
|
26
42
|
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
|
|
43
|
+
|
|
27
44
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
45
|
+
|
|
28
46
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
47
|
+
|
|
29
48
|
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
49
|
+
|
|
30
50
|
/* eslint-disable react/forbid-component-props */
|
|
31
51
|
var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
|
|
32
52
|
_inherits(TextBoxIcon, _React$Component);
|
|
53
|
+
|
|
33
54
|
var _super = _createSuper(TextBoxIcon);
|
|
55
|
+
|
|
34
56
|
function TextBoxIcon(props) {
|
|
35
57
|
var _this;
|
|
58
|
+
|
|
36
59
|
_classCallCheck(this, TextBoxIcon);
|
|
60
|
+
|
|
37
61
|
_this = _super.call(this, props);
|
|
38
62
|
_this.state = {
|
|
39
63
|
isActive: false
|
|
@@ -44,6 +68,7 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
|
|
|
44
68
|
_this.handleClear = _this.handleClear.bind(_assertThisInitialized(_this));
|
|
45
69
|
return _this;
|
|
46
70
|
}
|
|
71
|
+
|
|
47
72
|
_createClass(TextBoxIcon, [{
|
|
48
73
|
key: "handleRef",
|
|
49
74
|
value: function handleRef(ele) {
|
|
@@ -64,9 +89,10 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
|
|
|
64
89
|
key: "handleFocus",
|
|
65
90
|
value: function handleFocus(e) {
|
|
66
91
|
var _this$props = this.props,
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
92
|
+
onFocus = _this$props.onFocus,
|
|
93
|
+
needReadOnlyStyle = _this$props.needReadOnlyStyle,
|
|
94
|
+
isReadOnly = _this$props.isReadOnly;
|
|
95
|
+
|
|
70
96
|
if (!needReadOnlyStyle || !isReadOnly && needReadOnlyStyle) {
|
|
71
97
|
this.setState({
|
|
72
98
|
isActive: true
|
|
@@ -87,54 +113,54 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
|
|
|
87
113
|
key: "render",
|
|
88
114
|
value: function render() {
|
|
89
115
|
var _this$props2 = this.props,
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
116
|
+
type = _this$props2.type,
|
|
117
|
+
name = _this$props2.name,
|
|
118
|
+
id = _this$props2.id,
|
|
119
|
+
maxLength = _this$props2.maxLength,
|
|
120
|
+
placeHolder = _this$props2.placeHolder,
|
|
121
|
+
size = _this$props2.size,
|
|
122
|
+
onKeyUp = _this$props2.onKeyUp,
|
|
123
|
+
isReadOnly = _this$props2.isReadOnly,
|
|
124
|
+
isDisabled = _this$props2.isDisabled,
|
|
125
|
+
children = _this$props2.children,
|
|
126
|
+
onKeyDown = _this$props2.onKeyDown,
|
|
127
|
+
onClick = _this$props2.onClick,
|
|
128
|
+
value = _this$props2.value,
|
|
129
|
+
iconRotated = _this$props2.iconRotated,
|
|
130
|
+
needBorder = _this$props2.needBorder,
|
|
131
|
+
variant = _this$props2.variant,
|
|
132
|
+
onClear = _this$props2.onClear,
|
|
133
|
+
onChange = _this$props2.onChange,
|
|
134
|
+
title = _this$props2.title,
|
|
135
|
+
dataId = _this$props2.dataId,
|
|
136
|
+
dataSelectorId = _this$props2.dataSelectorId,
|
|
137
|
+
needReadOnlyStyle = _this$props2.needReadOnlyStyle,
|
|
138
|
+
isClickable = _this$props2.isClickable,
|
|
139
|
+
needEffect = _this$props2.needEffect,
|
|
140
|
+
onKeyPress = _this$props2.onKeyPress,
|
|
141
|
+
borderColor = _this$props2.borderColor,
|
|
142
|
+
onMouseDown = _this$props2.onMouseDown,
|
|
143
|
+
showClearIcon = _this$props2.showClearIcon,
|
|
144
|
+
htmlId = _this$props2.htmlId,
|
|
145
|
+
i18nKeys = _this$props2.i18nKeys,
|
|
146
|
+
customClass = _this$props2.customClass,
|
|
147
|
+
iconOnHover = _this$props2.iconOnHover,
|
|
148
|
+
isFocus = _this$props2.isFocus,
|
|
149
|
+
onClearMouseDown = _this$props2.onClearMouseDown,
|
|
150
|
+
customProps = _this$props2.customProps;
|
|
125
151
|
var isActive = this.state.isActive;
|
|
126
152
|
var _customClass$customTB = customClass.customTBoxWrap,
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
153
|
+
customTBoxWrap = _customClass$customTB === void 0 ? '' : _customClass$customTB,
|
|
154
|
+
_customClass$customTe = customClass.customTextBox,
|
|
155
|
+
customTextBox = _customClass$customTe === void 0 ? '' : _customClass$customTe,
|
|
156
|
+
_customClass$customTB2 = customClass.customTBoxIcon,
|
|
157
|
+
customTBoxIcon = _customClass$customTB2 === void 0 ? '' : _customClass$customTB2,
|
|
158
|
+
_customClass$customTB3 = customClass.customTBoxLine,
|
|
159
|
+
customTBoxLine = _customClass$customTB3 === void 0 ? '' : _customClass$customTB3;
|
|
134
160
|
var _i18nKeys$clearText = i18nKeys.clearText,
|
|
135
|
-
|
|
161
|
+
clearText = _i18nKeys$clearText === void 0 ? 'Clear' : _i18nKeys$clearText;
|
|
136
162
|
var _customProps$TextBoxP = customProps.TextBoxProps,
|
|
137
|
-
|
|
163
|
+
TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP;
|
|
138
164
|
return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
|
|
139
165
|
alignBox: "row",
|
|
140
166
|
isCover: false,
|
|
@@ -194,12 +220,13 @@ var TextBoxIcon = /*#__PURE__*/function (_React$Component) {
|
|
|
194
220
|
}));
|
|
195
221
|
}
|
|
196
222
|
}]);
|
|
223
|
+
|
|
197
224
|
return TextBoxIcon;
|
|
198
225
|
}(_react["default"].Component);
|
|
226
|
+
|
|
199
227
|
exports["default"] = TextBoxIcon;
|
|
200
228
|
TextBoxIcon.defaultProps = _defaultProps.defaultProps;
|
|
201
|
-
TextBoxIcon.propTypes = _propTypes.propTypes;
|
|
202
|
-
// if (__DOCS__) {
|
|
229
|
+
TextBoxIcon.propTypes = _propTypes.propTypes; // if (__DOCS__) {
|
|
203
230
|
// TextBoxIcon.docs = {
|
|
204
231
|
// componentGroup: 'Form Elements',
|
|
205
232
|
// folderName: 'Style Guide',
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
.varClass {
|
|
2
2
|
/* textboxicon default variables */
|
|
3
|
-
--textboxicon_line_height:
|
|
3
|
+
--textboxicon_line_height: var(--zd_size1);
|
|
4
4
|
--textboxicon_line_color: var(--zdt_textboxicon_default_line_bg);
|
|
5
5
|
|
|
6
6
|
/* textboxicon icon default variables */
|
|
7
|
-
--textboxicon_icon_margin: 0
|
|
7
|
+
--textboxicon_icon_margin: 0 var(--zd_size5);
|
|
8
8
|
--textboxicon_icon_cursor: pointer;
|
|
9
9
|
--textboxicon_icon_color: var(--zdt_textboxicon_default_icon);
|
|
10
10
|
}
|
|
@@ -35,7 +35,7 @@
|
|
|
35
35
|
}
|
|
36
36
|
.line {
|
|
37
37
|
position: absolute;
|
|
38
|
-
bottom: 0;
|
|
38
|
+
bottom: 0 ;
|
|
39
39
|
/* Variable:Ignore */
|
|
40
40
|
min-height: 1px;
|
|
41
41
|
transition: var(--zd_transition2);
|
|
@@ -43,12 +43,12 @@
|
|
|
43
43
|
transform: perspective(1px);
|
|
44
44
|
}
|
|
45
45
|
[dir=ltr] .line {
|
|
46
|
-
left: 0;
|
|
47
|
-
right: 0;
|
|
46
|
+
left: 0 ;
|
|
47
|
+
right: 0 ;
|
|
48
48
|
}
|
|
49
49
|
[dir=rtl] .line {
|
|
50
|
-
right: 0;
|
|
51
|
-
left: 0;
|
|
50
|
+
right: 0 ;
|
|
51
|
+
left: 0 ;
|
|
52
52
|
}
|
|
53
53
|
.line, .borderColor_default {
|
|
54
54
|
background-color: var(--textboxicon_line_color);
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _react = _interopRequireDefault(require("react"));
|
|
4
|
+
|
|
4
5
|
var _TextBoxIcon = _interopRequireDefault(require("../TextBoxIcon"));
|
|
6
|
+
|
|
5
7
|
var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer"));
|
|
8
|
+
|
|
6
9
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
10
|
+
|
|
7
11
|
// children: PropTypes.node,
|
|
8
12
|
// disabled: PropTypes.bool,
|
|
9
13
|
// iconRotated: PropTypes.bool,
|
|
@@ -27,7 +31,6 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
|
|
|
27
31
|
// type: PropTypes.oneOf(['text', 'password', 'number']),
|
|
28
32
|
// value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
|
29
33
|
// variant: PropTypes.oneOf(['primary', 'secondary', 'default'])
|
|
30
|
-
|
|
31
34
|
describe('TextBoxIcon component', function () {
|
|
32
35
|
it('should display size small', function () {
|
|
33
36
|
var ele = _reactTestRenderer["default"].create( /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
|
|
@@ -36,6 +39,7 @@ describe('TextBoxIcon component', function () {
|
|
|
36
39
|
size: "small",
|
|
37
40
|
variant: "default"
|
|
38
41
|
}));
|
|
42
|
+
|
|
39
43
|
var tree = ele.toJSON();
|
|
40
44
|
expect(tree).toMatchSnapshot();
|
|
41
45
|
});
|
|
@@ -46,6 +50,7 @@ describe('TextBoxIcon component', function () {
|
|
|
46
50
|
size: "medium",
|
|
47
51
|
variant: "default"
|
|
48
52
|
}));
|
|
53
|
+
|
|
49
54
|
var tree = ele.toJSON();
|
|
50
55
|
expect(tree).toMatchSnapshot();
|
|
51
56
|
});
|
|
@@ -56,6 +61,7 @@ describe('TextBoxIcon component', function () {
|
|
|
56
61
|
size: "xmedium",
|
|
57
62
|
variant: "default"
|
|
58
63
|
}));
|
|
64
|
+
|
|
59
65
|
var tree = ele.toJSON();
|
|
60
66
|
expect(tree).toMatchSnapshot();
|
|
61
67
|
});
|
|
@@ -66,6 +72,7 @@ describe('TextBoxIcon component', function () {
|
|
|
66
72
|
size: "small",
|
|
67
73
|
variant: "primary"
|
|
68
74
|
}));
|
|
75
|
+
|
|
69
76
|
var tree = ele.toJSON();
|
|
70
77
|
expect(tree).toMatchSnapshot();
|
|
71
78
|
});
|
|
@@ -76,6 +83,7 @@ describe('TextBoxIcon component', function () {
|
|
|
76
83
|
size: "medium",
|
|
77
84
|
variant: "primary"
|
|
78
85
|
}));
|
|
86
|
+
|
|
79
87
|
var tree = ele.toJSON();
|
|
80
88
|
expect(tree).toMatchSnapshot();
|
|
81
89
|
});
|
|
@@ -86,6 +94,7 @@ describe('TextBoxIcon component', function () {
|
|
|
86
94
|
size: "xmedium",
|
|
87
95
|
variant: "primary"
|
|
88
96
|
}));
|
|
97
|
+
|
|
89
98
|
var tree = ele.toJSON();
|
|
90
99
|
expect(tree).toMatchSnapshot();
|
|
91
100
|
});
|
|
@@ -96,6 +105,7 @@ describe('TextBoxIcon component', function () {
|
|
|
96
105
|
size: "small",
|
|
97
106
|
variant: "secondary"
|
|
98
107
|
}));
|
|
108
|
+
|
|
99
109
|
var tree = ele.toJSON();
|
|
100
110
|
expect(tree).toMatchSnapshot();
|
|
101
111
|
});
|
|
@@ -106,6 +116,7 @@ describe('TextBoxIcon component', function () {
|
|
|
106
116
|
size: "medium",
|
|
107
117
|
variant: "secondary"
|
|
108
118
|
}));
|
|
119
|
+
|
|
109
120
|
var tree = ele.toJSON();
|
|
110
121
|
expect(tree).toMatchSnapshot();
|
|
111
122
|
});
|
|
@@ -116,6 +127,7 @@ describe('TextBoxIcon component', function () {
|
|
|
116
127
|
size: "xmedium",
|
|
117
128
|
variant: "secondary"
|
|
118
129
|
}));
|
|
130
|
+
|
|
119
131
|
var tree = ele.toJSON();
|
|
120
132
|
expect(tree).toMatchSnapshot();
|
|
121
133
|
});
|
|
@@ -138,9 +150,7 @@ describe('TextBoxIcon component', function () {
|
|
|
138
150
|
text: "Text Box Working"
|
|
139
151
|
}));
|
|
140
152
|
expect(TestUtils.findRenderedComponentsWithTestid(renderedDOM, 'textBoxIcon').getAttribute('placeholder')).toMatch(/Text Box/);
|
|
141
|
-
});
|
|
142
|
-
|
|
143
|
-
// it('Check disabled works', () => {
|
|
153
|
+
}); // it('Check disabled works', () => {
|
|
144
154
|
// let renderedDOM = TestUtils.renderIntoDocument(
|
|
145
155
|
// <TextBoxIcon maxLength='100' placeHolder='Text Box' size='medium' variant='primary' value='Text Box Working' disabled />
|
|
146
156
|
// );
|
|
@@ -156,7 +166,6 @@ describe('TextBoxIcon component', function () {
|
|
|
156
166
|
// pass
|
|
157
167
|
// ).toBe(true);
|
|
158
168
|
// });
|
|
159
|
-
|
|
160
169
|
// it('Check readOnly works', () => {
|
|
161
170
|
// let renderedDOM = TestUtils.renderIntoDocument(
|
|
162
171
|
// <TextBoxIcon maxLength='100' placeHolder='Text Box' size='medium' variant='primary' value='Text Box Working' readOnly />
|
|
@@ -4,8 +4,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.propTypes = void 0;
|
|
7
|
+
|
|
7
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
|
|
8
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
|
+
|
|
9
12
|
var propTypes = {
|
|
10
13
|
borderColor: _propTypes["default"].oneOf(['transparent', 'default', 'error']),
|
|
11
14
|
children: _propTypes["default"].node,
|