@box/blueprint-web 12.22.0 → 12.23.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.
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"card":"bp_card_module_card--
|
|
2
|
+
var styles = {"card":"bp_card_module_card--6d119","dropshadow-1":"bp_card_module_dropshadow-1--6d119","dropshadow-3":"bp_card_module_dropshadow-3--6d119"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
package/dist/lib-esm/index.css
CHANGED
|
@@ -1221,18 +1221,18 @@
|
|
|
1221
1221
|
.bp_button_wrapper_module_buttonWrapper--b0897{
|
|
1222
1222
|
all:unset;
|
|
1223
1223
|
}
|
|
1224
|
-
.bp_card_module_card--
|
|
1224
|
+
.bp_card_module_card--6d119[data-modern=true]{
|
|
1225
1225
|
--bp-card-dropshadow-1:var(--dropshadow-1);
|
|
1226
1226
|
--bp-card-dropshadow-3:var(--dropshadow-3);
|
|
1227
1227
|
--card-radius:var(--bp-radius-10);
|
|
1228
|
-
--card-padding:var(--bp-space-
|
|
1228
|
+
--card-padding:var(--bp-space-040);
|
|
1229
1229
|
--card-background:var(--bp-surface-card-surface);
|
|
1230
1230
|
--card-border:var(--bp-border-01) solid var(--bp-border-card-border);
|
|
1231
1231
|
--card-dropshadow-1:var(--bp-card-dropshadow-1);
|
|
1232
1232
|
--card-dropshadow-3:var(--bp-card-dropshadow-3);
|
|
1233
1233
|
}
|
|
1234
1234
|
|
|
1235
|
-
.bp_card_module_card--
|
|
1235
|
+
.bp_card_module_card--6d119[data-modern=false]{
|
|
1236
1236
|
--card-padding:var(--space-4);
|
|
1237
1237
|
--card-background:var(--surface-card-surface);
|
|
1238
1238
|
--card-border:var(--border-1) solid var(--border-card-border);
|
|
@@ -1241,16 +1241,16 @@
|
|
|
1241
1241
|
--card-dropshadow-3:var(--dropshadow-3);
|
|
1242
1242
|
}
|
|
1243
1243
|
|
|
1244
|
-
.bp_card_module_card--
|
|
1244
|
+
.bp_card_module_card--6d119{
|
|
1245
1245
|
background:var(--card-background);
|
|
1246
1246
|
border:var(--card-border);
|
|
1247
1247
|
border-radius:var(--card-radius);
|
|
1248
1248
|
padding:var(--card-padding);
|
|
1249
1249
|
}
|
|
1250
|
-
.bp_card_module_card--
|
|
1250
|
+
.bp_card_module_card--6d119.bp_card_module_dropshadow-1--6d119{
|
|
1251
1251
|
box-shadow:var(--card-dropshadow-1);
|
|
1252
1252
|
}
|
|
1253
|
-
.bp_card_module_card--
|
|
1253
|
+
.bp_card_module_card--6d119.bp_card_module_dropshadow-3--6d119{
|
|
1254
1254
|
box-shadow:var(--card-dropshadow-3);
|
|
1255
1255
|
}
|
|
1256
1256
|
|
|
@@ -5901,54 +5901,106 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
|
|
|
5901
5901
|
fill:currentColor;
|
|
5902
5902
|
}
|
|
5903
5903
|
|
|
5904
|
-
.bp_popover_module_popoverContentContainer--
|
|
5905
|
-
margin-inline-end:
|
|
5906
|
-
mask-image:
|
|
5907
|
-
mask-position:
|
|
5908
|
-
mask-size:
|
|
5909
|
-
overflow-y:
|
|
5910
|
-
padding-right:var(--
|
|
5911
|
-
transition:
|
|
5912
|
-
}
|
|
5913
|
-
|
|
5914
|
-
.bp_popover_module_popoverContentContainer--
|
|
5904
|
+
.bp_popover_module_popoverContentContainer--5e1df .bp_popover_module_popoverCard--5e1df .bp_popover_module_popoverMainContent--5e1df,.bp_popover_module_popoverContentContainer--5e1df.bp_popover_module_accessibilitySmallBreakpoint--5e1df .bp_popover_module_popoverCard--5e1df .bp_popover_module_popoverScrollContainer--5e1df{
|
|
5905
|
+
margin-inline-end:var(--scroll-mask-margin-inline-end);
|
|
5906
|
+
mask-image:var(--scroll-mask-mask-image);
|
|
5907
|
+
mask-position:var(--scroll-mask-mask-position);
|
|
5908
|
+
mask-size:var(--scroll-mask-mask-size);
|
|
5909
|
+
overflow-y:var(--scroll-mask-overflow);
|
|
5910
|
+
padding-right:var(--scroll-mask-padding-right);
|
|
5911
|
+
transition:var(--scroll-mask-transition);
|
|
5912
|
+
}
|
|
5913
|
+
|
|
5914
|
+
.bp_popover_module_popoverContentContainer--5e1df[data-modern=false]{
|
|
5915
|
+
--scroll-mask-padding-right:var(--space-4);
|
|
5916
|
+
--scroll-mask-overflow:auto;
|
|
5917
|
+
--scroll-mask-transition:mask-position var(--animation-duration-3), -webkit-mask-position var(--animation-duration-3);
|
|
5918
|
+
--scroll-mask-margin-inline-end:calc(var(--space-4)*-1);
|
|
5919
|
+
--scroll-mask-mask-image:linear-gradient(to top, #0000, var(--gray-black)), linear-gradient(to left, #0000 var(--space-4), var(--gray-black) var(--space-4));
|
|
5920
|
+
--scroll-mask-mask-size:100% 20000px;
|
|
5921
|
+
--scroll-mask-mask-position:left bottom;
|
|
5922
|
+
--popover-card-margin-block:var(--space-1);
|
|
5923
|
+
--popover-card-box-shadow:var(--dropshadow-3);
|
|
5924
|
+
--popover-main-content-inner-container-padding:var(--space-3);
|
|
5925
|
+
--popover-scroll-container-small-breakpoint-max-height:min(
|
|
5926
|
+
var(
|
|
5927
|
+
--blueprint-web-popover-content-max-height,
|
|
5928
|
+
calc(var(--radix-popover-content-available-height) - var(--space-12))
|
|
5929
|
+
),
|
|
5930
|
+
calc(var(--radix-popover-content-available-height) - var(--space-12))
|
|
5931
|
+
);
|
|
5932
|
+
--popover-scroll-container-small-breakpoint-padding-block:var(--space-1);
|
|
5933
|
+
--popover-footer-padding-block-start:var(--space-4);
|
|
5934
|
+
--popover-footer-margin-inline:calc(var(--space-4)*-1);
|
|
5935
|
+
--popover-footer-padding-inline:var(--space-4);
|
|
5936
|
+
--popover-footer-border-top:var(--border-1) solid var(--border-card-border);
|
|
5937
|
+
}
|
|
5938
|
+
|
|
5939
|
+
.bp_popover_module_popoverContentContainer--5e1df[data-modern=true]{
|
|
5940
|
+
--bp-dropshadow-3:var(--dropshadow-3);
|
|
5941
|
+
--bp-animation-duration-3:var(--animation-duration-3);
|
|
5942
|
+
--scroll-mask-padding-right:var(--bp-space-040);
|
|
5943
|
+
--scroll-mask-overflow:auto;
|
|
5944
|
+
--scroll-mask-transition:mask-position var(--bp-animation-duration-3), -webkit-mask-position var(--bp-animation-duration-3);
|
|
5945
|
+
--scroll-mask-margin-inline-end:calc(var(--bp-space-040)*-1);
|
|
5946
|
+
--scroll-mask-mask-image:linear-gradient(to top, #0000, var(--bp-gray-black)), linear-gradient(to left, #0000 var(--bp-space-040), var(--bp-gray-black) var(--bp-space-040));
|
|
5947
|
+
--scroll-mask-mask-size:100% 20000px;
|
|
5948
|
+
--scroll-mask-mask-position:left bottom;
|
|
5949
|
+
--popover-card-margin-block:var(--bp-space-010);
|
|
5950
|
+
--popover-card-box-shadow:var(--bp-dropshadow-3);
|
|
5951
|
+
--popover-main-content-inner-container-padding:var(--bp-space-030);
|
|
5952
|
+
--popover-scroll-container-small-breakpoint-max-height:min(
|
|
5953
|
+
var(
|
|
5954
|
+
--blueprint-web-popover-content-max-height,
|
|
5955
|
+
calc(var(--radix-popover-content-available-height) - var(--bp-space-120))
|
|
5956
|
+
),
|
|
5957
|
+
calc(var(--radix-popover-content-available-height) - var(--bp-space-120))
|
|
5958
|
+
);
|
|
5959
|
+
--popover-scroll-container-small-breakpoint-padding-block:var(--bp-space-010);
|
|
5960
|
+
--popover-footer-padding-block-start:var(--bp-space-040);
|
|
5961
|
+
--popover-footer-margin-inline:calc(var(--bp-space-040)*-1);
|
|
5962
|
+
--popover-footer-padding-inline:var(--bp-space-040);
|
|
5963
|
+
--popover-footer-border-top:var(--bp-border-01) solid var(--bp-border-card-border);
|
|
5964
|
+
}
|
|
5965
|
+
|
|
5966
|
+
.bp_popover_module_popoverContentContainer--5e1df{
|
|
5915
5967
|
max-width:320px;
|
|
5916
|
-
z-index:
|
|
5968
|
+
z-index:var(--z-index-popover);
|
|
5917
5969
|
}
|
|
5918
|
-
.bp_popover_module_popoverContentContainer--
|
|
5919
|
-
box-shadow:var(--
|
|
5920
|
-
margin-block:var(--
|
|
5970
|
+
.bp_popover_module_popoverContentContainer--5e1df .bp_popover_module_popoverCard--5e1df{
|
|
5971
|
+
box-shadow:var(--popover-card-box-shadow);
|
|
5972
|
+
margin-block:var(--popover-card-margin-block);
|
|
5921
5973
|
}
|
|
5922
|
-
.bp_popover_module_popoverContentContainer--
|
|
5974
|
+
.bp_popover_module_popoverContentContainer--5e1df .bp_popover_module_popoverCard--5e1df .bp_popover_module_popoverMainContent--5e1df:hover{
|
|
5923
5975
|
mask-position:left top;
|
|
5924
5976
|
}
|
|
5925
|
-
.bp_popover_module_popoverContentContainer--
|
|
5977
|
+
.bp_popover_module_popoverContentContainer--5e1df .bp_popover_module_popoverCard--5e1df .bp_popover_module_popoverMainContent--5e1df .bp_popover_module_popoverMainContentOuterContainer--5e1df{
|
|
5926
5978
|
max-height:inherit;
|
|
5927
5979
|
}
|
|
5928
|
-
.bp_popover_module_popoverContentContainer--
|
|
5929
|
-
padding-block-end:var(--
|
|
5980
|
+
.bp_popover_module_popoverContentContainer--5e1df .bp_popover_module_popoverCard--5e1df .bp_popover_module_popoverMainContent--5e1df .bp_popover_module_popoverMainContentOuterContainer--5e1df .bp_popover_module_popoverMainContentInnerContainerPadding--5e1df{
|
|
5981
|
+
padding-block-end:var(--popover-main-content-inner-container-padding);
|
|
5930
5982
|
}
|
|
5931
|
-
.bp_popover_module_popoverContentContainer--
|
|
5983
|
+
.bp_popover_module_popoverContentContainer--5e1df.bp_popover_module_accessibilitySmallBreakpoint--5e1df{
|
|
5932
5984
|
max-height:var(--radix-popover-content-available-height);
|
|
5933
5985
|
}
|
|
5934
|
-
.bp_popover_module_popoverContentContainer--
|
|
5935
|
-
max-height:
|
|
5936
|
-
padding-block:var(--
|
|
5986
|
+
.bp_popover_module_popoverContentContainer--5e1df.bp_popover_module_accessibilitySmallBreakpoint--5e1df .bp_popover_module_popoverCard--5e1df .bp_popover_module_popoverScrollContainer--5e1df{
|
|
5987
|
+
max-height:var(--popover-scroll-container-small-breakpoint-max-height);
|
|
5988
|
+
padding-block:var(--popover-scroll-container-small-breakpoint-padding-block);
|
|
5937
5989
|
}
|
|
5938
|
-
.bp_popover_module_popoverContentContainer--
|
|
5990
|
+
.bp_popover_module_popoverContentContainer--5e1df.bp_popover_module_accessibilitySmallBreakpoint--5e1df .bp_popover_module_popoverCard--5e1df .bp_popover_module_popoverScrollContainer--5e1df:hover{
|
|
5939
5991
|
mask-position:left top;
|
|
5940
5992
|
}
|
|
5941
|
-
.bp_popover_module_popoverContentContainer--
|
|
5993
|
+
.bp_popover_module_popoverContentContainer--5e1df.bp_popover_module_accessibilitySmallBreakpoint--5e1df .bp_popover_module_popoverCard--5e1df .bp_popover_module_popoverScrollContainer--5e1df .bp_popover_module_popoverMainContent--5e1df{
|
|
5942
5994
|
max-height:-moz-fit-content;
|
|
5943
5995
|
max-height:fit-content;
|
|
5944
5996
|
}
|
|
5945
|
-
.bp_popover_module_popoverContentContainer--
|
|
5946
|
-
margin-inline:
|
|
5947
|
-
padding-block-start:var(--
|
|
5948
|
-
padding-inline:var(--
|
|
5997
|
+
.bp_popover_module_popoverContentContainer--5e1df .bp_popover_module_popoverFooter--5e1df{
|
|
5998
|
+
margin-inline:var(--popover-footer-margin-inline);
|
|
5999
|
+
padding-block-start:var(--popover-footer-padding-block-start);
|
|
6000
|
+
padding-inline:var(--popover-footer-padding-inline);
|
|
5949
6001
|
}
|
|
5950
|
-
.bp_popover_module_popoverContentContainer--
|
|
5951
|
-
border-top:var(--
|
|
6002
|
+
.bp_popover_module_popoverContentContainer--5e1df .bp_popover_module_popoverFooter--5e1df.bp_popover_module_popoverFooterTopBorder--5e1df{
|
|
6003
|
+
border-top:var(--popover-footer-border-top);
|
|
5952
6004
|
}
|
|
5953
6005
|
.bp_select_menu_grid_module_grid--6e766{
|
|
5954
6006
|
display:flex;
|
|
@@ -3,6 +3,7 @@ import { Space4 } from '@box/blueprint-web-assets/tokens/tokens';
|
|
|
3
3
|
import * as RadixPopover from '@radix-ui/react-popover';
|
|
4
4
|
import clsx from 'clsx';
|
|
5
5
|
import { forwardRef, useContext, useState, useMemo, useCallback } from 'react';
|
|
6
|
+
import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
|
|
6
7
|
import { Card } from '../../card/card.js';
|
|
7
8
|
import { useBreakpoint, Breakpoint } from '../../utils/useBreakpoint.js';
|
|
8
9
|
import { focusRadioGroupFirstIfExists } from './popover-focus-utils.js';
|
|
@@ -29,6 +30,9 @@ const PopoverContentContainer = /*#__PURE__*/forwardRef((props, forwardedRef) =>
|
|
|
29
30
|
const {
|
|
30
31
|
isInteractionDisabled
|
|
31
32
|
} = useContext(PopoverModalityContext);
|
|
33
|
+
const {
|
|
34
|
+
enableModernizedComponents
|
|
35
|
+
} = useBlueprintModernization();
|
|
32
36
|
const accessibilitySmallBreakpoint = smallBreakpoint && isInteractionDisabled;
|
|
33
37
|
const [isContentOverflowing, setIsContentOverflowing] = useState(false);
|
|
34
38
|
const providerValue = useMemo(() => ({
|
|
@@ -56,6 +60,7 @@ const PopoverContentContainer = /*#__PURE__*/forwardRef((props, forwardedRef) =>
|
|
|
56
60
|
[styles.accessibilitySmallBreakpoint]: accessibilitySmallBreakpoint
|
|
57
61
|
}, className),
|
|
58
62
|
collisionPadding: collisionPadding,
|
|
63
|
+
"data-modern": enableModernizedComponents,
|
|
59
64
|
onOpenAutoFocus: handleOpenAutoFocus,
|
|
60
65
|
children: jsx(Card, {
|
|
61
66
|
className: styles.popoverCard,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../../index.css';
|
|
2
|
-
var styles = {"popoverContentContainer":"bp_popover_module_popoverContentContainer--
|
|
2
|
+
var styles = {"popoverContentContainer":"bp_popover_module_popoverContentContainer--5e1df","accessibilitySmallBreakpoint":"bp_popover_module_accessibilitySmallBreakpoint--5e1df","popoverCard":"bp_popover_module_popoverCard--5e1df","popoverScrollContainer":"bp_popover_module_popoverScrollContainer--5e1df","popoverMainContent":"bp_popover_module_popoverMainContent--5e1df","popoverMainContentOuterContainer":"bp_popover_module_popoverMainContentOuterContainer--5e1df","popoverMainContentInnerContainerPadding":"bp_popover_module_popoverMainContentInnerContainerPadding--5e1df","popoverFooter":"bp_popover_module_popoverFooter--5e1df","popoverFooterTopBorder":"bp_popover_module_popoverFooterTopBorder--5e1df"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|