@box/blueprint-web 6.6.2 → 6.7.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.
@@ -19,7 +19,6 @@ const theme = {
19
19
  scrollShadowRgba: 'rgba(0, 0, 0, 0.12)',
20
20
  gridUnitPx: parseInt(bdlGridUnitPx, 10) // grid unit in pixels (as number for computations)
21
21
  },
22
-
23
22
  // Primary or brand color
24
23
  primary: {
25
24
  background: bdlBoxBlue,
@@ -35,7 +35,6 @@ const ContentCardImage = /*#__PURE__*/forwardRef((props, forwardedRef) => {
35
35
  });
36
36
  /* eslint-enable */
37
37
  });
38
-
39
38
  ContentCardImage.displayName = 'ContentCard.Image';
40
39
 
41
40
  export { ContentCardImage };
package/lib-esm/index.css CHANGED
@@ -3525,6 +3525,42 @@ table.inline-table-module_inlineTable__Se38I tr:not(:last-child) td{
3525
3525
  overflow-y:auto;
3526
3526
  }
3527
3527
 
3528
+ .modal-module_headerDividerLine__Lw49q{
3529
+ position:relative;
3530
+ }
3531
+ .modal-module_headerDividerLine__Lw49q::after{
3532
+ border-bottom:var(--border-1) solid var(--border-divider-border);
3533
+ bottom:0;
3534
+ content:"";
3535
+ left:var(--space-4);
3536
+ position:absolute;
3537
+ right:var(--space-4);
3538
+ }
3539
+ @media (min-width: 460px){
3540
+ .modal-module_headerDividerLine__Lw49q::after{
3541
+ left:var(--space-6);
3542
+ right:var(--space-6);
3543
+ }
3544
+ }
3545
+
3546
+ .modal-module_footerDividerLine__HIXCN{
3547
+ position:relative;
3548
+ }
3549
+ .modal-module_footerDividerLine__HIXCN::before{
3550
+ border-bottom:var(--border-1) solid var(--border-divider-border);
3551
+ content:"";
3552
+ left:var(--space-4);
3553
+ position:absolute;
3554
+ right:var(--space-4);
3555
+ top:0;
3556
+ }
3557
+ @media (min-width: 460px){
3558
+ .modal-module_footerDividerLine__HIXCN::before{
3559
+ left:var(--space-6);
3560
+ right:var(--space-6);
3561
+ }
3562
+ }
3563
+
3528
3564
  .modal-module_footer__bCIwP{
3529
3565
  display:flex;
3530
3566
  justify-content:flex-end;
@@ -3912,8 +3948,7 @@ table.inline-table-module_inlineTable__Se38I tr:not(:last-child) td{
3912
3948
  }
3913
3949
 
3914
3950
  .popover-module_popoverMainContent__eyU1C{
3915
- -webkit-mask-image:linear-gradient(to top, #0000, var(--gray-black)), linear-gradient(to left, #0000 var(--space-4), var(--gray-black) var(--space-4));
3916
- mask-image:linear-gradient(to top, #0000, var(--gray-black)), linear-gradient(to left, #0000 var(--space-4), var(--gray-black) var(--space-4));
3951
+ mask-image:linear-gradient(to top, #0000, var(--gray-black)), linear-gradient(to left, #0000 var(--space-4), var(--gray-black) var(--space-4));
3917
3952
  overflow-y:auto;
3918
3953
  }
3919
3954
 
@@ -3927,16 +3962,13 @@ table.inline-table-module_inlineTable__Se38I tr:not(:last-child) td{
3927
3962
  }
3928
3963
  .popover-module_popoverContentContainer__cbRzP .popover-module_popoverCard__CuHZM .popover-module_popoverMainContent__eyU1C{
3929
3964
  margin-inline-end:calc(var(--space-4)*-1);
3930
- -webkit-mask-position:left bottom;
3931
- mask-position:left bottom;
3932
- -webkit-mask-size:100% 20000px;
3933
- mask-size:100% 20000px;
3965
+ mask-position:left bottom;
3966
+ mask-size:100% 20000px;
3934
3967
  padding-right:var(--space-4);
3935
- transition:mask-position var(--animation-duration-3), -webkit-mask-position var(--animation-duration-3);
3968
+ transition:mask-position var(--animation-duration-3);
3936
3969
  }
3937
3970
  .popover-module_popoverContentContainer__cbRzP .popover-module_popoverCard__CuHZM .popover-module_popoverMainContent__eyU1C:hover{
3938
- -webkit-mask-position:left top;
3939
- mask-position:left top;
3971
+ mask-position:left top;
3940
3972
  }
3941
3973
  .popover-module_popoverContentContainer__cbRzP .popover-module_popoverCard__CuHZM .popover-module_popoverMainContent__eyU1C .popover-module_popoverMainContentOuterContainer__tktDv{
3942
3974
  max-height:inherit;
@@ -29,7 +29,7 @@ const InputChip = /*#__PURE__*/forwardRef((props, ref) => {
29
29
  buttonProps.onKeyDown?.(event);
30
30
  };
31
31
  const hasError = variant === 'error';
32
- return (/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */
32
+ return /* eslint-disable-next-line jsx-a11y/role-supports-aria-props */(
33
33
  jsxs("button", {
34
34
  ...buttonProps,
35
35
  ref: ref,
@@ -2,18 +2,27 @@ import { jsx } from 'react/jsx-runtime';
2
2
  import { clsx } from 'clsx';
3
3
  import { forwardRef } from 'react';
4
4
  import { Button } from '../basics/button/button.js';
5
+ import { useScrollContext } from '../utils/scroll-context.js';
5
6
  import styles from './modal.module.js';
6
7
 
7
8
  const ModalFooterComponent = /*#__PURE__*/forwardRef(({
8
9
  children,
9
10
  className,
10
11
  ...rest
11
- }, forwardedRef) => jsx("div", {
12
- ...rest,
13
- ref: forwardedRef,
14
- className: clsx(styles.footer, className),
15
- children: children
16
- }));
12
+ }, forwardedRef) => {
13
+ const {
14
+ isScrolledUnderFooter
15
+ } = useScrollContext();
16
+ const footerClasses = clsx(styles.footer, className, {
17
+ [styles.footerDividerLine]: isScrolledUnderFooter
18
+ });
19
+ return jsx("div", {
20
+ ...rest,
21
+ ref: forwardedRef,
22
+ className: footerClasses,
23
+ children: children
24
+ });
25
+ });
17
26
  const PrimaryButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
18
27
  const {
19
28
  children,
@@ -1,5 +1,7 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
2
  import { forwardRef, cloneElement } from 'react';
3
+ import { clsx } from 'clsx';
4
+ import { useScrollContext } from '../utils/scroll-context.js';
3
5
  import { Text } from '../text/text.js';
4
6
  import { ModalTitle } from './modal-title.js';
5
7
  import styles from './modal.module.js';
@@ -13,30 +15,38 @@ const ModalHeader = /*#__PURE__*/forwardRef(({
13
15
  subtitle,
14
16
  backButton,
15
17
  ...rest
16
- }, forwardedRef) => jsxs("div", {
17
- className: styles.modalHeader,
18
- children: [backButton ? /*#__PURE__*/cloneElement(backButton, {
19
- className: styles.backButton
20
- }) : null, jsx(ModalTitle, {
21
- ...rest,
22
- ref: forwardedRef,
23
- asChild: true,
24
- children: jsxs("div", {
25
- className: styles.modalTitle,
26
- children: [jsx(Text, {
27
- as: "h2",
28
- className: className,
29
- color: "textOnLightDefault",
30
- variant: "titleLarge",
31
- children: children
32
- }), subtitle && jsx(Text, {
33
- as: "h3",
34
- color: "textOnLightSecondary",
35
- variant: "subtitle",
36
- children: subtitle
37
- })]
38
- })
39
- })]
40
- }));
18
+ }, forwardedRef) => {
19
+ const {
20
+ isScrolledUnderHeader
21
+ } = useScrollContext();
22
+ const headerClasses = clsx({
23
+ [styles.headerDividerLine]: isScrolledUnderHeader
24
+ }, styles.modalHeader);
25
+ return jsxs("div", {
26
+ className: headerClasses,
27
+ children: [backButton ? /*#__PURE__*/cloneElement(backButton, {
28
+ className: styles.backButton
29
+ }) : null, jsx(ModalTitle, {
30
+ ...rest,
31
+ ref: forwardedRef,
32
+ asChild: true,
33
+ children: jsxs("div", {
34
+ className: styles.modalTitle,
35
+ children: [jsx(Text, {
36
+ as: "h2",
37
+ className: className,
38
+ color: "textOnLightDefault",
39
+ variant: "titleLarge",
40
+ children: children
41
+ }), subtitle && jsx(Text, {
42
+ as: "h3",
43
+ color: "textOnLightSecondary",
44
+ variant: "subtitle",
45
+ children: subtitle
46
+ })]
47
+ })
48
+ })]
49
+ });
50
+ });
41
51
 
42
52
  export { ModalHeader };
@@ -4,4 +4,6 @@ import { type ModalScrollableContainerProps } from './types';
4
4
  * Wrapper for the contents of the modal.
5
5
  * This element is scrollable when the size of the content would make the modal not fit on the screen.
6
6
  */
7
- export declare const ModalScrollableContainer: import("react").ForwardRefExoticComponent<ModalScrollableContainerProps & import("react").RefAttributes<HTMLDivElement>>;
7
+ export declare const ModalScrollableContainer: import("react").ForwardRefExoticComponent<ModalScrollableContainerProps & {
8
+ 'data-testid'?: string | undefined;
9
+ } & import("react").RefAttributes<HTMLDivElement>>;
@@ -1,6 +1,8 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { clsx } from 'clsx';
3
- import { forwardRef } from 'react';
3
+ import { forwardRef, useRef } from 'react';
4
+ import { useScrollContext } from '../utils/scroll-context.js';
5
+ import { useForkRef } from '../utils/useForkRef.js';
4
6
  import styles from './modal.module.js';
5
7
 
6
8
  /**
@@ -10,12 +12,24 @@ import styles from './modal.module.js';
10
12
  const ModalScrollableContainer = /*#__PURE__*/forwardRef(({
11
13
  children,
12
14
  className,
15
+ 'data-testid': dataTestId = 'modal-container',
13
16
  ...rest
14
- }, forwardedRef) => jsx("div", {
15
- ...rest,
16
- ref: forwardedRef,
17
- className: clsx(styles.scrollableContainer, className),
18
- children: children
19
- }));
17
+ }, forwardedRef) => {
18
+ const {
19
+ onScroll
20
+ } = useScrollContext();
21
+ const scrollableContainerRef = useRef(null);
22
+ return jsx("div", {
23
+ ...rest,
24
+ ref: useForkRef(scrollableContainerRef, forwardedRef),
25
+ className: clsx(styles.scrollableContainer, className),
26
+ "data-testid": dataTestId,
27
+ onScroll: event => {
28
+ onScroll?.(event);
29
+ rest.onScroll?.(event);
30
+ },
31
+ children: children
32
+ });
33
+ });
20
34
 
21
35
  export { ModalScrollableContainer };
@@ -86,7 +86,9 @@ export declare const Modal: (({ children, modal, ...props }: ModalProps) => JSX.
86
86
  }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
87
87
  };
88
88
  Header: import("react").ForwardRefExoticComponent<import("./types").ModalHeaderProps & import("react").RefAttributes<HTMLHeadingElement>>;
89
- ScrollableContainer: import("react").ForwardRefExoticComponent<import("./types").ModalScrollableContainerProps & import("react").RefAttributes<HTMLDivElement>>;
89
+ ScrollableContainer: import("react").ForwardRefExoticComponent<import("./types").ModalScrollableContainerProps & {
90
+ 'data-testid'?: string | undefined;
91
+ } & import("react").RefAttributes<HTMLDivElement>>;
90
92
  Trigger: import("react").ForwardRefExoticComponent<import("./types").ModalTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
91
93
  Title: import("react").ForwardRefExoticComponent<import("./types").ModalTitleProps & import("react").RefAttributes<HTMLHeadingElement>>;
92
94
  };
