@scaleflex/widget-common 4.1.0 → 4.4.0

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.
Files changed (120) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/package.json +4 -4
  3. package/dist/style.css +0 -1126
  4. package/dist/style.min.css +0 -1
  5. package/lib/ApprovalStatus/ApprovalStatus.styled.js +0 -21
  6. package/lib/ApprovalStatus/index.js +0 -104
  7. package/lib/AssetPreview.js +0 -53
  8. package/lib/AutoSuggest.js +0 -166
  9. package/lib/Avatar/Avatar.styled.js +0 -25
  10. package/lib/Avatar/index.js +0 -83
  11. package/lib/AvatarWithStatus/AvatarWithStatus.styled.js +0 -12
  12. package/lib/AvatarWithStatus/index.js +0 -30
  13. package/lib/BackButton.js +0 -46
  14. package/lib/BackdropOverlay.js +0 -77
  15. package/lib/BadgeButton.js +0 -35
  16. package/lib/BaseButton.js +0 -36
  17. package/lib/Button.js +0 -29
  18. package/lib/Carousel/Carousel.styled.js +0 -19
  19. package/lib/Carousel/index.js +0 -136
  20. package/lib/Checkbox.js +0 -55
  21. package/lib/CloseButton.js +0 -46
  22. package/lib/ColorPicker/ColorPicker.styled.js +0 -29
  23. package/lib/ColorPicker/index.js +0 -117
  24. package/lib/ColorPickerModal/ColorPickerModal.styled.js +0 -17
  25. package/lib/ColorPickerModal/index.js +0 -103
  26. package/lib/DatePicker/MyDatePicker.js +0 -350
  27. package/lib/DatePicker/index.js +0 -1
  28. package/lib/DropFilesWindow.js +0 -45
  29. package/lib/FilterItem/FilterItem.styled.js +0 -42
  30. package/lib/FilterItem/index.js +0 -48
  31. package/lib/FilterPopup/FilterPopup.styled.js +0 -16
  32. package/lib/FilterPopup/index.js +0 -85
  33. package/lib/FormControl.js +0 -25
  34. package/lib/FormGroup.js +0 -18
  35. package/lib/FormHelperText.js +0 -29
  36. package/lib/IconLabeledButton.js +0 -32
  37. package/lib/Image/Image.styled.js +0 -16
  38. package/lib/Image/index.js +0 -95
  39. package/lib/ImagePreview/ImagePreview.styled.js +0 -19
  40. package/lib/ImagePreview/index.js +0 -198
  41. package/lib/InputAndLabel.js +0 -77
  42. package/lib/InputGroupTime.js +0 -6
  43. package/lib/InputLabel.js +0 -18
  44. package/lib/ItemButtonOverlay/ItemButtonOverlay.styled.js +0 -33
  45. package/lib/ItemButtonOverlay/index.js +0 -23
  46. package/lib/ItemHoverTopOptions.js +0 -58
  47. package/lib/LoaderView/LoaderView.styled.js +0 -37
  48. package/lib/LoaderView/index.js +0 -32
  49. package/lib/MetaData/FilterMetadataFields.js +0 -115
  50. package/lib/MetaData/FilterMetadataFields.styled.js +0 -16
  51. package/lib/MetaData/MetaDataField.js +0 -246
  52. package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldBooleanType.js +0 -36
  53. package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldDateType.js +0 -53
  54. package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldMultiSelectType.js +0 -71
  55. package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldNumericType.js +0 -45
  56. package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldSelectType.js +0 -69
  57. package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldTagsType.js +0 -143
  58. package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldTextType.js +0 -42
  59. package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldTextareaType.js +0 -72
  60. package/lib/MetaData/MetaDataFieldTypes/MetaDataFieldTypes.styled.js +0 -57
  61. package/lib/MetaData/MetaDataFieldTypes/MetadataAttachmentsFieldType/AttachmentsAssetsMetadataAccordion.styled.js +0 -95
  62. package/lib/MetaData/MetaDataFieldTypes/MetadataAttachmentsFieldType/MetadataAttachmentsAction.js +0 -188
  63. package/lib/MetaData/MetaDataFieldTypes/MetadataAttachmentsFieldType/MetadataAttachmentsFieldType.constants.js +0 -48
  64. package/lib/MetaData/MetaDataFieldTypes/MetadataAttachmentsFieldType/MetadataAttachmentsInfo.js +0 -93
  65. package/lib/MetaData/MetaDataFieldTypes/MetadataAttachmentsFieldType/index.js +0 -114
  66. package/lib/MetaData/MetaDataFieldTypes/MetadataFieldUriType.js +0 -71
  67. package/lib/MetaData/MetaDataFieldTypes/MetadataGeoPointField/MetadataGeoPointField.styled.js +0 -8
  68. package/lib/MetaData/MetaDataFieldTypes/MetadataGeoPointField/constants.js +0 -10
  69. package/lib/MetaData/MetaDataFieldTypes/MetadataGeoPointField/index.js +0 -135
  70. package/lib/MetaData/MetaDataFieldTypes/index.js +0 -9
  71. package/lib/MetaData/MetaDataFieldTypes.hooks.js +0 -53
  72. package/lib/OverlayCard/OverlayCard.styled.js +0 -8
  73. package/lib/OverlayCard/index.js +0 -28
  74. package/lib/PoweredBy.js +0 -12
  75. package/lib/Radiobox.js +0 -63
  76. package/lib/RegionalVariantsFilters/RegionalVariantFilters.styled.js +0 -17
  77. package/lib/RegionalVariantsFilters/index.js +0 -160
  78. package/lib/SVGUrlToElement.js +0 -73
  79. package/lib/SearchGroup/SearchGroup.styled.js +0 -93
  80. package/lib/SearchGroup/index.js +0 -293
  81. package/lib/Spinner.js +0 -40
  82. package/lib/SuggestedSelectInput/SuggestedSelectInput.styled.js +0 -57
  83. package/lib/SuggestedSelectInput/index.js +0 -238
  84. package/lib/SuggestedTagsInput/SuggestedTagsInput.js +0 -295
  85. package/lib/SuggestedTagsInput/SuggestedTagsInput.styled.js +0 -83
  86. package/lib/SuggestedTagsInput/SuggestedTagsInput.utils.js +0 -15
  87. package/lib/SuggestedTagsInput/SuggestedTagsInputSkeleton.js +0 -14
  88. package/lib/Tabs.js +0 -62
  89. package/lib/ToggleButton/ToggleButton.styled.js +0 -16
  90. package/lib/ToggleButton/index.js +0 -16
  91. package/lib/Transitions/SlideTransition.js +0 -24
  92. package/lib/Transitions/TransitionWrapper.js +0 -83
  93. package/lib/Transitions/Transitions.styled.js +0 -8
  94. package/lib/Transitions/index.js +0 -2
  95. package/lib/Typography/Typography.js +0 -47
  96. package/lib/Typography/Typography.mixin.js +0 -46
  97. package/lib/Typography/Typography.styled.js +0 -18
  98. package/lib/Typography/index.js +0 -3
  99. package/lib/Typography/types/index.js +0 -1
  100. package/lib/Typography/types/variant.js +0 -9
  101. package/lib/UploadFileFloatyLabel/UploadFileFloatyLabel.mixin.js +0 -23
  102. package/lib/UploadFileFloatyLabel/UploadFileFloatyLabel.styled.js +0 -24
  103. package/lib/UploadFileFloatyLabel/index.js +0 -12
  104. package/lib/UsersAutocomplete/Tag.js +0 -25
  105. package/lib/UsersAutocomplete/Tag.styled.js +0 -35
  106. package/lib/UsersAutocomplete/UsersAutocomplete.styled.js +0 -94
  107. package/lib/UsersAutocomplete/index.js +0 -303
  108. package/lib/VirtualGrid/VirtualGrid.styled.js +0 -33
  109. package/lib/VirtualGrid/VirtualGrid.utils.js +0 -38
  110. package/lib/VirtualGrid/VirtualGridItem.js +0 -15
  111. package/lib/VirtualGrid/index.js +0 -252
  112. package/lib/VirtualList/VirtualListItem.js +0 -14
  113. package/lib/VirtualList/index.js +0 -105
  114. package/lib/hooks/index.js +0 -4
  115. package/lib/hooks/useDebounce.js +0 -24
  116. package/lib/hooks/useInputWithLocaleNumber.js +0 -115
  117. package/lib/hooks/useIsUnMountedRef.js +0 -12
  118. package/lib/hooks/useKeyboardNavigation.js +0 -60
  119. package/lib/hooks/useUpdateEffect.js +0 -19
  120. package/lib/index.js +0 -36
