@box/blueprint-web 5.31.3

package/lib-esm/primitives/page-header/page-header.js

@@ -0,0 +1,73 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import styles from './page-header.module.js';
+
+const PageHeaderRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    children,
+    variant,
+    sticky = true,
+    ...rest
+  } = props;
+  return jsx("header", {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.pageHeader, className, {
+      [styles.default]: variant === 'default'
+    }, {
+      [styles.inline]: variant === 'inline'
+    }, {
+      [styles.sticky]: sticky
+    }),
+    children: children
+  });
+});
+const PageHeaderCorner = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    children,
+    ...rest
+  } = props;
+  return jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.corner, className),
+    children: children
+  });
+});
+const PageHeadeStartElements = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    children,
+    ...rest
+  } = props;
+  return jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.startElements, className),
+    children: children
+  });
+});
+const PageHeaderEndElements = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    children,
+    ...rest
+  } = props;
+  return jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.endElements, className),
+    children: children
+  });
+});
+const PageHeader = {
+  Root: PageHeaderRoot,
+  StartElements: PageHeadeStartElements,
+  EndElements: PageHeaderEndElements,
+  Corner: PageHeaderCorner
+};
+
+export { PageHeadeStartElements, PageHeader, PageHeaderCorner, PageHeaderEndElements, PageHeaderRoot };

package/lib-esm/primitives/page-header/page-header.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"pageHeader":"page-header-module_pageHeader__XiNrN","sticky":"page-header-module_sticky__1dvQK","default":"page-header-module_default__qtKvh","inline":"page-header-module_inline__wziHD","corner":"page-header-module_corner__JOXq1","startElements":"page-header-module_startElements__J18yP","endElements":"page-header-module_endElements__Y30EP"};
+
+export { styles as default };

package/lib-esm/primitives/page-header/types.d.ts

@@ -0,0 +1,8 @@
+import type React from 'react';
+export interface PageHeaderProps extends React.ComponentPropsWithRef<'header'> {
+    variant: 'default' | 'inline';
+    /** When true the header will have `position: sticky`
+     * @default true
+     */
+    sticky?: boolean;
+}

package/lib-esm/primitives/popover/index.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export declare const Popover: {
+    Root: {
+        (props: import("@radix-ui/react-popover").PopoverProps): JSX.Element;
+        displayName: string;
+    };
+    Trigger: import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
+    ContentContainer: import("react").ForwardRefExoticComponent<import("./popover-content-container").PopoverContentContainerProps & import("react").RefAttributes<HTMLDivElement>>;
+    MainContent: import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Footer: import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Close: import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export { type PopoverCloseProps } from './popover-close';
+export { type PopoverContentContainerProps } from './popover-content-container';
+export { type PopoverFooterProps } from './popover-footer';
+export { type PopoverMainContentProps } from './popover-main-content';
+export { type PopoverRootProps } from './popover-root';
+export { type PopoverTriggerProps } from './popover-trigger';

package/lib-esm/primitives/popover/index.js

@@ -0,0 +1,17 @@
+import { PopoverClose } from './popover-close.js';
+import { PopoverContentContainer } from './popover-content-container.js';
+import { PopoverFooter } from './popover-footer.js';
+import { PopoverMainContent } from './popover-main-content.js';
+import { PopoverRoot } from './popover-root.js';
+import { PopoverTrigger } from './popover-trigger.js';
+
+const Popover = {
+  Root: PopoverRoot,
+  Trigger: PopoverTrigger,
+  ContentContainer: PopoverContentContainer,
+  MainContent: PopoverMainContent,
+  Footer: PopoverFooter,
+  Close: PopoverClose
+};
+
+export { Popover };

package/lib-esm/primitives/popover/popover-close.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+export type PopoverCloseProps = PopoverPrimitive.PopoverCloseProps;
+/**
+ * Wrapper for buttons that should close the popover on click
+ * @see https://www.radix-ui.com/docs/primitives/components/popover#close
+ */
+export declare const PopoverClose: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib-esm/primitives/popover/popover-close.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixPopover from '@radix-ui/react-popover';
+import { forwardRef } from 'react';
+
+/**
+ * Wrapper for buttons that should close the popover on click
+ * @see https://www.radix-ui.com/docs/primitives/components/popover#close
+ */
+const PopoverClose = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    ...rest
+  } = props;
+  return jsx(RadixPopover.Close, {
+    ...rest,
+    ref: forwardedRef,
+    asChild: true,
+    children: children
+  });
+});
+PopoverClose.displayName = 'PopoverClose';
+
+export { PopoverClose };