@@ -1,5 +1,6 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { Root as Root$1 } from '@radix-ui/react-dialog';
3
+ import { ScrollProvider } from '../utils/scroll-context.js';
3
4
  import { ModalBody } from './modal-body.js';
4
5
  import { ModalClose } from './modal-close.js';
5
6
  import { ModalContent } from './modal-content.js';
@@ -16,7 +17,9 @@ const Root = ({
16
17
  }) => jsx(Root$1, {
17
18
  ...props,
18
19
  modal: modal,
19
- children: children
20
+ children: jsx(ScrollProvider, {
21
+ children: children
22
+ })
20
23
  });
21
24
  /**
22
25
  * Modal can be used for a number of ways to support focused experiences
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"overlay":"modal-module_overlay__OIKwn","content":"modal-module_content__Z8W3U","popup_bounce_in":"modal-module_popup_bounce_in__Q7Slx","close":"modal-module_close__4qYVH","onColor":"modal-module_onColor__qNumt","backButton":"modal-module_backButton__ImG1B","modalHeader":"modal-module_modalHeader__bGhDg","modalTitle":"modal-module_modalTitle__Q-aFr","body":"modal-module_body__HKxP9","scrollableContainer":"modal-module_scrollableContainer__N3upQ","footer":"modal-module_footer__bCIwP","footerButton":"modal-module_footerButton__QlYl3"};
2
+ var styles = {"overlay":"modal-module_overlay__OIKwn","content":"modal-module_content__Z8W3U","popup_bounce_in":"modal-module_popup_bounce_in__Q7Slx","close":"modal-module_close__4qYVH","onColor":"modal-module_onColor__qNumt","backButton":"modal-module_backButton__ImG1B","modalHeader":"modal-module_modalHeader__bGhDg","modalTitle":"modal-module_modalTitle__Q-aFr","body":"modal-module_body__HKxP9","scrollableContainer":"modal-module_scrollableContainer__N3upQ","headerDividerLine":"modal-module_headerDividerLine__Lw49q","footerDividerLine":"modal-module_footerDividerLine__HIXCN","footer":"modal-module_footer__bCIwP","footerButton":"modal-module_footerButton__QlYl3"};
3
3
 
4
4
  export { styles as default };
@@ -6,13 +6,13 @@ export type FilterChipProps = ChipProps;
6
6
  * Based on [Radix ToggleGroup.Item](https://www.radix-ui.com/docs/primitives/components/toggle-group#item)
7
7
  */
