@itwin/core-react 4.2.1 → 4.3.0-dev.1
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/CHANGELOG.md +1 -6
- package/lib/cjs/core-react/_geometry.scss +3 -3
- package/lib/cjs/core-react/_math.scss +3 -3
- package/lib/cjs/core-react/_typography.scss +3 -3
- package/lib/cjs/core-react/autosuggest/AutoSuggest.scss +3 -3
- package/lib/cjs/core-react/badge/Badge.scss +3 -3
- package/lib/cjs/core-react/badge/NewBadge.scss +3 -3
- package/lib/cjs/core-react/base/Gap.js +1 -1
- package/lib/cjs/core-react/base/Gap.js.map +1 -1
- package/lib/cjs/core-react/base/base.scss +3 -3
- package/lib/cjs/core-react/base/index.scss +3 -3
- package/lib/cjs/core-react/classes.scss +3 -3
- package/lib/cjs/core-react/colorthemes.scss +3 -3
- package/lib/cjs/core-react/colorvariables.scss +3 -3
- package/lib/cjs/core-react/contextmenu/ContextMenu.js +1 -2
- package/lib/cjs/core-react/contextmenu/ContextMenu.js.map +1 -1
- package/lib/cjs/core-react/contextmenu/ContextMenu.scss +3 -3
- package/lib/cjs/core-react/contextmenu/GlobalContextMenu.js +3 -5
- package/lib/cjs/core-react/contextmenu/GlobalContextMenu.js.map +1 -1
- package/lib/cjs/core-react/dialog/Dialog.d.ts +3 -10
- package/lib/cjs/core-react/dialog/Dialog.d.ts.map +1 -1
- package/lib/cjs/core-react/dialog/Dialog.js +70 -168
- package/lib/cjs/core-react/dialog/Dialog.js.map +1 -1
- package/lib/cjs/core-react/dialog/Dialog.scss +59 -217
- package/lib/cjs/core-react/dialog/GlobalDialog.js +1 -2
- package/lib/cjs/core-react/dialog/GlobalDialog.js.map +1 -1
- package/lib/cjs/core-react/elementseparator/ElementSeparator.js +2 -2
- package/lib/cjs/core-react/elementseparator/ElementSeparator.js.map +1 -1
- package/lib/cjs/core-react/expandable/index.scss +3 -3
- package/lib/cjs/core-react/expandable/list.scss +3 -3
- package/lib/cjs/core-react/hocs/withOnOutsideClick.js +1 -2
- package/lib/cjs/core-react/hocs/withOnOutsideClick.js.map +1 -1
- package/lib/cjs/core-react/icons/IconComponent.js +1 -1
- package/lib/cjs/core-react/icons/IconComponent.js.map +1 -1
- package/lib/cjs/core-react/icons/SvgPath.scss +3 -3
- package/lib/cjs/core-react/icons/WebFontIcon.scss +3 -3
- package/lib/cjs/core-react/icons/index.scss +3 -3
- package/lib/cjs/core-react/icons/mixins.scss +3 -3
- package/lib/cjs/core-react/icons/variables.scss +3 -3
- package/lib/cjs/core-react/imagecheckbox/ImageCheckBox.scss +3 -3
- package/lib/cjs/core-react/index.scss +3 -3
- package/lib/cjs/core-react/inputs/index.scss +3 -3
- package/lib/cjs/core-react/inputs/input-label.scss +3 -3
- package/lib/cjs/core-react/inputs/input.scss +3 -3
- package/lib/cjs/core-react/inputs/numberinput/NumberInput.scss +3 -3
- package/lib/cjs/core-react/inputs/variables.scss +3 -3
- package/lib/cjs/core-react/listbox/Listbox.js +2 -3
- package/lib/cjs/core-react/listbox/Listbox.js.map +1 -1
- package/lib/cjs/core-react/listbox/Listbox.scss +3 -3
- package/lib/cjs/core-react/loading/LoadingPrompt.scss +3 -3
- package/lib/cjs/core-react/loading/LoadingSpinner.scss +3 -3
- package/lib/cjs/core-react/loading/index.scss +3 -3
- package/lib/cjs/core-react/loading/mixins.scss +3 -3
- package/lib/cjs/core-react/messagebox/MessageBox.d.ts.map +1 -1
- package/lib/cjs/core-react/messagebox/MessageBox.js +2 -2
- package/lib/cjs/core-react/messagebox/MessageBox.js.map +1 -1
- package/lib/cjs/core-react/messagebox/MessageBox.scss +3 -3
- package/lib/cjs/core-react/notification/MessageRenderer.js +1 -1
- package/lib/cjs/core-react/notification/MessageRenderer.js.map +1 -1
- package/lib/cjs/core-react/popup/Popup.js +4 -8
- package/lib/cjs/core-react/popup/Popup.js.map +1 -1
- package/lib/cjs/core-react/popup/Popup.scss +3 -3
- package/lib/cjs/core-react/radialmenu/RadialMenu.scss +3 -3
- package/lib/cjs/core-react/searchbox/SearchBox.scss +3 -3
- package/lib/cjs/core-react/settings/SettingsContainer.scss +3 -3
- package/lib/cjs/core-react/style/baseline.scss +3 -3
- package/lib/cjs/core-react/style/index.scss +3 -3
- package/lib/cjs/core-react/style/opacity.scss +3 -3
- package/lib/cjs/core-react/tabs/index.scss +3 -3
- package/lib/cjs/core-react/tabs/tabs.scss +3 -3
- package/lib/cjs/core-react/tabs/vertical.scss +3 -3
- package/lib/cjs/core-react/text/FilteredText.scss +3 -3
- package/lib/cjs/core-react/text/block.scss +3 -3
- package/lib/cjs/core-react/text/body.scss +3 -3
- package/lib/cjs/core-react/text/index.scss +3 -3
- package/lib/cjs/core-react/text/mixins.scss +3 -3
- package/lib/cjs/core-react/tree/ExpansionToggle.scss +3 -3
- package/lib/cjs/core-react/tree/Node.js +1 -2
- package/lib/cjs/core-react/tree/Node.js.map +1 -1
- package/lib/cjs/core-react/tree/Placeholder.scss +3 -3
- package/lib/cjs/core-react/tree/Tree.scss +3 -3
- package/lib/cjs/core-react/utils/IconWebComponent.js +1 -1
- package/lib/cjs/core-react/utils/IconWebComponent.js.map +1 -1
- package/lib/cjs/core-react/utils/getCssVariable.js +1 -1
- package/lib/cjs/core-react/utils/getCssVariable.js.map +1 -1
- package/lib/cjs/core-react/utils/hooks/useCrossOriginPopup.js +1 -2
- package/lib/cjs/core-react/utils/hooks/useCrossOriginPopup.js.map +1 -1
- package/lib/cjs/core-react/utils/hooks/useResizeObserver.js +8 -14
- package/lib/cjs/core-react/utils/hooks/useResizeObserver.js.map +1 -1
- package/lib/esm/core-react/_geometry.scss +3 -3
- package/lib/esm/core-react/_math.scss +3 -3
- package/lib/esm/core-react/_typography.scss +3 -3
- package/lib/esm/core-react/autosuggest/AutoSuggest.scss +3 -3
- package/lib/esm/core-react/badge/Badge.scss +3 -3
- package/lib/esm/core-react/badge/NewBadge.scss +3 -3
- package/lib/esm/core-react/base/Gap.js +1 -1
- package/lib/esm/core-react/base/Gap.js.map +1 -1
- package/lib/esm/core-react/base/base.scss +3 -3
- package/lib/esm/core-react/base/index.scss +3 -3
- package/lib/esm/core-react/classes.scss +3 -3
- package/lib/esm/core-react/colorthemes.scss +3 -3
- package/lib/esm/core-react/colorvariables.scss +3 -3
- package/lib/esm/core-react/contextmenu/ContextMenu.js +1 -2
- package/lib/esm/core-react/contextmenu/ContextMenu.js.map +1 -1
- package/lib/esm/core-react/contextmenu/ContextMenu.scss +3 -3
- package/lib/esm/core-react/contextmenu/GlobalContextMenu.js +3 -5
- package/lib/esm/core-react/contextmenu/GlobalContextMenu.js.map +1 -1
- package/lib/esm/core-react/dialog/Dialog.d.ts +3 -10
- package/lib/esm/core-react/dialog/Dialog.d.ts.map +1 -1
- package/lib/esm/core-react/dialog/Dialog.js +69 -167
- package/lib/esm/core-react/dialog/Dialog.js.map +1 -1
- package/lib/esm/core-react/dialog/Dialog.scss +59 -217
- package/lib/esm/core-react/dialog/GlobalDialog.js +1 -2
- package/lib/esm/core-react/dialog/GlobalDialog.js.map +1 -1
- package/lib/esm/core-react/elementseparator/ElementSeparator.js +2 -2
- package/lib/esm/core-react/elementseparator/ElementSeparator.js.map +1 -1
- package/lib/esm/core-react/expandable/index.scss +3 -3
- package/lib/esm/core-react/expandable/list.scss +3 -3
- package/lib/esm/core-react/hocs/withOnOutsideClick.js +1 -2
- package/lib/esm/core-react/hocs/withOnOutsideClick.js.map +1 -1
- package/lib/esm/core-react/icons/IconComponent.js +1 -1
- package/lib/esm/core-react/icons/IconComponent.js.map +1 -1
- package/lib/esm/core-react/icons/SvgPath.scss +3 -3
- package/lib/esm/core-react/icons/WebFontIcon.scss +3 -3
- package/lib/esm/core-react/icons/index.scss +3 -3
- package/lib/esm/core-react/icons/mixins.scss +3 -3
- package/lib/esm/core-react/icons/variables.scss +3 -3
- package/lib/esm/core-react/imagecheckbox/ImageCheckBox.scss +3 -3
- package/lib/esm/core-react/index.scss +3 -3
- package/lib/esm/core-react/inputs/index.scss +3 -3
- package/lib/esm/core-react/inputs/input-label.scss +3 -3
- package/lib/esm/core-react/inputs/input.scss +3 -3
- package/lib/esm/core-react/inputs/numberinput/NumberInput.scss +3 -3
- package/lib/esm/core-react/inputs/variables.scss +3 -3
- package/lib/esm/core-react/listbox/Listbox.js +2 -3
- package/lib/esm/core-react/listbox/Listbox.js.map +1 -1
- package/lib/esm/core-react/listbox/Listbox.scss +3 -3
- package/lib/esm/core-react/loading/LoadingPrompt.scss +3 -3
- package/lib/esm/core-react/loading/LoadingSpinner.scss +3 -3
- package/lib/esm/core-react/loading/index.scss +3 -3
- package/lib/esm/core-react/loading/mixins.scss +3 -3
- package/lib/esm/core-react/messagebox/MessageBox.d.ts.map +1 -1
- package/lib/esm/core-react/messagebox/MessageBox.js +2 -2
- package/lib/esm/core-react/messagebox/MessageBox.js.map +1 -1
- package/lib/esm/core-react/messagebox/MessageBox.scss +3 -3
- package/lib/esm/core-react/notification/MessageRenderer.js +1 -1
- package/lib/esm/core-react/notification/MessageRenderer.js.map +1 -1
- package/lib/esm/core-react/popup/Popup.js +4 -8
- package/lib/esm/core-react/popup/Popup.js.map +1 -1
- package/lib/esm/core-react/popup/Popup.scss +3 -3
- package/lib/esm/core-react/radialmenu/RadialMenu.scss +3 -3
- package/lib/esm/core-react/searchbox/SearchBox.scss +3 -3
- package/lib/esm/core-react/settings/SettingsContainer.scss +3 -3
- package/lib/esm/core-react/style/baseline.scss +3 -3
- package/lib/esm/core-react/style/index.scss +3 -3
- package/lib/esm/core-react/style/opacity.scss +3 -3
- package/lib/esm/core-react/tabs/index.scss +3 -3
- package/lib/esm/core-react/tabs/tabs.scss +3 -3
- package/lib/esm/core-react/tabs/vertical.scss +3 -3
- package/lib/esm/core-react/text/FilteredText.scss +3 -3
- package/lib/esm/core-react/text/block.scss +3 -3
- package/lib/esm/core-react/text/body.scss +3 -3
- package/lib/esm/core-react/text/index.scss +3 -3
- package/lib/esm/core-react/text/mixins.scss +3 -3
- package/lib/esm/core-react/tree/ExpansionToggle.scss +3 -3
- package/lib/esm/core-react/tree/Node.js +1 -2
- package/lib/esm/core-react/tree/Node.js.map +1 -1
- package/lib/esm/core-react/tree/Placeholder.scss +3 -3
- package/lib/esm/core-react/tree/Tree.scss +3 -3
- package/lib/esm/core-react/utils/IconWebComponent.js +1 -1
- package/lib/esm/core-react/utils/IconWebComponent.js.map +1 -1
- package/lib/esm/core-react/utils/getCssVariable.js +1 -1
- package/lib/esm/core-react/utils/getCssVariable.js.map +1 -1
- package/lib/esm/core-react/utils/hooks/useCrossOriginPopup.js +1 -2
- package/lib/esm/core-react/utils/hooks/useCrossOriginPopup.js.map +1 -1
- package/lib/esm/core-react/utils/hooks/useResizeObserver.js +8 -14
- package/lib/esm/core-react/utils/hooks/useResizeObserver.js.map +1 -1
- package/package.json +3 -3
- package/lib/cjs/core-react/dialog/SimpleDialog.d.ts +0 -68
- package/lib/cjs/core-react/dialog/SimpleDialog.d.ts.map +0 -1
- package/lib/cjs/core-react/dialog/SimpleDialog.js +0 -51
- package/lib/cjs/core-react/dialog/SimpleDialog.js.map +0 -1
- package/lib/esm/core-react/dialog/SimpleDialog.d.ts +0 -68
- package/lib/esm/core-react/dialog/SimpleDialog.d.ts.map +0 -1
- package/lib/esm/core-react/dialog/SimpleDialog.js +0 -47
- package/lib/esm/core-react/dialog/SimpleDialog.js.map +0 -1
|
@@ -1,245 +1,87 @@
|
|
|
1
1
|
/*---------------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
-
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
-
*--------------------------------------------------------------------------------------------*/
|
|
5
|
-
@import "../icons/variables";
|
|
6
|
-
@import "../inputs/variables";
|
|
7
|
-
@import "../style/themecolors";
|
|
8
|
-
@import "../text/block";
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
9
5
|
@import "../z-index";
|
|
10
|
-
@import "../scrollbar";
|
|
11
|
-
|
|
12
|
-
// cspell:ignore titlebar outoffocus nwse
|
|
13
6
|
|
|
14
7
|
.core-dialog {
|
|
15
|
-
font-family: var(--iui-font-sans);
|
|
16
|
-
|
|
17
|
-
display: none;
|
|
18
|
-
position: fixed;
|
|
19
|
-
|
|
20
8
|
@include uicore-z-index(dialog);
|
|
21
9
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
height: 100%;
|
|
26
|
-
overflow: auto;
|
|
27
|
-
background: rgba(0, 0, 0, 0.4);
|
|
28
|
-
|
|
29
|
-
&.core-dialog-opened {
|
|
30
|
-
display: block;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
&.core-dialog-hidden {
|
|
34
|
-
background-color: transparent;
|
|
35
|
-
pointer-events: none;
|
|
10
|
+
> .core-dialog-main {
|
|
11
|
+
display: flex;
|
|
12
|
+
flex-direction: column;
|
|
36
13
|
|
|
37
|
-
|
|
38
|
-
|
|
14
|
+
&.core-align-top-left {
|
|
15
|
+
top: 0px;
|
|
16
|
+
left: 0px;
|
|
17
|
+
transform: none;
|
|
39
18
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
&.core-dialog-top-left {
|
|
46
|
-
top: 0;
|
|
47
|
-
left: 0;
|
|
19
|
+
&.core-align-top {
|
|
20
|
+
top: 0px;
|
|
21
|
+
left: 50%;
|
|
22
|
+
transform: translateX(-50%);
|
|
48
23
|
}
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
right: 0;
|
|
24
|
+
&.core-align-top-right {
|
|
25
|
+
top: 0px;
|
|
26
|
+
left: 100%;
|
|
27
|
+
transform: translateX(-100%);
|
|
54
28
|
}
|
|
55
|
-
|
|
56
|
-
&.core-dialog-top-right {
|
|
57
|
-
top: 0;
|
|
58
|
-
right: 0;
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
&.core-dialog-left {
|
|
62
|
-
left: 0;
|
|
29
|
+
&.core-align-left {
|
|
63
30
|
top: 50%;
|
|
31
|
+
left: 0px;
|
|
64
32
|
transform: translateY(-50%);
|
|
65
33
|
}
|
|
66
|
-
|
|
67
|
-
&.core-dialog-center {
|
|
34
|
+
&.core-align-center {
|
|
68
35
|
top: 50%;
|
|
69
36
|
left: 50%;
|
|
70
37
|
transform: translate(-50%, -50%);
|
|
71
38
|
}
|
|
72
|
-
|
|
73
|
-
&.core-dialog-right {
|
|
74
|
-
right: 0;
|
|
39
|
+
&.core-align-right {
|
|
75
40
|
top: 50%;
|
|
76
|
-
|
|
41
|
+
left: 100%;
|
|
42
|
+
transform: translate(-100%, -50%);
|
|
77
43
|
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
44
|
+
&.core-align-bottom-left {
|
|
45
|
+
top: 100%;
|
|
46
|
+
left: 0px;
|
|
47
|
+
transform: translateY(-100%);
|
|
82
48
|
}
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
right: 0;
|
|
49
|
+
&.core-align-bottom {
|
|
50
|
+
top: 100%;
|
|
51
|
+
left: 50%;
|
|
52
|
+
transform: translate(-50%, -100%);
|
|
88
53
|
}
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
54
|
+
&.core-align-bottom-right {
|
|
55
|
+
top: 100%;
|
|
56
|
+
left: 100%;
|
|
57
|
+
transform: translate(-100%, -100%);
|
|
93
58
|
}
|
|
59
|
+
}
|
|
94
60
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
display: flex;
|
|
104
|
-
flex-grow: 1;
|
|
105
|
-
flex-direction: column;
|
|
106
|
-
border: 1px solid var(--iui-color-border);
|
|
107
|
-
border-radius: var(--iui-border-radius-1);
|
|
108
|
-
background-color: var(--iui-color-background);
|
|
109
|
-
color: var(--iui-color-text);
|
|
110
|
-
padding: 0;
|
|
111
|
-
|
|
112
|
-
> .core-dialog-head {
|
|
113
|
-
flex-shrink: 0;
|
|
114
|
-
align-items: center;
|
|
115
|
-
background-color: var(--iui-color-background-backdrop);
|
|
116
|
-
color: var(--iui-color-text);
|
|
117
|
-
display: flex;
|
|
118
|
-
padding: 4px;
|
|
119
|
-
|
|
120
|
-
/* padding: $uicore-unbordered-padding; */
|
|
121
|
-
&.core-dialog-movable {
|
|
122
|
-
cursor: move;
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
> .core-dialog-title {
|
|
126
|
-
flex: 1 1;
|
|
127
|
-
|
|
128
|
-
padding: 0;
|
|
129
|
-
border: none;
|
|
130
|
-
vertical-align: baseline;
|
|
131
|
-
font-size: var(--iui-font-size-2);
|
|
132
|
-
font-weight: var(--iui-font-weight-normal);
|
|
133
|
-
line-height: var(--iui-size-l);
|
|
134
|
-
|
|
135
|
-
margin: 0;
|
|
136
|
-
margin-left: 4px;
|
|
137
|
-
}
|
|
138
|
-
|
|
139
|
-
&.core-dialog-modal {
|
|
140
|
-
background-color: var(--iui-color-background);
|
|
141
|
-
|
|
142
|
-
> .core-dialog-title {
|
|
143
|
-
margin: 0;
|
|
144
|
-
padding: 0;
|
|
145
|
-
border: none;
|
|
146
|
-
vertical-align: baseline;
|
|
147
|
-
font-size: var(--iui-font-size-3);
|
|
148
|
-
font-weight: var(--iui-font-weight-normal);
|
|
149
|
-
line-height: calc(1.5 * var(--iui-size-l));
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
> .core-dialog-close {
|
|
154
|
-
cursor: pointer;
|
|
155
|
-
height: var(--iui-font-size-4);
|
|
156
|
-
width: var(--iui-font-size-4);
|
|
157
|
-
line-height: var(--iui-font-size-4);
|
|
158
|
-
flex: 0 0 $uicore-icons-medium;
|
|
159
|
-
text-align: center;
|
|
160
|
-
color: var(--iui-color-icon);
|
|
161
|
-
border: none;
|
|
162
|
-
background-color: transparent;
|
|
163
|
-
|
|
164
|
-
&:hover,
|
|
165
|
-
&:focus {
|
|
166
|
-
color: var(--iui-color-icon-hover);
|
|
167
|
-
}
|
|
168
|
-
&:focus {
|
|
169
|
-
outline: 1px solid var(--iui-color-border-accent);
|
|
170
|
-
}
|
|
171
|
-
}
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
> .core-dialog-content {
|
|
175
|
-
overflow: auto;
|
|
176
|
-
flex: 1 1;
|
|
177
|
-
|
|
178
|
-
@include uicore-text-block;
|
|
179
|
-
|
|
180
|
-
padding: $uicore-unbordered-padding;
|
|
181
|
-
margin: 0;
|
|
182
|
-
|
|
183
|
-
@include uicore-touch-scrolling;
|
|
184
|
-
@include uicore-scrollbar();
|
|
185
|
-
|
|
186
|
-
&.core-dialog-content-no-inset {
|
|
187
|
-
padding: 0;
|
|
188
|
-
}
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
> .core-dialog-footer {
|
|
192
|
-
flex-shrink: 0;
|
|
193
|
-
padding: 0 $uicore-unbordered-padding $uicore-unbordered-padding
|
|
194
|
-
$uicore-unbordered-padding;
|
|
195
|
-
|
|
196
|
-
> .core-dialog-buttons {
|
|
197
|
-
display: flex;
|
|
198
|
-
justify-content: flex-end;
|
|
199
|
-
|
|
200
|
-
> * {
|
|
201
|
-
min-width: 80px;
|
|
202
|
-
|
|
203
|
-
&:not(:first-child) {
|
|
204
|
-
margin-left: $uicore-inputs-margin;
|
|
205
|
-
}
|
|
206
|
-
}
|
|
207
|
-
}
|
|
208
|
-
}
|
|
61
|
+
> .core-dialog-resize-bar {
|
|
62
|
+
&.core-drag-right {
|
|
63
|
+
right: -4px;
|
|
64
|
+
top: 8px;
|
|
65
|
+
bottom: 8px;
|
|
66
|
+
width: 8px;
|
|
67
|
+
position: absolute;
|
|
68
|
+
cursor: e-resize;
|
|
209
69
|
}
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
70
|
+
&.core-drag-bottom-right {
|
|
71
|
+
right: -4px;
|
|
72
|
+
bottom: -4px;
|
|
73
|
+
width: 12px;
|
|
74
|
+
height: 12px;
|
|
214
75
|
position: absolute;
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
width: $dialog-resize-bar-width;
|
|
225
|
-
height: 100%;
|
|
226
|
-
cursor: ew-resize;
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
&.core-dialog-drag-bottom-mid {
|
|
230
|
-
bottom: -$dialog-resize-bar-width * 0.5;
|
|
231
|
-
height: $dialog-resize-bar-width;
|
|
232
|
-
width: 100%;
|
|
233
|
-
cursor: ns-resize;
|
|
234
|
-
}
|
|
235
|
-
|
|
236
|
-
&.core-dialog-drag-bottom-right {
|
|
237
|
-
right: -$dialog-resize-bar-width * 0.5;
|
|
238
|
-
bottom: -$dialog-resize-bar-width * 0.5;
|
|
239
|
-
height: $dialog-resize-bar-width;
|
|
240
|
-
width: $dialog-resize-bar-width;
|
|
241
|
-
cursor: nwse-resize;
|
|
242
|
-
}
|
|
76
|
+
cursor: se-resize;
|
|
77
|
+
}
|
|
78
|
+
&.core-drag-bottom {
|
|
79
|
+
right: 8px;
|
|
80
|
+
left: 8px;
|
|
81
|
+
bottom: -4px;
|
|
82
|
+
height: 8px;
|
|
83
|
+
position: absolute;
|
|
84
|
+
cursor: s-resize;
|
|
243
85
|
}
|
|
244
86
|
}
|
|
245
87
|
}
|
|
@@ -18,8 +18,7 @@ export class GlobalDialog extends React.Component {
|
|
|
18
18
|
parentDocument: null,
|
|
19
19
|
};
|
|
20
20
|
this._handleRefSet = (popupDiv) => {
|
|
21
|
-
|
|
22
|
-
const parentDocument = (_a = popupDiv === null || popupDiv === void 0 ? void 0 : popupDiv.ownerDocument) !== null && _a !== void 0 ? _a : null;
|
|
21
|
+
const parentDocument = popupDiv?.ownerDocument ?? null;
|
|
23
22
|
if (parentDocument) {
|
|
24
23
|
this._container = parentDocument.createElement("div");
|
|
25
24
|
this._container.id =
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalDialog.js","sourceRoot":"","sources":["../../../../src/core-react/dialog/GlobalDialog.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,QAAQ,MAAM,WAAW,CAAC;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAgBlC;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,KAAK,CAAC,SAGvC;IAOC,YAAY,KAAwB;QAClC,KAAK,CAAC,KAAK,CAAC,CAAC;QALU,UAAK,GAAsB;YAClD,cAAc,EAAE,IAAI;SACrB,CAAC;QAMM,kBAAa,GAAG,CAAC,QAA4B,EAAE,EAAE
|
|
1
|
+
{"version":3,"file":"GlobalDialog.js","sourceRoot":"","sources":["../../../../src/core-react/dialog/GlobalDialog.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,QAAQ,MAAM,WAAW,CAAC;AAEtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAgBlC;;GAEG;AACH,MAAM,OAAO,YAAa,SAAQ,KAAK,CAAC,SAGvC;IAOC,YAAY,KAAwB;QAClC,KAAK,CAAC,KAAK,CAAC,CAAC;QALU,UAAK,GAAsB;YAClD,cAAc,EAAE,IAAI;SACrB,CAAC;QAMM,kBAAa,GAAG,CAAC,QAA4B,EAAE,EAAE;YACvD,MAAM,cAAc,GAAG,QAAQ,EAAE,aAAa,IAAI,IAAI,CAAC;YACvD,IAAI,cAAc,EAAE;gBAClB,IAAI,CAAC,UAAU,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;gBACtD,IAAI,CAAC,UAAU,CAAC,EAAE;oBAChB,IAAI,CAAC,KAAK,CAAC,UAAU,KAAK,SAAS;wBACjC,CAAC,CAAC,UAAU,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE;wBACnC,CAAC,CAAC,aAAa,CAAC;gBACpB,IAAI,EAAE,GAAG,cAAc,CAAC,cAAc,CACpC,kBAAkB,CACD,CAAC;gBACpB,IAAI,CAAC,EAAE,EAAE;oBACP,EAAE,GAAG,cAAc,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;oBACzC,EAAE,CAAC,EAAE,GAAG,kBAAkB,CAAC;oBAC3B,cAAc,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;iBACrC;gBACD,EAAE,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBAEhC,wDAAwD;gBACxD,IAAI,CAAC,QAAQ,CAAC,EAAE,cAAc,EAAE,CAAC,CAAC;aACnC;QACH,CAAC,CAAC;IAvBF,CAAC;IAyBe,oBAAoB;QAClC,uBAAuB;QACvB,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,UAAU,CAAC,aAAa,EAAE;YACpD,UAAU;YACV,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;SAC5D;IACH,CAAC;IAEe,MAAM;QACpB,MAAM,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC;QAC5C,OAAO,CACL,6BAAK,GAAG,EAAE,IAAI,CAAC,aAAa,IACzB,IAAI,CAAC,KAAK,CAAC,cAAc;YACxB,QAAQ,CAAC,YAAY,CACnB,oBAAC,MAAM,OAAK,KAAK,GAAI,EACrB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,IAAI,CAC/B,CACC,CACP,CAAC;IACJ,CAAC;CACF","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Dialog\n */\n\nimport * as React from \"react\";\nimport * as ReactDOM from \"react-dom\";\nimport type { DialogProps } from \"./Dialog\";\nimport { Dialog } from \"./Dialog\";\n\n/** Properties for the [[GlobalDialog]] component\n * @public\n */\nexport interface GlobalDialogProps extends DialogProps {\n identifier?: string;\n}\n\n/** State properties for the [[GlobalDialog]] component\n * @public\n */\nexport interface GlobalDialogState {\n parentDocument: Document | null;\n}\n\n/** GlobalDialog React component used to display a [[Dialog]] on the top of screen\n * @public\n */\nexport class GlobalDialog extends React.Component<\n GlobalDialogProps,\n GlobalDialogState\n> {\n private _container?: HTMLDivElement;\n\n public override readonly state: GlobalDialogState = {\n parentDocument: null,\n };\n\n constructor(props: GlobalDialogProps) {\n super(props);\n }\n\n private _handleRefSet = (popupDiv: HTMLElement | null) => {\n const parentDocument = popupDiv?.ownerDocument ?? null;\n if (parentDocument) {\n this._container = parentDocument.createElement(\"div\");\n this._container.id =\n this.props.identifier !== undefined\n ? `dialog-${this.props.identifier}`\n : \"core-dialog\";\n let rt = parentDocument.getElementById(\n \"core-dialog-root\"\n ) as HTMLDivElement;\n if (!rt) {\n rt = parentDocument.createElement(\"div\");\n rt.id = \"core-dialog-root\";\n parentDocument.body.appendChild(rt);\n }\n rt.appendChild(this._container);\n\n // used to support component rendering in pop-out window\n this.setState({ parentDocument });\n }\n };\n\n public override componentWillUnmount() {\n // istanbul ignore else\n if (this._container && this._container.parentElement) {\n // cleanup\n this._container.parentElement.removeChild(this._container);\n }\n }\n\n public override render(): React.ReactNode {\n const { identifier, ...props } = this.props;\n return (\n <div ref={this._handleRefSet}>\n {this.state.parentDocument &&\n ReactDOM.createPortal(\n <Dialog {...props} />,\n this.state.parentDocument.body\n )}\n </div>\n );\n }\n}\n"]}
|
|
@@ -32,8 +32,8 @@ const useElementSeparatorPointerHandler = ({ onResizeHandleDragChanged, onResize
|
|
|
32
32
|
const pointerOutOfBounds = useRef(false);
|
|
33
33
|
const [isElementDragged, setIsDragged] = useState(false);
|
|
34
34
|
const [isElementHovered, setIsHovered] = useState(false);
|
|
35
|
-
const isGroupDragged = isResizeHandleBeingDragged
|
|
36
|
-
const isGroupHovered = isResizeHandleHovered
|
|
35
|
+
const isGroupDragged = isResizeHandleBeingDragged ?? isElementDragged;
|
|
36
|
+
const isGroupHovered = isResizeHandleHovered ?? isElementHovered;
|
|
37
37
|
useConditionalCleanup(isElementDragged && !!onResizeHandleDragChanged, () => onResizeHandleDragChanged(false));
|
|
38
38
|
useConditionalCleanup(isElementHovered && !!onResizeHandleHoverChanged, () => onResizeHandleHoverChanged(false));
|
|
39
39
|
if (isGroupHovered && pointerOutOfBounds.current)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ElementSeparator.js","sourceRoot":"","sources":["../../../../src/core-react/elementseparator/ElementSeparator.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module ElementSeparator\n */\n\nimport \"./ElementSeparator.scss\";\nimport * as React from \"react\";\nimport {\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { Orientation } from \"../enums/Orientation\";\nimport type { CommonProps } from \"../utils/Props\";\nimport { useThrottledFn } from \"../utils/hooks/useThrottledFn\";\nimport { UiCore } from \"../UiCore\";\n\n/**\n * Results returned by onRatioChanged callback for determining new ratio and whether the ratio was updated.\n * @public\n */\nexport interface RatioChangeResult {\n ratio: number;\n}\n\n/** Properties of [[ElementSeparator]] React component\n * @public\n */\nexport interface ElementSeparatorProps extends CommonProps {\n /** Separator orientation */\n orientation: Orientation;\n /** Ratio between left cell and right cell */\n ratio: number;\n /** Area width or height (depending on orientation) in pixels */\n movableArea?: number;\n /** Separator width or height in pixels. 30 by default */\n separatorSize?: number;\n /** Callback to ratio changed event */\n onRatioChanged?: (ratio: number) => void | RatioChangeResult;\n /** Is resize handle hovered */\n isResizeHandleHovered?: boolean;\n /** Callback to hover event change */\n onResizeHandleHoverChanged?: (isHovered: boolean) => void;\n /** Is resize handle being dragged */\n isResizeHandleBeingDragged?: boolean;\n /** Callback to drag event change */\n onResizeHandleDragChanged?: (isDragStarted: boolean) => void;\n}\n\nfunction getCurrentGlobalPosition(\n orientation: Orientation,\n e: PointerEvent | React.PointerEvent\n) {\n return orientation === Orientation.Horizontal ? e.clientX : e.clientY;\n}\n\nconst useConditionalCleanup = (condition: boolean, cleanup: () => void) => {\n const conditionRef = useRef(condition);\n const cleanupRef = useRef(cleanup);\n\n conditionRef.current = condition;\n cleanupRef.current = cleanup;\n\n useEffect(() => {\n return () => {\n if (conditionRef.current) cleanupRef.current();\n };\n }, []);\n};\n\nconst useElementSeparatorPointerHandler = ({\n onResizeHandleDragChanged,\n onResizeHandleHoverChanged,\n isResizeHandleBeingDragged,\n isResizeHandleHovered,\n movableArea,\n ratio,\n orientation,\n onRatioChanged,\n}: ElementSeparatorProps) => {\n const globalPosition = useRef(0);\n const pointerOutOfBounds = useRef(false);\n\n const [isElementDragged, setIsDragged] = useState(false);\n const [isElementHovered, setIsHovered] = useState(false);\n const isGroupDragged = isResizeHandleBeingDragged ?? isElementDragged;\n const isGroupHovered = isResizeHandleHovered ?? isElementHovered;\n\n useConditionalCleanup(isElementDragged && !!onResizeHandleDragChanged, () =>\n onResizeHandleDragChanged!(false)\n );\n useConditionalCleanup(isElementHovered && !!onResizeHandleHoverChanged, () =>\n onResizeHandleHoverChanged!(false)\n );\n\n if (isGroupHovered && pointerOutOfBounds.current)\n pointerOutOfBounds.current = false;\n\n const stopDrag = useCallback(() => {\n // istanbul ignore else\n if (isGroupDragged) {\n setIsDragged(false);\n if (onResizeHandleDragChanged) onResizeHandleDragChanged(false);\n }\n }, [isGroupDragged, onResizeHandleDragChanged]);\n\n const startDrag = useCallback(\n (e: PointerEvent | React.PointerEvent) => {\n globalPosition.current = getCurrentGlobalPosition(orientation, e);\n\n // istanbul ignore else\n if (!isGroupDragged) {\n setIsDragged(true);\n if (onResizeHandleDragChanged) onResizeHandleDragChanged(true);\n }\n },\n [isGroupDragged, orientation, onResizeHandleDragChanged]\n );\n\n const onPointerUp = useCallback(() => {\n stopDrag();\n }, [stopDrag]);\n\n const onThrottledPointerMove = useThrottledFn(\n (e: PointerEvent | React.PointerEvent) => {\n if (!movableArea) {\n stopDrag();\n return;\n }\n\n const currentPosition = getCurrentGlobalPosition(orientation, e);\n const positionChange = currentPosition - globalPosition.current;\n\n // Should not need to recalculate if position on our movement axis does not change\n if (Math.abs(positionChange) < 1) return;\n\n const currentLocalPosition = movableArea * ratio + positionChange;\n const newRatio = currentLocalPosition / movableArea;\n\n globalPosition.current = currentPosition;\n if (pointerOutOfBounds.current || !onRatioChanged) return;\n\n const result = onRatioChanged(newRatio);\n if (\n result &&\n result.ratio === ratio &&\n !isGroupHovered &&\n !pointerOutOfBounds.current\n )\n pointerOutOfBounds.current = true;\n },\n 16,\n [stopDrag, isGroupHovered, ratio, movableArea, onRatioChanged, orientation]\n );\n\n useEffect(() => {\n return () => onThrottledPointerMove.cancel();\n }, [onThrottledPointerMove]);\n\n useLayoutEffect(() => {\n if (isElementDragged) {\n document.addEventListener(\"pointerup\", onPointerUp);\n document.addEventListener(\"pointermove\", onThrottledPointerMove);\n }\n\n return () => {\n document.removeEventListener(\"pointerup\", onPointerUp);\n document.removeEventListener(\"pointermove\", onThrottledPointerMove);\n };\n }, [isElementDragged, onPointerUp, onThrottledPointerMove]);\n\n const onPointerDown = useCallback(\n (e: PointerEvent | React.PointerEvent) => {\n if (!isGroupDragged) {\n startDrag(e);\n } else {\n stopDrag();\n }\n },\n [isGroupDragged, startDrag, stopDrag]\n );\n\n const onPointerOver = useCallback(() => {\n // istanbul ignore next\n if (isGroupHovered) return;\n\n setIsHovered(true);\n if (onResizeHandleHoverChanged) onResizeHandleHoverChanged(true);\n }, [isGroupHovered, onResizeHandleHoverChanged]);\n\n const onPointerOut = useCallback(() => {\n // istanbul ignore next\n if (!isGroupHovered) return;\n\n setIsHovered(false);\n if (onResizeHandleHoverChanged) onResizeHandleHoverChanged(false);\n }, [isGroupHovered, onResizeHandleHoverChanged]);\n\n return {\n isHovered: isGroupHovered,\n isDragged: isGroupDragged,\n onPointerDown,\n onPointerOver,\n onPointerOut,\n };\n};\n\nfunction getStyle(\n orientation: Orientation,\n separatorSize?: number\n): React.CSSProperties {\n separatorSize = separatorSize || 30;\n\n if (orientation === Orientation.Horizontal)\n return {\n width: separatorSize,\n margin: `0px ${-Math.floor(separatorSize / 2)}px`,\n };\n return {\n height: separatorSize,\n margin: `${-Math.floor(separatorSize / 2)}px 1px`,\n };\n}\n\n/** A movable button, which allows to change the ratio between left element and right element\n * @public\n */\nexport const ElementSeparator = (props: ElementSeparatorProps) => {\n const label = useRef(UiCore.translate(\"elementSeparator.label\"));\n const [hasHoverHappened, setHasHoverHappened] = useState(false);\n const { isDragged, isHovered, onPointerDown, onPointerOver, onPointerOut } =\n useElementSeparatorPointerHandler(props);\n\n const isHoverNeeded = isHovered || isDragged;\n if (!hasHoverHappened && isHoverNeeded) setHasHoverHappened(isHoverNeeded);\n\n // This is done to avoid fade-out animation when first rendering.\n const unhoverClass = hasHoverHappened\n ? \"core-element-separator-group-unhovered\"\n : \"\";\n\n const classNames = classnames(\n \"core-element-separator\",\n props.orientation === Orientation.Horizontal\n ? \"core-element-separator--horizontal\"\n : \"core-element-separator--vertical\",\n props.className,\n isHoverNeeded ? \"core-element-separator-group-hovered\" : unhoverClass\n );\n\n const orientation = props.orientation;\n const separatorSize = props.separatorSize;\n const style = useMemo(\n () => getStyle(orientation, separatorSize),\n [orientation, separatorSize]\n );\n const styles: React.CSSProperties = {\n ...style,\n ...props.style,\n };\n\n return (\n <button\n style={styles}\n className={classNames}\n onPointerDown={onPointerDown}\n onPointerOver={onPointerOver}\n onPointerOut={onPointerOut}\n aria-label={label.current}\n />\n );\n};\n"]}
|
|
1
|
+
{"version":3,"file":"ElementSeparator.js","sourceRoot":"","sources":["../../../../src/core-react/elementseparator/ElementSeparator.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module ElementSeparator\n */\n\nimport \"./ElementSeparator.scss\";\nimport * as React from \"react\";\nimport {\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport classnames from \"classnames\";\nimport { Orientation } from \"../enums/Orientation\";\nimport type { CommonProps } from \"../utils/Props\";\nimport { useThrottledFn } from \"../utils/hooks/useThrottledFn\";\nimport { UiCore } from \"../UiCore\";\n\n/**\n * Results returned by onRatioChanged callback for determining new ratio and whether the ratio was updated.\n * @public\n */\nexport interface RatioChangeResult {\n ratio: number;\n}\n\n/** Properties of [[ElementSeparator]] React component\n * @public\n */\nexport interface ElementSeparatorProps extends CommonProps {\n /** Separator orientation */\n orientation: Orientation;\n /** Ratio between left cell and right cell */\n ratio: number;\n /** Area width or height (depending on orientation) in pixels */\n movableArea?: number;\n /** Separator width or height in pixels. 30 by default */\n separatorSize?: number;\n /** Callback to ratio changed event */\n onRatioChanged?: (ratio: number) => void | RatioChangeResult;\n /** Is resize handle hovered */\n isResizeHandleHovered?: boolean;\n /** Callback to hover event change */\n onResizeHandleHoverChanged?: (isHovered: boolean) => void;\n /** Is resize handle being dragged */\n isResizeHandleBeingDragged?: boolean;\n /** Callback to drag event change */\n onResizeHandleDragChanged?: (isDragStarted: boolean) => void;\n}\n\nfunction getCurrentGlobalPosition(\n orientation: Orientation,\n e: PointerEvent | React.PointerEvent\n) {\n return orientation === Orientation.Horizontal ? e.clientX : e.clientY;\n}\n\nconst useConditionalCleanup = (condition: boolean, cleanup: () => void) => {\n const conditionRef = useRef(condition);\n const cleanupRef = useRef(cleanup);\n\n conditionRef.current = condition;\n cleanupRef.current = cleanup;\n\n useEffect(() => {\n return () => {\n if (conditionRef.current) cleanupRef.current();\n };\n }, []);\n};\n\nconst useElementSeparatorPointerHandler = ({\n onResizeHandleDragChanged,\n onResizeHandleHoverChanged,\n isResizeHandleBeingDragged,\n isResizeHandleHovered,\n movableArea,\n ratio,\n orientation,\n onRatioChanged,\n}: ElementSeparatorProps) => {\n const globalPosition = useRef(0);\n const pointerOutOfBounds = useRef(false);\n\n const [isElementDragged, setIsDragged] = useState(false);\n const [isElementHovered, setIsHovered] = useState(false);\n const isGroupDragged = isResizeHandleBeingDragged ?? isElementDragged;\n const isGroupHovered = isResizeHandleHovered ?? isElementHovered;\n\n useConditionalCleanup(isElementDragged && !!onResizeHandleDragChanged, () =>\n onResizeHandleDragChanged!(false)\n );\n useConditionalCleanup(isElementHovered && !!onResizeHandleHoverChanged, () =>\n onResizeHandleHoverChanged!(false)\n );\n\n if (isGroupHovered && pointerOutOfBounds.current)\n pointerOutOfBounds.current = false;\n\n const stopDrag = useCallback(() => {\n // istanbul ignore else\n if (isGroupDragged) {\n setIsDragged(false);\n if (onResizeHandleDragChanged) onResizeHandleDragChanged(false);\n }\n }, [isGroupDragged, onResizeHandleDragChanged]);\n\n const startDrag = useCallback(\n (e: PointerEvent | React.PointerEvent) => {\n globalPosition.current = getCurrentGlobalPosition(orientation, e);\n\n // istanbul ignore else\n if (!isGroupDragged) {\n setIsDragged(true);\n if (onResizeHandleDragChanged) onResizeHandleDragChanged(true);\n }\n },\n [isGroupDragged, orientation, onResizeHandleDragChanged]\n );\n\n const onPointerUp = useCallback(() => {\n stopDrag();\n }, [stopDrag]);\n\n const onThrottledPointerMove = useThrottledFn(\n (e: PointerEvent | React.PointerEvent) => {\n if (!movableArea) {\n stopDrag();\n return;\n }\n\n const currentPosition = getCurrentGlobalPosition(orientation, e);\n const positionChange = currentPosition - globalPosition.current;\n\n // Should not need to recalculate if position on our movement axis does not change\n if (Math.abs(positionChange) < 1) return;\n\n const currentLocalPosition = movableArea * ratio + positionChange;\n const newRatio = currentLocalPosition / movableArea;\n\n globalPosition.current = currentPosition;\n if (pointerOutOfBounds.current || !onRatioChanged) return;\n\n const result = onRatioChanged(newRatio);\n if (\n result &&\n result.ratio === ratio &&\n !isGroupHovered &&\n !pointerOutOfBounds.current\n )\n pointerOutOfBounds.current = true;\n },\n 16,\n [stopDrag, isGroupHovered, ratio, movableArea, onRatioChanged, orientation]\n );\n\n useEffect(() => {\n return () => onThrottledPointerMove.cancel();\n }, [onThrottledPointerMove]);\n\n useLayoutEffect(() => {\n if (isElementDragged) {\n document.addEventListener(\"pointerup\", onPointerUp);\n document.addEventListener(\"pointermove\", onThrottledPointerMove);\n }\n\n return () => {\n document.removeEventListener(\"pointerup\", onPointerUp);\n document.removeEventListener(\"pointermove\", onThrottledPointerMove);\n };\n }, [isElementDragged, onPointerUp, onThrottledPointerMove]);\n\n const onPointerDown = useCallback(\n (e: PointerEvent | React.PointerEvent) => {\n if (!isGroupDragged) {\n startDrag(e);\n } else {\n stopDrag();\n }\n },\n [isGroupDragged, startDrag, stopDrag]\n );\n\n const onPointerOver = useCallback(() => {\n // istanbul ignore next\n if (isGroupHovered) return;\n\n setIsHovered(true);\n if (onResizeHandleHoverChanged) onResizeHandleHoverChanged(true);\n }, [isGroupHovered, onResizeHandleHoverChanged]);\n\n const onPointerOut = useCallback(() => {\n // istanbul ignore next\n if (!isGroupHovered) return;\n\n setIsHovered(false);\n if (onResizeHandleHoverChanged) onResizeHandleHoverChanged(false);\n }, [isGroupHovered, onResizeHandleHoverChanged]);\n\n return {\n isHovered: isGroupHovered,\n isDragged: isGroupDragged,\n onPointerDown,\n onPointerOver,\n onPointerOut,\n };\n};\n\nfunction getStyle(\n orientation: Orientation,\n separatorSize?: number\n): React.CSSProperties {\n separatorSize = separatorSize || 30;\n\n if (orientation === Orientation.Horizontal)\n return {\n width: separatorSize,\n margin: `0px ${-Math.floor(separatorSize / 2)}px`,\n };\n return {\n height: separatorSize,\n margin: `${-Math.floor(separatorSize / 2)}px 1px`,\n };\n}\n\n/** A movable button, which allows to change the ratio between left element and right element\n * @public\n */\nexport const ElementSeparator = (props: ElementSeparatorProps) => {\n const label = useRef(UiCore.translate(\"elementSeparator.label\"));\n const [hasHoverHappened, setHasHoverHappened] = useState(false);\n const { isDragged, isHovered, onPointerDown, onPointerOver, onPointerOut } =\n useElementSeparatorPointerHandler(props);\n\n const isHoverNeeded = isHovered || isDragged;\n if (!hasHoverHappened && isHoverNeeded) setHasHoverHappened(isHoverNeeded);\n\n // This is done to avoid fade-out animation when first rendering.\n const unhoverClass = hasHoverHappened\n ? \"core-element-separator-group-unhovered\"\n : \"\";\n\n const classNames = classnames(\n \"core-element-separator\",\n props.orientation === Orientation.Horizontal\n ? \"core-element-separator--horizontal\"\n : \"core-element-separator--vertical\",\n props.className,\n isHoverNeeded ? \"core-element-separator-group-hovered\" : unhoverClass\n );\n\n const orientation = props.orientation;\n const separatorSize = props.separatorSize;\n const style = useMemo(\n () => getStyle(orientation, separatorSize),\n [orientation, separatorSize]\n );\n const styles: React.CSSProperties = {\n ...style,\n ...props.style,\n };\n\n return (\n <button\n style={styles}\n className={classNames}\n onPointerDown={onPointerDown}\n onPointerOver={onPointerOver}\n onPointerOut={onPointerOut}\n aria-label={label.current}\n />\n );\n};\n"]}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/*---------------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
-
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
-
*--------------------------------------------------------------------------------------------*/
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
5
|
@import "./list";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*---------------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
-
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
-
*--------------------------------------------------------------------------------------------*/
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
5
|
@import "../style/index";
|
|
6
6
|
|
|
7
7
|
@mixin uicore-expandable-blocks-list {
|
|
@@ -84,9 +84,8 @@ export const withOnOutsideClick = (Component, defaultOnOutsideClick, useCapture
|
|
|
84
84
|
return defaultOnOutsideClick(e);
|
|
85
85
|
}
|
|
86
86
|
getParentDocument() {
|
|
87
|
-
var _a, _b;
|
|
88
87
|
// istanbul ignore next
|
|
89
|
-
return
|
|
88
|
+
return this.outsideClickContainerDiv?.ownerDocument ?? document;
|
|
90
89
|
}
|
|
91
90
|
componentDidMount() {
|
|
92
91
|
const outsideClickParentDocument = this.getParentDocument();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"withOnOutsideClick.js","sourceRoot":"","sources":["../../../../src/core-react/hocs/withOnOutsideClick.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"withOnOutsideClick.js","sourceRoot":"","sources":["../../../../src/core-react/hocs/withOnOutsideClick.tsx"],"names":[],"mappings":"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","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Common\n */\n\nimport * as React from \"react\";\n\n/** Properties for [[withOnOutsideClick]] React higher-order component\n * @public\n */\nexport interface WithOnOutsideClickProps {\n /** Outside click callback function */\n onOutsideClick?: (event: MouseEvent) => any;\n /** If false outside click processing and closing are skipped if click occurs in another Popup component, default to false. */\n closeOnNestedPopupOutsideClick?: boolean;\n}\n\n/** withOnOutsideClick is a React higher-order component that adds outside click support.\n * @public\n */\nexport const withOnOutsideClick = <ComponentProps extends {}>(\n Component: React.ComponentType<ComponentProps>,\n defaultOnOutsideClick?: (event: MouseEvent) => any,\n useCapture: boolean = true,\n usePointerEvents: boolean = true\n) => {\n return class WithOnOutsideClick extends React.PureComponent<\n ComponentProps & WithOnOutsideClickProps\n > {\n /** @internal */\n public outsideClickContainerDiv?: HTMLDivElement | null = null;\n /** @internal */\n public isDownOutside = false;\n\n /** @internal */\n public isInCorePopup(element: HTMLElement): boolean {\n if (element.nodeName === \"DIV\") {\n if (element.classList && element.classList.contains(\"core-popup\"))\n return true;\n if (element.parentElement && this.isInCorePopup(element.parentElement))\n return true;\n } else {\n // istanbul ignore else\n if (element.parentElement && this.isInCorePopup(element.parentElement))\n return true;\n }\n return false;\n }\n\n /** @internal */\n public onOutsideClick(e: MouseEvent) {\n // istanbul ignore else\n if (e.target instanceof Node && e.target.nodeType === Node.ELEMENT_NODE) {\n // istanbul ignore else\n if (\n !this.props.closeOnNestedPopupOutsideClick &&\n this.isInCorePopup(e.target as HTMLElement)\n )\n return;\n }\n\n if (this.props.onOutsideClick) return this.props.onOutsideClick(e);\n else if (defaultOnOutsideClick) return defaultOnOutsideClick(e);\n }\n\n /** @internal */\n public handleDocumentClick = (e: MouseEvent) => {\n if (\n !this.outsideClickContainerDiv ||\n !(e.target instanceof Node) ||\n this.outsideClickContainerDiv.contains(e.target)\n )\n return;\n\n return this.onOutsideClick(e);\n };\n\n /** @internal */\n public handleDocumentPointerDown = (e: PointerEvent) => {\n this.isDownOutside = true;\n // istanbul ignore else\n if (this.outsideClickContainerDiv) {\n // typically e.target test for instance of Node, but this is not working from pop out windows\n this.isDownOutside =\n !!e.target &&\n !this.outsideClickContainerDiv.contains(e.target as any);\n }\n };\n\n /** @internal */\n public handleDocumentPointerUp = (e: PointerEvent) => {\n let isUpOutside = true;\n // istanbul ignore else\n if (this.outsideClickContainerDiv) {\n // typically e.target test for instance of Node, but this is not working from pop out windows\n isUpOutside =\n !!e.target &&\n !this.outsideClickContainerDiv.contains(e.target as any);\n }\n\n const isOutsideClick = isUpOutside && this.isDownOutside;\n this.isDownOutside = false;\n isOutsideClick && this.onOutsideClick(e);\n };\n\n public handleOutsideClickContainerDivSet = (\n outsideClickContainerDiv: HTMLDivElement | null\n ) => {\n this.outsideClickContainerDiv = outsideClickContainerDiv;\n };\n\n public getParentDocument() {\n // istanbul ignore next\n return this.outsideClickContainerDiv?.ownerDocument ?? document;\n }\n\n public override componentDidMount() {\n const outsideClickParentDocument = this.getParentDocument();\n if (usePointerEvents) {\n outsideClickParentDocument.addEventListener(\n \"pointerdown\",\n this.handleDocumentPointerDown,\n useCapture\n );\n outsideClickParentDocument.addEventListener(\n \"pointerup\",\n this.handleDocumentPointerUp,\n useCapture\n );\n } else\n outsideClickParentDocument.addEventListener(\n \"click\",\n this.handleDocumentClick,\n useCapture\n );\n }\n\n /** @internal */\n public override componentWillUnmount() {\n const outsideClickParentDocument = this.getParentDocument();\n if (usePointerEvents) {\n outsideClickParentDocument.removeEventListener(\n \"pointerdown\",\n this.handleDocumentPointerDown,\n useCapture\n );\n outsideClickParentDocument.removeEventListener(\n \"pointerup\",\n this.handleDocumentPointerUp,\n useCapture\n );\n } else\n outsideClickParentDocument.removeEventListener(\n \"click\",\n this.handleDocumentClick,\n useCapture\n );\n }\n\n public override render() {\n const { onOutsideClick, closeOnNestedPopupOutsideClick, ...props } =\n this.props;\n return (\n <div ref={this.handleOutsideClickContainerDivSet}>\n <Component {...(props as ComponentProps)} />\n </div>\n );\n }\n };\n};\n"]}
|
|
@@ -29,7 +29,7 @@ export function Icon(props) {
|
|
|
29
29
|
// the esm build of dompurify has a default import but the cjs build does not
|
|
30
30
|
// if there is a default export, use it (likely esm), otherwise use the namespace
|
|
31
31
|
// istanbul ignore next
|
|
32
|
-
const sanitizer = DOMPurify
|
|
32
|
+
const sanitizer = DOMPurify ?? DOMPurifyNS;
|
|
33
33
|
const sanitizerConfig = {
|
|
34
34
|
ALLOWED_TAGS: ["svg-loader"],
|
|
35
35
|
ADD_URI_SAFE_ATTR: webComponentString.startsWith("data:")
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IconComponent.js","sourceRoot":"","sources":["../../../../src/core-react/icons/IconComponent.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EACL,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,SAAS,EAAE,KAAK,WAAW,MAAM,WAAW,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAqB5D;;GAEG;AACH,MAAM,UAAU,IAAI,CAAC,KAAgB;IACnC,IAAI,CAAC,KAAK,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAEjC,MAAM,UAAU,GACd,OAAO,KAAK,CAAC,QAAQ,KAAK,QAAQ;QAClC,KAAK,CAAC,QAAQ,YAAY,sBAAsB;QAC9C,CAAC,CAAC,sBAAsB,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;QACjD,CAAC,CAAC,SAAS,CAAC;IAEhB,IAAI,UAAU,EAAE;QACd,MAAM,kBAAkB,GACtB,iBAAiB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC;QACtD,IAAI,kBAAkB,EAAE;YACtB,MAAM,SAAS,GAAG,oBAAoB,kBAAkB,iBAAiB,CAAC;YAC1E,MAAM,MAAM,GAAG,QAAQ,SAAS,QAAQ,CAAC;YACzC,6EAA6E;YAC7E,iFAAiF;YACjF,uBAAuB;YACvB,MAAM,SAAS,GAAG,SAAS,
|
|
1
|
+
{"version":3,"file":"IconComponent.js","sourceRoot":"","sources":["../../../../src/core-react/icons/IconComponent.tsx"],"names":[],"mappings":"AAAA;;;gGAGgG;AAChG;;GAEG;AAEH,OAAO,sBAAsB,CAAC;AAC9B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EACL,sBAAsB,EACtB,iBAAiB,GAClB,MAAM,uBAAuB,CAAC;AAE/B,OAAO,SAAS,EAAE,KAAK,WAAW,MAAM,WAAW,CAAC;AACpD,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAqB5D;;GAEG;AACH,MAAM,UAAU,IAAI,CAAC,KAAgB;IACnC,IAAI,CAAC,KAAK,CAAC,QAAQ;QAAE,OAAO,IAAI,CAAC;IAEjC,MAAM,UAAU,GACd,OAAO,KAAK,CAAC,QAAQ,KAAK,QAAQ;QAClC,KAAK,CAAC,QAAQ,YAAY,sBAAsB;QAC9C,CAAC,CAAC,sBAAsB,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;QACjD,CAAC,CAAC,SAAS,CAAC;IAEhB,IAAI,UAAU,EAAE;QACd,MAAM,kBAAkB,GACtB,iBAAiB,CAAC,qBAAqB,CAAC,UAAU,CAAC,CAAC;QACtD,IAAI,kBAAkB,EAAE;YACtB,MAAM,SAAS,GAAG,oBAAoB,kBAAkB,iBAAiB,CAAC;YAC1E,MAAM,MAAM,GAAG,QAAQ,SAAS,QAAQ,CAAC;YACzC,6EAA6E;YAC7E,iFAAiF;YACjF,uBAAuB;YACvB,MAAM,SAAS,GAAG,SAAS,IAAI,WAAW,CAAC;YAE3C,MAAM,eAAe,GAAG;gBACtB,YAAY,EAAE,CAAC,YAAY,CAAC;gBAC5B,iBAAiB,EAAE,kBAAkB,CAAC,UAAU,CAAC,OAAO,CAAC;oBACvD,CAAC,CAAC,CAAC,KAAK,CAAC;oBACT,CAAC,CAAC,EAAE;aACP,CAAC;YAEF,MAAM,mBAAmB,GAAG,SAAS,CAAC,QAAQ,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;YACxE,MAAM,gBAAgB,GAAG;YACvB,iFAAiF;YACjF,yDAAyD;YACzD,6BAAK,uBAAuB,EAAE,EAAE,MAAM,EAAE,mBAAmB,EAAE,GAAQ,CACtE,CAAC;YACF,OAAO,CACL,2BAAG,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,IAC/D,gBAAgB,CACf,CACL,CAAC;SACH;QACD,OAAO,CACL,2BACE,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,CAAC,SAAS,CAAC,EAC1D,KAAK,EAAE,KAAK,CAAC,KAAK,GAClB,CACH,CAAC;KACH;IAED,IAAI,mBAAmB,CAAC,qBAAqB,CAAC,KAAK,CAAC,QAAQ,CAAC,EAAE;QAC7D,OAAO,CACL,2BACE,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,EAC/D,KAAK,EAAE,KAAK,CAAC,KAAK,IAEjB,mBAAmB,CAAC,QAAQ,CAAC,KAAK,CAAC,QAA+B,CAAC,CAClE,CACL,CAAC;KACH;IAED,OAAO,CACL,2BACE,SAAS,EAAE,UAAU,CAAC,MAAM,EAAE,eAAe,EAAE,KAAK,CAAC,SAAS,CAAC,EAC/D,KAAK,EAAE,KAAK,CAAC,KAAK,IAEjB,KAAK,CAAC,QAAQ,YAAY,sBAAsB;QAC/C,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,KAAK,CAAC,QAAQ,CAChB,CACL,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n * Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n * See LICENSE.md in the project root for license terms and full copyright notice.\n *--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Icon\n */\n\nimport \"./IconComponent.scss\";\nimport * as React from \"react\";\nimport classnames from \"classnames\";\nimport {\n ConditionalStringValue,\n IconSpecUtilities,\n} from \"@itwin/appui-abstract\";\nimport type { CommonProps } from \"../utils/Props\";\nimport DOMPurify, * as DOMPurifyNS from \"dompurify\";\nimport { ConditionalIconItem } from \"./ConditionalIconItem\";\n\n/** Prototype for an IconSpec which can be a string, ReactNode or ConditionalStringValue.\n * @public\n */\nexport type IconSpec =\n | string\n | ConditionalStringValue\n | React.ReactNode\n | ConditionalIconItem;\n\n/** Properties for the [[Icon]] React component\n * @public\n */\nexport interface IconProps extends CommonProps {\n /** CSS class name or SvgPath for icon. This is optional because it is improperly\n * used to extend other interfaces and changing it would break existing API.\n */\n iconSpec?: IconSpec;\n}\n\n/** Icon Functional component displays an icon based on an [[IconSpec]].\n * @public\n */\nexport function Icon(props: IconProps) {\n if (!props.iconSpec) return null;\n\n const iconString =\n typeof props.iconSpec === \"string\" ||\n props.iconSpec instanceof ConditionalStringValue\n ? ConditionalStringValue.getValue(props.iconSpec)\n : undefined;\n\n if (iconString) {\n const webComponentString =\n IconSpecUtilities.getWebComponentSource(iconString);\n if (webComponentString) {\n const svgLoader = `<svg-loader src=\"${webComponentString}\"></svg-loader>`;\n const svgDiv = `<div>${svgLoader}</div>`;\n // the esm build of dompurify has a default import but the cjs build does not\n // if there is a default export, use it (likely esm), otherwise use the namespace\n // istanbul ignore next\n const sanitizer = DOMPurify ?? DOMPurifyNS;\n\n const sanitizerConfig = {\n ALLOWED_TAGS: [\"svg-loader\"],\n ADD_URI_SAFE_ATTR: webComponentString.startsWith(\"data:\")\n ? [\"src\"]\n : [],\n };\n\n const sanitizedIconString = sanitizer.sanitize(svgDiv, sanitizerConfig);\n const webComponentNode = (\n // we can safely disable jam3/no-sanitizer-with-danger as we are sanitizing above\n // eslint-disable-next-line jam3/no-sanitizer-with-danger\n <div dangerouslySetInnerHTML={{ __html: sanitizedIconString }}></div>\n );\n return (\n <i className={classnames(\"icon\", \"core-svg-icon\", props.className)}>\n {webComponentNode}\n </i>\n );\n }\n return (\n <i\n className={classnames(\"icon\", iconString, props.className)}\n style={props.style}\n />\n );\n }\n\n if (ConditionalIconItem.isConditionalIconItem(props.iconSpec)) {\n return (\n <i\n className={classnames(\"icon\", \"core-svg-icon\", props.className)}\n style={props.style}\n >\n {ConditionalIconItem.getValue(props.iconSpec as ConditionalIconItem)}\n </i>\n );\n }\n\n return (\n <i\n className={classnames(\"icon\", \"core-svg-icon\", props.className)}\n style={props.style}\n >\n {props.iconSpec instanceof ConditionalStringValue\n ? undefined\n : props.iconSpec}\n </i>\n );\n}\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*---------------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
-
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
-
*--------------------------------------------------------------------------------------------*/
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
5
|
.core-icons-svgPath {
|
|
6
6
|
display: inline-block;
|
|
7
7
|
box-sizing: border-box;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*---------------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
-
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
-
*--------------------------------------------------------------------------------------------*/
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
5
|
@import "./index";
|
|
6
6
|
|
|
7
7
|
.bui-webfont-icon {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/*---------------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
-
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
-
*--------------------------------------------------------------------------------------------*/
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
5
|
@import "./variables";
|
|
6
6
|
@import "./mixins";
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*---------------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
-
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
-
*--------------------------------------------------------------------------------------------*/
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
5
|
@import "./variables";
|
|
6
6
|
|
|
7
7
|
@mixin uicore-icons-small {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*---------------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
-
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
-
*--------------------------------------------------------------------------------------------*/
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
5
|
|
|
6
6
|
// Sizes
|
|
7
7
|
$uicore-icons-x-small: 12px;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*---------------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
-
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
-
*--------------------------------------------------------------------------------------------*/
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
5
|
@import "../style/index.scss";
|
|
6
6
|
@import "../icons/variables.scss";
|
|
7
7
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/*---------------------------------------------------------------------------------------------
|
|
2
|
-
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
-
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
-
*--------------------------------------------------------------------------------------------*/
|
|
2
|
+
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
|
|
3
|
+
* See LICENSE.md in the project root for license terms and full copyright notice.
|
|
4
|
+
*--------------------------------------------------------------------------------------------*/
|
|
5
5
|
@use "sass:math";
|
|
6
6
|
|
|
7
7
|
@import "./style/index";
|