package/lib-esm/primitives/popover/popover-content-container.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+export interface PopoverContentContainerProps extends PopoverPrimitive.PopoverContentProps {
+    /** Specify a container element to portal the content into. */
+    /** @default document.body */
+    container?: PopoverPrimitive.PopoverPortalProps['container'];
+}
+/**
+ * Based on Radix-UI Popover Content
+ * @see https://www.radix-ui.com/primitives/docs/components/popover#content
+ */
+export declare const PopoverContentContainer: import("react").ForwardRefExoticComponent<PopoverContentContainerProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/primitives/popover/popover-content-container.js

@@ -0,0 +1,46 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixPopover from '@radix-ui/react-popover';
+import clsx from 'clsx';
+import { forwardRef, useState, useMemo } from 'react';
+import { Card } from '../../card/card.js';
+import { PopoverOverflowContext } from './popover-overflow-context.js';
+import styles from './popover.module.js';
+
+/**
+ * Based on Radix-UI Popover Content
+ * @see https://www.radix-ui.com/primitives/docs/components/popover#content
+ */
+const PopoverContentContainer = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    container,
+    className,
+    ...rest
+  } = props;
+  const [isContentOverflowing, setIsContentOverflowing] = useState(false);
+  const providerValue = useMemo(() => ({
+    isContentOverflowing,
+    setIsContentOverflowing
+  }), [isContentOverflowing, setIsContentOverflowing]);
+  return (
+    // TODO: Unify all Portals (Tooltip, Select, Popover, etc...), Expose a Provider which would tell where to mount (body? other elem?)
+    jsx(RadixPopover.Portal, {
+      container: container,
+      children: jsx(PopoverOverflowContext.Provider, {
+        value: providerValue,
+        children: jsx(RadixPopover.Content, {
+          ...rest,
+          ref: forwardedRef,
+          className: clsx(styles.popoverContentContainer, className),
+          children: jsx(Card, {
+            className: styles.popoverCard,
+            children: children
+          })
+        })
+      })
+    })
+  );
+});
+PopoverContentContainer.displayName = 'PopoverContentContainer';
+
+export { PopoverContentContainer };

package/lib-esm/primitives/popover/popover-footer.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type * as PopoverPrimitive from '@radix-ui/react-popover';
+export type PopoverFooterProps = PopoverPrimitive.PopoverContentProps;
+/**
+ * Container to hold the footer content for the popover
+ */
+export declare const PopoverFooter: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/primitives/popover/popover-footer.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef, useContext } from 'react';
+import { PopoverOverflowContext } from './popover-overflow-context.js';
+import styles from './popover.module.js';
+
+/**
+ * Container to hold the footer content for the popover
+ */
+const PopoverFooter = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  const {
+    isContentOverflowing
+  } = useContext(PopoverOverflowContext);
+  return jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.popoverFooter, className,
+    // apply top border when main content is overflowing
+    isContentOverflowing ? styles.popoverFooterTopBorder : ''),
+    children: children
+  });
+});
+PopoverFooter.displayName = 'PopoverFooter';
+
+export { PopoverFooter };

package/lib-esm/primitives/popover/popover-main-content.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type * as PopoverPrimitive from '@radix-ui/react-popover';
+export type PopoverMainContentProps = PopoverPrimitive.PopoverContentProps;
+/**
+ * Container to hold the main content for the popover
+ */
+export declare const PopoverMainContent: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/primitives/popover/popover-main-content.js

@@ -0,0 +1,45 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef, useContext, useRef, useEffect } from 'react';
+import { PopoverOverflowContext } from './popover-overflow-context.js';
+import styles from './popover.module.js';
+
+/**
+ * Container to hold the main content for the popover
+ */
+const PopoverMainContent = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  const {
+    isContentOverflowing,
+    setIsContentOverflowing
+  } = useContext(PopoverOverflowContext);
+  const outerContainerRef = useRef(null);
+  const innerContainerRef = useRef(null);
+  // checks if content is overflowing whenever the content (children) changes, e.g. if new fields are added based on selection
+  useEffect(() => {
+    const outerContainerHeight = outerContainerRef.current?.clientHeight || 0;
+    const innerContainerHeight = innerContainerRef.current?.scrollHeight || 0;
+    setIsContentOverflowing && setIsContentOverflowing(innerContainerHeight > outerContainerHeight);
+  }, [children, setIsContentOverflowing]);
+  return jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.popoverMainContent, className, isContentOverflowing ? styles.popoverMainContentBottomMargin : ''),
+    children: jsx("div", {
+      ref: outerContainerRef,
+      className: styles.popoverMainContentOuterContainer,
+      children: jsx("div", {
+        ref: innerContainerRef,
+        className: isContentOverflowing ? styles.popoverMainContentInnerContainerPadding : '',
+        children: children
+      })
+    })
+  });
+});
+PopoverMainContent.displayName = 'PopoverMainContent';
+
+export { PopoverMainContent };