8
8
  export declare const FilterChipChip: import("react").ForwardRefExoticComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
9
- export type FilterChipGroupProps = Omit<ChipsGroupProps, 'type'> & {
10
- type: 'single' | 'multiple';
11
- };
9
+ export type FilterChipGroupProps = ChipsGroupProps;
12
10
  /**
13
11
  * Container for FilterChips, this component handles keyboard navigation and chips selection state.
14
12
  * Based on [Radix ToggleGroup](https://www.radix-ui.com/docs/primitives/components/toggle-group)
15
13
  */
16
- export declare const FilterChipGroup: import("react").ForwardRefExoticComponent<Omit<Omit<ChipsGroupProps, "type"> & {
17
- type: 'single' | 'multiple';
18
- }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
14
+ export declare const FilterChipGroup: import("react").ForwardRefExoticComponent<(Omit<import("../types").ChipsGroupSingleProps & import("react").RefAttributes<HTMLDivElement> & {
15
+ name: string;
16
+ }, "ref"> | Omit<import("../types").ChipsGroupMultipleProps & import("react").RefAttributes<HTMLDivElement> & {
17
+ name: string;
18
+ }, "ref">) & import("react").RefAttributes<HTMLDivElement>>;
@@ -36,12 +36,10 @@ const FilterChipGroup = /*#__PURE__*/forwardRef((props, forwardedRef) => {
36
36
  name,
37
37
  children,
38
38
  className,
39
+ onValueChange,
40
+ type,
39
41
  ...rest
40
42
  } = props;
41
- const groupPropsRest = props.type === 'single' ? rest : rest;
42
- const {
43
- onValueChange
44
- } = groupPropsRest;
45
43
  const [chipGroupValue, setChipGroupValue] = useState([]);
46
44
  const comboChipsValueReducer = useCallback((groupValueState, groupChangeAction) => {
47
45
  const newGroupValue = new Set(groupValueState);
@@ -49,33 +47,38 @@ const FilterChipGroup = /*#__PURE__*/forwardRef((props, forwardedRef) => {
49
47
  add: () => newGroupValue.add(groupChangeAction.value),
50
48
  delete: () => newGroupValue.delete(groupChangeAction.value)
51
49
  })(groupChangeAction.action)?.();
52
- onValueChange?.([...chipGroupValue, ...Array.from(newGroupValue)]);
50
+ if (type === 'multiple') {
51
+ onValueChange?.([...chipGroupValue, ...Array.from(newGroupValue)]);
52
+ }
53
53
  return newGroupValue;
54
- }, [chipGroupValue, onValueChange]);
54
+ }, [chipGroupValue, type, onValueChange]);
55
55
  const [comboChipsValue, dispatchComboChipsValueChange] = useReducer(comboChipsValueReducer, new Set());