@@ -1,93 +0,0 @@
1
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
2
- function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
3
- import styled, { css } from 'styled-components';
4
- import { IconButton as SfxIconButton, CrossButton as SfxCrossButton } from '@scaleflex/ui/core';
5
- import { PC } from '@scaleflex/widget-common';
6
- var Search = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n min-width: ", ";\n max-width: 550px;\n flex-grow: 1;\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n", "\n"])), function (_ref) {
7
- var fullWidth = _ref.fullWidth;
8
- return fullWidth ? 'auto' : 'fit-content';
9
- }, function (_ref2) {
10
- var isSearchActive = _ref2.isSearchActive,
11
- searchInputFocused = _ref2.searchInputFocused,
12
- isDisabled = _ref2.isDisabled,
13
- isReadOnly = _ref2.isReadOnly,
14
- palette = _ref2.theme.palette;
15
- return (isSearchActive || searchInputFocused) && !isDisabled && !isReadOnly && "\n border: 1px solid ".concat(palette[PC.AccentStateless], ";\n ");
16
- }, function (_ref3) {
17
- var isDisabled = _ref3.isDisabled,
18
- palette = _ref3.theme.palette;
19
- return isDisabled && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border: 1px solid ", ";\n cursor: not-allowed;\n "])), palette[PC.BordersSecondary]);
20
- }, function (_ref4) {
21
- var isReadOnly = _ref4.isReadOnly,
22
- palette = _ref4.theme.palette;
23
- return isReadOnly && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background-color: ", ";\n\n ", " {\n background-color: ", ";\n }\n\n &:focus-within,\n &:active {\n background-color: ", " !important;\n\n ", " {\n background-color: ", " !important;\n }\n }\n "])), palette[PC.BackgroundHover], SearchInput, palette[PC.BackgroundHover], palette[PC.BackgroundHover], SearchInput, palette[PC.BackgroundHover]);
24
- }, function (_ref5) {
25
- var breakpoints = _ref5.theme.breakpoints;
26
- return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 100%;\n\n ", " {\n max-width: 520px;\n }\n\n ", " & {\n max-width: 520px;\n }\n\n ", " & {\n max-width: 520px;\n }\n\n ", " & {\n max-width: 520px;\n }\n"])), breakpoints.down('lg'), breakpoints.classes.md, breakpoints.classes.sm, breakpoints.classes.xs);
27
- }, function (_ref6) {
28
- var isSearchActive = _ref6.isSearchActive,
29
- searchInputFocused = _ref6.searchInputFocused,
30
- isReadOnly = _ref6.isReadOnly;
31
- if ((isSearchActive || searchInputFocused) && !isReadOnly) {
32
- return {
33
- 'min-width': 'calc(100% - 104px)'
34
- };
35
- }
36
- });
37
- var SearchInputWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding-left: 3px;\n width: 200px;\n flex-grow: 1;\n"])));
38
- var SearchInput = styled.input(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n border: none;\n padding: 10px 24px 10px 12px;\n min-width: ", ";\n\n ", ";\n"])), function (_ref7) {
39
- var isFilterQueryState = _ref7.isFilterQueryState;
40
- return isFilterQueryState ? '24px' : 'auto';
41
- }, function (_ref8) {
42
- var isDisabled = _ref8.isDisabled;
43
- return isDisabled && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n color: ", ";\n pointer-events: none;\n "])), function (_ref9) {
44
- var palette = _ref9.theme.palette;
45
- return palette[PC.BordersDisabled];
46
- });
47
- });
48
- var SearchIconButton = styled(SfxIconButton)(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n border-top-left-radius: 0px;\n border-bottom-left-radius: 0px;\n background-color: ", ";\n\n & svg {\n animation: ", " ;\n }\n\n &:hover {\n background-color: ", ";\n }\n cursor: ", " ;\n"])), function (_ref10) {
49
- var isLoading = _ref10.isLoading,
50
- palette = _ref10.theme.palette;
51
- return isLoading && palette[PC.AccentPrimaryActive];
52
- }, function (_ref11) {
53
- var isLoading = _ref11.isLoading;
54
- return isLoading ? 'rotating-spinner 2s linear infinite' : '';
55
- }, function (_ref12) {
56
- var isLoading = _ref12.isLoading,
57
- palette = _ref12.theme.palette;
58
- return isLoading && palette[PC.AccentPrimaryActive];
59
- }, function (_ref13) {
60
- var isLoading = _ref13.isLoading;
61
- return isLoading ? 'auto' : 'pointer';
62
- });
63
- var CrossButton = styled(SfxCrossButton)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n margin-right: 4px;\n position: relative;\n z-index: 1000;\n\n ", ";\n"])), function (_ref14) {
64
- var isDisabled = _ref14.isDisabled;
65
- return isDisabled && css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n color: ", ";\n pointer-events: none;\n "])), function (_ref15) {
66
- var palette = _ref15.theme.palette;
67
- return palette[PC.BordersDisabled];
68
- });
69
- });
70
- var Separator = styled.span(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n display: inline-block;\n width: 1px;\n height: calc(100% - 16px);\n margin: ", ";\n background: ", ";\n flex-shrink: 0;\n"])), function (_ref16) {
71
- var _ref16$mr = _ref16.mr,
72
- mr = _ref16$mr === void 0 ? 0 : _ref16$mr,
73
- _ref16$ml = _ref16.ml,
74
- ml = _ref16$ml === void 0 ? 0 : _ref16$ml;
75
- return "0 ".concat(mr, "px 0 ").concat(ml, "px");
76
- }, function (_ref17) {
77
- var theme = _ref17.theme;
78
- return theme.palette[PC.BorderPrimaryStateless];
79
- });
80
- var SearchInputTooltip = styled.div(function (_ref18) {
81
- var theme = _ref18.theme;
82
- return "\n border-radius: 4px;\n background: ".concat(theme.palette[PC.IconsPlaceholder], ";\n color: ").concat(theme.palette[PC.LinkActive], ";\n padding: 6px 12px;\n margin-bottom: 4px;\n text-align: center;\n width: max-content;\n justify-content: center;\n max-width: 500px;\n white-space: break-spaces;\n overflow-wrap: break-word;\n");
83
- });
84
- var Styled = {
85
- Search: Search,
86
- SearchInput: SearchInput,
87
- SearchIconButton: SearchIconButton,
88
- CrossButton: CrossButton,
89
- Separator: Separator,
90
- SearchInputWrapper: SearchInputWrapper,
91
- SearchInputTooltip: SearchInputTooltip
92
- };
93
- export default Styled;
@@ -1,293 +0,0 @@
1
- function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
2
- function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
3
- function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
4
- function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
5
- function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
6
- function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
7
- import { useRef, useState, useEffect, useCallback } from 'react';
8
- import { Search, Loading } from '@scaleflex/icons';
9
- import { MODE_CHAR, MODE_ID } from '@scaleflex/widget-explorer/lib/utils/SearchSuggestions';
10
- import { Popper } from '@scaleflex/ui/core';
11
- import Styled from './SearchGroup.styled';
12
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
13
- var SearchGroup = function SearchGroup(_ref) {
14
- var i18n = _ref.i18n,
15
- sendSearch = _ref.sendSearch,
16
- lastSearchValueRef = _ref.lastSearchValueRef,
17
- loading = _ref.loading,
18
- isFiltersActive = _ref.isFiltersActive,
19
- isPixaforge = _ref.isPixaforge,
20
- onValueChangeCbk = _ref.onValueChangeCbk,
21
- children = _ref.children,
22
- placeholder = _ref.placeholder,
23
- prependix = _ref.prependix,
24
- searchInputRef = _ref.searchInputRef,
25
- _ref$defaultSearchQue = _ref.defaultSearchQuery,
26
- defaultSearchQuery = _ref$defaultSearchQue === void 0 ? '' : _ref$defaultSearchQue,
27
- onInputFocus = _ref.onInputFocus,
28
- onInputBlur = _ref.onInputBlur,
29
- onInputChange = _ref.onInputChange,
30
- onInputKeyDown = _ref.onInputKeyDown,
31
- disableDefaultKeyPressHandler = _ref.disableDefaultKeyPressHandler,
32
- onInputKeyUp = _ref.onInputKeyUp,
33
- searchInputFocused = _ref.searchInputFocused,
34
- disableSearch = _ref.disableSearch,
35
- clearSelection = _ref.clearSelection,
36
- appendix = _ref.appendix,
37
- _ref$hideSearchInput = _ref.hideSearchInput,
38
- hideSearchInput = _ref$hideSearchInput === void 0 ? false : _ref$hideSearchInput,
39
- showAppendix = _ref.showAppendix,
40
- showAfterPrependix = _ref.showAfterPrependix,
41
- afterPrependix = _ref.afterPrependix,
42
- clearSearch = _ref.clearSearch,
43
- preappendix = _ref.preappendix,
44
- showPreappendix = _ref.showPreappendix,
45
- isSendingSearch = _ref.isSendingSearch,
46
- toggleSendingSearch = _ref.toggleSendingSearch,
47
- onClickSearch = _ref.onClickSearch,
48
- _ref$forceHideClearBt = _ref.forceHideClearBtn,
49
- forceHideClearBtn = _ref$forceHideClearBt === void 0 ? false : _ref$forceHideClearBt,
50
- isReadOnly = _ref.isReadOnly,
51
- ref = _ref.ref;
52
- var _useState = useState(Boolean(lastSearchValueRef === null || lastSearchValueRef === void 0 ? void 0 : lastSearchValueRef.current)),
53
- _useState2 = _slicedToArray(_useState, 2),
54
- showClearButton = _useState2[0],
55
- setShowClearButton = _useState2[1];
56
- var _useState3 = useState(defaultSearchQuery),
57
- _useState4 = _slicedToArray(_useState3, 2),
58
- queryState = _useState4[0],
59
- setQueryState = _useState4[1];
60
- var _useState5 = useState(false),
61
- _useState6 = _slicedToArray(_useState5, 2),
62
- searchFocus = _useState6[0],
63
- setSearchFocus = _useState6[1];
64
- var _useState7 = useState(defaultSearchQuery),
65
- _useState8 = _slicedToArray(_useState7, 2),
66
- searchKeyword = _useState8[0],
67
- setSearchKeyword = _useState8[1];
68
- var _useState9 = useState(false),
69
- _useState10 = _slicedToArray(_useState9, 2),
70
- isQueryTooltipShown = _useState10[0],
71
- setIsQueryTooltipShown = _useState10[1];
72
- var searchButtonRef = useRef();
73
- var clearButtonRef = useRef();
74
- var isSearchQueryExists = queryState || isFiltersActive;
75
- var isSearchActive = ((queryState === null || queryState === void 0 ? void 0 : queryState.length) > 2 || isFiltersActive) && (!isSendingSearch || loading);
76
- var isLoading = loading && isSendingSearch;
77
- useEffect(function () {
78
- if (!searchFocus && document.hasFocus() && (searchInputRef === null || searchInputRef === void 0 ? void 0 : searchInputRef.current) === document.activeElement) {
79
- var _searchInputRef$curre;
80
- (_searchInputRef$curre = searchInputRef.current) === null || _searchInputRef$curre === void 0 ? void 0 : _searchInputRef$curre.blur();
81
- } else if (searchFocus) {
82
- var _searchInputRef$curre2;
83
- (_searchInputRef$curre2 = searchInputRef.current) === null || _searchInputRef$curre2 === void 0 ? void 0 : _searchInputRef$curre2.focus();
84
- }
85
- }, [searchFocus]);
86
- var updateSearchKeyword = useCallback(function (newSearchKeyword) {
87
- if (newSearchKeyword !== searchKeyword && !isFiltersActive) {
88
- setSearchKeyword(newSearchKeyword);
89
- }
90
- }, [searchKeyword]);
91
- useEffect(function () {
92
- if (isFiltersActive) {
93
- setSearchKeyword('filters');
94
- } else if (searchKeyword === 'filters') {
95
- setQueryState('');
96
- }
97
- }, [isFiltersActive]);
98
- useEffect(function () {
99
- setQueryState(defaultSearchQuery);
100
- setSearchKeyword(defaultSearchQuery);
101
- searchInputRef.current.value = defaultSearchQuery || '';
102
- }, [defaultSearchQuery]);
103
- var handleSearchSending = function handleSearchSending(event) {
104
- if (!isSearchActive) {
105
- var _searchInputRef$curre3;
106
- (_searchInputRef$curre3 = searchInputRef.current) === null || _searchInputRef$curre3 === void 0 ? void 0 : _searchInputRef$curre3.focus();
107
- return;
108
- }
109
- clearSelection();
110
- if (searchInputRef !== null && searchInputRef !== void 0 && searchInputRef.current) {
111
- var _searchInputRef$curre4;
112
- // eslint-disable-next-line no-unused-expressions
113
- (_searchInputRef$curre4 = searchInputRef.current) === null || _searchInputRef$curre4 === void 0 ? void 0 : _searchInputRef$curre4.focus();
114
- var value = searchInputRef.current.value;
115
- var isTagValue = value[0] === MODE_CHAR[MODE_ID.ATTRIBUTE];
116
- updateSearchKeyword(value);
117
- if (isTagValue) {
118
- onClickSearch(event);
119
- } else {
120
- sendSearch(value);
121
- }
122
- lastSearchValueRef.current = value;
123
- setShowClearButton(Boolean(searchInputRef.current.value || searchInputRef.current.value === 0));
124
- }
125
- };
126
- var handleSearchClearing = function handleSearchClearing() {
127
- var clearFilters = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
128
- if (!isLoading && typeof toggleSendingSearch === 'function') {
129
- toggleSendingSearch(false);
130
- }
131
- if (onInputChange) {
132
- onInputChange('');
133
- }
134
- if (searchInputRef !== null && searchInputRef !== void 0 && searchInputRef.current) {
135
- searchInputRef.current.value = '';
136
- setShowClearButton(false);
137
- }
138
- if (!isFiltersActive) {
139
- updateSearchKeyword('');
140
- }
141
- if ((searchKeyword || isPixaforge || clearFilters && isFiltersActive) && typeof clearSearch === 'function') {
142
- clearSearch({
143
- clearFilters: clearFilters
144
- });
145
- }
146
- };
147
- var handleKeypress = function handleKeypress(e) {
148
- if (onInputKeyDown) {
149
- onInputKeyDown(e);
150
- }
151
- if (!disableDefaultKeyPressHandler) {
152
- if (e.keyCode === 13) {
153
- handleSearchSending();
154
- return;
155
- }
156
- if (e.keyCode === 27) {
157
- handleSearchClearing();
158
- }
159
- }
160
- };
161
- var handleKeyUp = function handleKeyUp(event) {
162
- onInputKeyUp(event);
163
- setQueryState(searchInputRef.current.value);
164
- };
165
- var handleInputBlur = function handleInputBlur() {
166
- setSearchFocus(false);
167
- setTimeout(function () {
168
- onInputBlur();
169
- }, 250);
170
- };
171
- var handleInputClick = function handleInputClick() {
172
- var _searchInputFocused$c;
173
- setSearchFocus(true);
174
- searchInputFocused === null || searchInputFocused === void 0 ? void 0 : (_searchInputFocused$c = searchInputFocused.current) === null || _searchInputFocused$c === void 0 ? void 0 : _searchInputFocused$c.focus();
175
- };
176
- var valueChangeChecking = function valueChangeChecking(event) {
177
- var _event$target$value;
178
- setQueryState(event.target.value);
179
- if (!isLoading && typeof toggleSendingSearch === 'function') {
180
- toggleSendingSearch(false);
181
- }
182
- if (onValueChangeCbk) {
183
- onValueChangeCbk(event.target.value, handleSearchClearing);
184
- }
185
- if (onInputChange) {
186
- onInputChange(event.target.value);
187
- }
188
- if (((_event$target$value = event.target.value) === null || _event$target$value === void 0 ? void 0 : _event$target$value.length) === 0) {
189
- handleSearchClearing();
190
- if (isFiltersActive && typeof toggleSendingSearch === 'function') {
191
- toggleSendingSearch(true);
192
- }
193
- }
194
- };
195
- var clearSearchAndFilters = function clearSearchAndFilters() {
196
- handleSearchClearing(true);
197
- setQueryState('');
198
- };
199
- var isClearButtonShown = !forceHideClearBtn && (isSearchQueryExists || showClearButton);
200
- var hasSearchQuery = Boolean(queryState);
201
- return /*#__PURE__*/_jsxs(Styled.Search, {
202
- ref: ref,
203
- className: "filerobot-common-Search",
204
- isSearchActive: isSearchActive,
205
- searchInputFocused: searchInputFocused,
206
- fullWidth: (queryState === null || queryState === void 0 ? void 0 : queryState.length) > 0,
207
- isDisabled: disableSearch,
208
- isReadOnly: isReadOnly,
209
- "data-testid": "fmaw-common_search_group",
210
- children: [/*#__PURE__*/_jsxs(Styled.SearchInputWrapper, {
211
- className: "filerobot-common-Search-searchAndFiltersInputs",
212
- children: [prependix && /*#__PURE__*/_jsxs(_Fragment, {
213
- children: [prependix, /*#__PURE__*/_jsx(Styled.Separator, {
214
- ml: 3
215
- })]
216
- }), afterPrependix && showAfterPrependix && afterPrependix, /*#__PURE__*/_jsx(Popper, {
217
- open: isQueryTooltipShown && hasSearchQuery,
218
- anchorEl: searchInputRef.current,
219
- position: "top",
220
- onMouseOver: function onMouseOver() {
221
- return setIsQueryTooltipShown(hasSearchQuery);
222
- },
223
- onMouseLeave: function onMouseLeave() {
224
- return setIsQueryTooltipShown(false);
225
- },
226
- children: /*#__PURE__*/_jsx(Styled.SearchInputTooltip, {
227
- "data-testid": "fmaw-common_search_group_query_tooltip",
228
- children: queryState
229
- })
230
- }), !hideSearchInput && /*#__PURE__*/_jsx(Styled.SearchInput, {
231
- type: "text",
232
- className: "filerobot-common-Search-searchInput",
233
- isFilterQueryState: (queryState === null || queryState === void 0 ? void 0 : queryState[0]) === '#',
234
- readOnly: isReadOnly,
235
- isDisabled: disableSearch,
236
- placeholder: !isReadOnly ? placeholder || i18n('searchGroupTitle') : '',
237
- title: i18n('searchGroupTitle'),
238
- onKeyDown: handleKeypress,
239
- onKeyUp: handleKeyUp,
240
- defaultValue: (defaultSearchQuery === null || defaultSearchQuery === void 0 ? void 0 : defaultSearchQuery.current) || defaultSearchQuery || (lastSearchValueRef === null || lastSearchValueRef === void 0 ? void 0 : lastSearchValueRef.current) || '',
241
- onChange: valueChangeChecking,
242
- ref: searchInputRef,
243
- onPaste: function onPaste(event) {
244
- // Have to use onPaste handler with stopPropagation to avoid: "FE is interpretting each cmd+v as image pasting and is trying to catch it and push to the uppay connector for file upload while it’s just text in the search in this case"
245
- event.stopPropagation();
246
- setTimeout(function () {
247
- valueChangeChecking(event);
248
- }, 0); // Use setTimeout here to wait a value: event.target.value (initially it's empty)
249
- },
250
- onMouseEnter: function onMouseEnter() {
251
- return setIsQueryTooltipShown(hasSearchQuery);
252
- },
253
- onMouseLeave: function onMouseLeave() {
254
- return setIsQueryTooltipShown(false);
255
- },
256
- onFocus: !isReadOnly ? onInputFocus : undefined,
257
- onClick: handleInputClick
258
- // TODO(Amr): this function call generate react error (Cannot update a component (`%s`) while rendering a different component (`%s`))
259
- // create a card for it https://scaleflexhq.atlassian.net/browse/FRA-1475
260
- ,
261
- onBlur: handleInputBlur,
262
- autoFocus: false,
263
- "data-testid": "fmaw-common_search_group_input"
264
- })]
265
- }), /*#__PURE__*/_jsxs("div", {
266
- className: "filerobot-common-Search-searchAndAppendedOptions",
267
- children: [isClearButtonShown && /*#__PURE__*/_jsx(Styled.CrossButton, {
268
- size: "md",
269
- innerRef: clearButtonRef,
270
- onClick: clearSearchAndFilters,
271
- isDisabled: disableSearch,
272
- "data-testid": "fmaw-common_search_group_clear_button"
273
- }), appendix && showAppendix && /*#__PURE__*/_jsxs(_Fragment, {
274
- children: [isClearButtonShown && /*#__PURE__*/_jsx(Styled.Separator, {}), appendix, (!isClearButtonShown || !isSearchActive) && /*#__PURE__*/_jsx(Styled.Separator, {})]
275
- }), preappendix && showPreappendix && /*#__PURE__*/_jsxs(_Fragment, {
276
- children: [isClearButtonShown && /*#__PURE__*/_jsx(Styled.Separator, {}), preappendix, !isSearchActive && /*#__PURE__*/_jsx(Styled.Separator, {})]
277
- }), !isReadOnly && /*#__PURE__*/_jsx(Styled.SearchIconButton, {
278
- innerRef: searchButtonRef,
279
- color: isSearchActive ? 'primary' : 'basic',
280
- onClick: !isLoading ? handleSearchSending : null,
281
- isLoading: isLoading,
282
- disabled: !isSearchActive || disableSearch,
283
- "data-testid": "fmaw-common_search_group_trigger_button",
284
- children: isLoading ? /*#__PURE__*/_jsx(Loading, {
285
- size: 16
286
- }) : /*#__PURE__*/_jsx(Search, {
287
- size: 16
288
- })
289
- })]
290
- }), children]
291
- });
292
- };
293
- export default SearchGroup;
package/lib/Spinner.js DELETED
@@ -1,40 +0,0 @@
1
- function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
2
- var _excluded = ["color", "size", "fillContainer", "noMargin"];
3
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
4
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
5
- function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
6
- function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
7
- function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
8
- function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
9
- function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
10
- import SpinnerIcon from '@scaleflex/icons/spinner';
11
- import { useTheme } from '@scaleflex/ui/theme/hooks';
12
- import { PC } from './';
13
- import { jsx as _jsx } from "react/jsx-runtime";
14
- var Spinner = function Spinner(_ref) {
15
- var _theme$palette;
16
- var color = _ref.color,
17
- _ref$size = _ref.size,
18
- size = _ref$size === void 0 ? 12 : _ref$size,
19
- _ref$fillContainer = _ref.fillContainer,
20
- fillContainer = _ref$fillContainer === void 0 ? false : _ref$fillContainer,
21
- noMargin = _ref.noMargin,
22
- props = _objectWithoutProperties(_ref, _excluded);
23
- var theme = useTheme();
24
- var iconProps = {
25
- color: color || (theme === null || theme === void 0 ? void 0 : (_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette[PC.AccentPrimary])
26
- };
27
- return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
28
- className: "filerobot-common-Spinner".concat(fillContainer ? ' filerobot-common-Spinner-filledCentered' : '').concat(noMargin ? ' filerobot-common-Spinner-noMargin' : '')
29
- }, props), {}, {
30
- children: fillContainer ? /*#__PURE__*/_jsx("div", {
31
- className: "filerobot-common-Spinner-spinnerContainer",
32
- children: /*#__PURE__*/_jsx(SpinnerIcon, _objectSpread(_objectSpread({}, iconProps), {}, {
33
- size: size
34
- }))
35
- }) : /*#__PURE__*/_jsx(SpinnerIcon, _objectSpread(_objectSpread({}, iconProps), {}, {
36
- size: size
37
- }))
38
- }));
39
- };
40
- export default Spinner;
@@ -1,57 +0,0 @@
1
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
2
- function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
3
- import { PC, PSH, FV } from '@scaleflex/widget-common';
4
- import { TagField as SfxTagField } from '@scaleflex/ui/core';
5
- import Placeholder from '@scaleflex/widget-explorer/lib/components/Filters/Placeholder';
6
- import StyledFilters from '@scaleflex/widget-explorer/lib/components/Filters/Filters.styled';
7
- import styled, { css } from 'styled-components';
8
- var TagField = styled(SfxTagField)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n .SfxTagField-listWrapper {\n overflow: hidden auto;\n }\n\n .SfxTag-Label {\n display: inline-block;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .SfxButton-Label {\n ", ";\n }\n"])), function (_ref) {
9
- var typography = _ref.theme.typography;
10
- return typography.font[FV.ButtonXs];
11
- });
12
- var Tags = styled(StyledFilters.Filter)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n padding: 0;\n width: 100%;\n\n .SfxTagField-root {\n display: flex;\n width: 100%;\n }\n\n .SfxTagField-tagInputFieldWrapper {\n display: flex;\n width: 100%;\n }\n\n .SfxTagField-tagFieldWrapper, .SfxTagField-wrapper {\n display: flex;\n width: 100%;\n height: 100%;\n }\n\n ", "\n"])), function (_ref2) {
13
- var breakpoints = _ref2.theme.breakpoints,
14
- tagsFieldMaxWidth = _ref2.tagsFieldMaxWidth;
15
- return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n ", " {\n max-width: ", ";\n }\n "])), breakpoints.up('lg'), tagsFieldMaxWidth ? "".concat(tagsFieldMaxWidth, "px") : 'unset');
16
- });
17
- var TagsBody = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n position: relative;\n flex-direction: column;\n"])));
18
- var NoResult = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n position: relative;\n z-index: 100;\n display: flex;\n justify-content: center;\n align-items: center;\n margin-bottom: 11px;\n color: ", ";\n"])), function (_ref3) {
19
- var palette = _ref3.theme.palette;
20
- return palette[PC.LabelPlaceholder];
21
- });
22
- var PlaceholderWrapper = styled(Placeholder)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n position: relative;\n margin-top: 5px;\n z-index: 100000;\n"])));
23
- var OptionsList = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n flex-direction: column;\n padding: 6px 0 0 0;\n margin-top: 2px;\n width: 100%;\n box-shadow: ", ";\n background-color: ", ";\n border-radius: 4px;\n overflow: hidden auto;\n gap: 8px;\n max-height: 252px;\n"])), function (_ref4) {
24
- var theme = _ref4.theme;
25
- return theme.shadows[PSH.ShadowLg];
26
- }, function (_ref5) {
27
- var palette = _ref5.theme.palette;
28
- return palette[PC.BackgroundStateless];
29
- });
30
- var Options = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n padding: 8px 16px;\n width: 100%;\n overflow: hidden;\n min-height: 32px;\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n }\n"])), function (_ref6) {
31
- var palette = _ref6.theme.palette;
32
- return palette[PC.BackgroundHover];
33
- });
34
- var OptionsWrapper = styled.div(function (_ref7) {
35
- var _ref7$theme = _ref7.theme,
36
- shadows = _ref7$theme.shadows,
37
- palette = _ref7$theme.palette;
38
- return "\n max-height: 252px;\n overflow: auto;\n display: flex;\n flex-direction: column;\n scroll-behavior: smooth;\n border-radius: 4px;\n padding: 4px 0;\n margin-top: 2px;\n box-shadow: ".concat(shadows[PSH.ShadowLg], ";\n background: ").concat(palette[PC.BackgroundStateless], ";\n");
39
- });
40
- var Option = styled.div(function (_ref8) {
41
- var _ref8$theme = _ref8.theme,
42
- typography = _ref8$theme.typography,
43
- palette = _ref8$theme.palette;
44
- return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n padding: 8px 16px;\n cursor: pointer;\n transition: all 150ms ease-out;\n ", ";\n\n &:hover, &:focus {\n outline: none;\n background: ", ";\n }\n"])), typography.font[FV.LabelMedium], palette[PC.BackgroundHover]);
45
- });
46
- var Styled = {
47
- TagField: TagField,
48
- Tags: Tags,
49
- TagsBody: TagsBody,
50
- OptionsList: OptionsList,
51
- Options: Options,
52
- OptionsWrapper: OptionsWrapper,
53
- Option: Option,
54
- NoResult: NoResult,
55
- PlaceholderWrapper: PlaceholderWrapper
56
- };
57
- export default Styled;