package/lib-esm/primitives/popover/popover-overflow-context.d.ts

@@ -0,0 +1,6 @@
+import { type Dispatch, type SetStateAction } from 'react';
+export interface PopoverOverflowContextValue {
+    isContentOverflowing: boolean | null;
+    setIsContentOverflowing: Dispatch<SetStateAction<boolean>> | null;
+}
+export declare const PopoverOverflowContext: import("react").Context<PopoverOverflowContextValue>;

package/lib-esm/primitives/popover/popover-overflow-context.js

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+const PopoverOverflowContext = /*#__PURE__*/createContext({
+  isContentOverflowing: null,
+  setIsContentOverflowing: null
+});
+
+export { PopoverOverflowContext };

package/lib-esm/primitives/popover/popover-root.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+export type PopoverRootProps = PopoverPrimitive.PopoverProps;
+/**
+ * The Popover component has a trigger which displays a Card to the user with customizable content.
+ */
+export declare const PopoverRoot: {
+    (props: PopoverRootProps): JSX.Element;
+    displayName: string;
+};

package/lib-esm/primitives/popover/popover-root.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixPopover from '@radix-ui/react-popover';
+
+/**
+ * The Popover component has a trigger which displays a Card to the user with customizable content.
+ */
+const PopoverRoot = props => {
+  const {
+    children,
+    ...rest
+  } = props;
+  return jsx(RadixPopover.Root, {
+    ...rest,
+    modal: true,
+    children: children
+  });
+};
+PopoverRoot.displayName = 'PopoverRoot';
+
+export { PopoverRoot };

package/lib-esm/primitives/popover/popover-trigger.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+export type PopoverTriggerProps = PopoverPrimitive.PopoverTriggerProps;
+/**
+ * PopoverTrigger connects your button or chip to open a popover.
+ * The button or chip should have a label that clearly describes the popover's content/purpose.
+ * @see https://www.radix-ui.com/docs/primitives/components/popover#trigger
+ */
+export declare const PopoverTrigger: import("react").ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib-esm/primitives/popover/popover-trigger.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixPopover from '@radix-ui/react-popover';
+import { forwardRef } from 'react';
+
+/**
+ * PopoverTrigger connects your button or chip to open a popover.
+ * The button or chip should have a label that clearly describes the popover's content/purpose.
+ * @see https://www.radix-ui.com/docs/primitives/components/popover#trigger
+ */
+const PopoverTrigger = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    ...rest
+  } = props;
+  return jsx(RadixPopover.Trigger, {
+    ...rest,
+    ref: forwardedRef,
+    asChild: true,
+    children: children
+  });
+});
+PopoverTrigger.displayName = 'PopoverTrigger';
+
+export { PopoverTrigger };

package/lib-esm/primitives/popover/popover.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"popoverMainContent":"popover-module_popoverMainContent__eyU1C","popoverContentContainer":"popover-module_popoverContentContainer__cbRzP","popoverCard":"popover-module_popoverCard__CuHZM","popoverMainContentOuterContainer":"popover-module_popoverMainContentOuterContainer__tktDv","popoverMainContentInnerContainerPadding":"popover-module_popoverMainContentInnerContainerPadding__sa9jC","popoverFooter":"popover-module_popoverFooter__BK9Nz","popoverFooterTopBorder":"popover-module_popoverFooterTopBorder__jjLVU"};
+
+export { styles as default };

package/lib-esm/primitives/select-menu-grid/index.d.ts

@@ -0,0 +1,12 @@
+import { SelectMenuGrid } from './select-menu-grid';
+import { SelectMenuGridColorCircle, SelectMenuGridOption, SelectMenuGridSquare } from './select-menu-grid-option';
+type SelectMenuOption = typeof SelectMenuGridOption & {
+    Square: typeof SelectMenuGridSquare;
+    ColorCircle: typeof SelectMenuGridColorCircle;
+};
+type SelectMenuType = {
+    Option: SelectMenuOption;
+    Grid: typeof SelectMenuGrid;
+};
+export declare const SelectMenu: SelectMenuType;
+export {};

package/lib-esm/primitives/select-menu-grid/index.js

@@ -0,0 +1,11 @@
+import { SelectMenuGrid } from './select-menu-grid.js';
+import { SelectMenuGridSquare, SelectMenuGridColorCircle, SelectMenuGridOption } from './select-menu-grid-option.js';
+
+const SelectMenu = {
+  Option: SelectMenuGridOption,
+  Grid: SelectMenuGrid
+};
+SelectMenu.Option.Square = SelectMenuGridSquare;
+SelectMenu.Option.ColorCircle = SelectMenuGridColorCircle;
+
+export { SelectMenu };