56
56
  const handleGroupValueChange = useCallback(newValue => {
57
- if (props.type === 'single') {
57
+ if (type === 'single' && typeof newValue === 'string') {
58
58
  setChipGroupValue(newValue);
59
59
  onValueChange?.(newValue);
60
- } else {
60
+ } else if (type === 'multiple' && typeof newValue !== 'string') {
61
61
  const groupValueWithoutOptionValues = newValue.filter(value => !comboChipsValue.has(value));
62
62
  setChipGroupValue(groupValueWithoutOptionValues);
63
63
  onValueChange?.([...groupValueWithoutOptionValues, ...comboChipsValue]);
64
64
  }
65
- }, [comboChipsValue, onValueChange, props.type]);
65
+ }, [comboChipsValue, type, onValueChange]);
66
66
  const providerValue = useMemo(() => ({
67
67
  comboChipsValue,
68
68
  dispatchComboChipsValueChange,
69
- type: props.type
70
- }), [comboChipsValue, dispatchComboChipsValueChange, props.type]);
69
+ type
70
+ }), [comboChipsValue, dispatchComboChipsValueChange, type]);
71
71
  return jsx(FilterChipGroupContext.Provider, {
72
72
  value: providerValue,
73
73
  children: jsx(ChipsGroup, {
74
- ...groupPropsRest,
74
+ ...rest,
75
75
  ref: forwardedRef,
76
76
  className: className,
77
77
  name: name,
78
78
  onValueChange: handleGroupValueChange,
79
+ // FIXME: Get rid of `any` type. It is correctly inferred as 'single' | 'multiple', and should work, but does not.
80
+ // eslint-disable-next-line
81
+ type: type,
79
82
  children: children
80
83
  })
81
84
  });
@@ -2,9 +2,11 @@
2
2
  export declare const FilterChip: {
3
3
  Chip: import("react").ForwardRefExoticComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
4
4
  ChipButton: import("react").ForwardRefExoticComponent<import("@radix-ui/react-toggle-group").ToggleGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>;
5
- Group: import("react").ForwardRefExoticComponent<Omit<Omit<import("../types").ChipsGroupProps, "type"> & {
6
- type: "single" | "multiple";
7
- }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
5
+ Group: import("react").ForwardRefExoticComponent<(Omit<import("../types").ChipsGroupSingleProps & import("react").RefAttributes<HTMLDivElement> & {
6
+ name: string;
7
+ }, "ref"> | Omit<import("../types").ChipsGroupMultipleProps & import("react").RefAttributes<HTMLDivElement> & {
8
+ name: string;
9
+ }, "ref">) & import("react").RefAttributes<HTMLDivElement>>;
8
10
  Label: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "children"> & {
9
11
  children: string;
10
12
  }, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
@@ -6,10 +6,11 @@ export interface ChipsGroupSingleProps extends ToggleGroup.ToggleGroupImplSingle
6
6
  export interface ChipsGroupMultipleProps extends ToggleGroup.ToggleGroupImplMultipleProps {
7
7
  type: 'multiple';
8
8
  }
9
- export type ChipsGroupProps = (ChipsGroupSingleProps | ChipsGroupMultipleProps) & (React.RefAttributes<HTMLDivElement> & {
9
+ type SharedChipsGroupProps = React.RefAttributes<HTMLDivElement> & {
10
10
  /** The name of the group. Submitted with its owning form as part of a name/value pair. */
11
11
  name: string;
12
- });
12
+ };
13
+ export type ChipsGroupProps = (ChipsGroupSingleProps & SharedChipsGroupProps) | (ChipsGroupMultipleProps & SharedChipsGroupProps);
13
14
  export type ChipProps = ToggleGroup.ToggleGroupItemProps;
14
15
  export interface ChipIconProps {
15
16
  className?: string;
@@ -21,3 +22,4 @@ export type ChipStatusProps = Omit<React.ComponentProps<'div'>, 'children'> & {
21
22
  export type ChipLabelProps = Omit<React.ComponentProps<'span'>, 'children'> & {
22
23
  children: string;
23
24
  };
25
+ export {};
@@ -5,6 +5,7 @@ export declare const Popover: {
5
5
  displayName: string;
6
6
  };
7
7
  Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
8
+ Anchor: import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
8
9
  ContentContainer: import("react").ForwardRefExoticComponent<import("./popover-content-container").PopoverContentContainerProps & import("react").RefAttributes<HTMLDivElement>>;
9
10
  MainContent: import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;
10
11
  Footer: import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -16,3 +17,4 @@ export { type PopoverFooterProps } from './popover-footer';
16
17
  export { type PopoverMainContentProps } from './popover-main-content';
17
18
  export { type PopoverRootProps } from './popover-root';
18
19
  export { type PopoverTriggerProps } from './popover-trigger';
20
+ export { type PopoverAnchorProps } from './popover-anchor';
@@ -4,10 +4,12 @@ import { PopoverFooter } from './popover-footer.js';
4
4
  import { PopoverMainContent } from './popover-main-content.js';
5
5
  import { PopoverRoot } from './popover-root.js';
6
6
  import { PopoverTrigger } from './popover-trigger.js';
7
+ import { PopoverAnchor } from './popover-anchor.js';
7
8
 
8
9
  const Popover = {
9
10
  Root: PopoverRoot,
10
11
  Trigger: PopoverTrigger,
12
+ Anchor: PopoverAnchor,
11
13
  ContentContainer: PopoverContentContainer,
12
14
  MainContent: PopoverMainContent,
13
15
  Footer: PopoverFooter,
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ import * as PopoverPrimitive from '@radix-ui/react-popover';
3
+ export type PopoverAnchorProps = PopoverPrimitive.PopoverAnchorProps;
4
+ /**
5
+ * An optional element to position the `Popover.Content` against.
6
+ * @see https://www.radix-ui.com/docs/primitives/components/popover#anchor
7
+ */
8
+ export declare const PopoverAnchor: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & import("react").RefAttributes<HTMLDivElement>>;
@@ -0,0 +1,23 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import * as RadixPopover from '@radix-ui/react-popover';
3
+ import { forwardRef } from 'react';
4
+
5
+ /**
6
+ * An optional element to position the `Popover.Content` against.
7
+ * @see https://www.radix-ui.com/docs/primitives/components/popover#anchor
8
+ */
9
+ const PopoverAnchor = /*#__PURE__*/forwardRef((props, forwardedRef) => {
10
+ const {
11
+ children,
12
+ ...rest
13
+ } = props;
14
+ return jsx(RadixPopover.Anchor, {
15
+ ...rest,
16
+ ref: forwardedRef,
17
+ asChild: true,
18
+ children: children
19
+ });
20
+ });
21
+ PopoverAnchor.displayName = 'PopoverAnchor';
22
+
23
+ export { PopoverAnchor };
@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
2
2
  import { clsx } from 'clsx';
3
3
  import { forwardRef } from 'react';
4
4
  import { Button } from '../basics/button/button.js';
5
- import { useScrollContext } from './scroll-context.js';
5
+ import { useScrollContext } from '../utils/scroll-context.js';
6
6
  import styles from './side-panel.module.js';
7
7
 
8
8
  const SidePanelFooterComponent = /*#__PURE__*/forwardRef(({
@@ -3,8 +3,8 @@ import * as RadixDialog from '@radix-ui/react-dialog';
3
3
  import { clsx } from 'clsx';
4
4
  import { forwardRef } from 'react';
5
5
  import { Text } from '../text/text.js';
6
+ import { useScrollContext } from '../utils/scroll-context.js';
6
7
  import { useMobile } from '../utils/useMobile.js';
7
- import { useScrollContext } from './scroll-context.js';
8
8
  import styles from './side-panel.module.js';
9
9
  import { useVariant } from './variant-context.js';
10
10
 
@@ -1,7 +1,7 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { clsx } from 'clsx';
3
3
  import { forwardRef, useRef, useImperativeHandle, useEffect } from 'react';
4
- import { useScrollContext } from './scroll-context.js';
4
+ import { useScrollContext } from '../utils/scroll-context.js';
5
5
  import styles from './side-panel.module.js';
6
6
 
7
7
  /**
@@ -1,6 +1,6 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { Root as Root$1 } from '@radix-ui/react-dialog';
3
- import { ScrollProvider } from './scroll-context.js';
3
+ import { ScrollProvider } from '../utils/scroll-context.js';
4
4
  import { SidePanelClose } from './side-panel-close.js';
5
5
  import { SidePanelContent, SidePanelPersistentContent } from './side-panel-content.js';
6
6
  import { SidePanelFooter } from './side-panel-footer.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "6.6.2",
3
+ "version": "6.7.0",
4
4
  "license": "SEE LICENSE IN LICENSE",
5
5
  "publishConfig": {
6
6
  "access": "public",
@@ -56,7 +56,7 @@
56
56
  "devDependencies": {
57
57
  "@box/storybook-utils": "^0.0.3"
58
58
  },
59
- "gitHead": "84282ef2f15f752f4e3eaa43e4d3dc66eb36a6f5",
59
+ "gitHead": "0ea8e47adeb6bd6eac16828ed06540ffda462f80",
60
60
  "module": "lib-esm/index.js",
61
61
  "main": "lib-esm/index.js",
62
62
  "exports": {
File without changes