@protonradio/proton-ui 0.1.39 → 0.1.41

package/README.md

@@ -44,5 +44,21 @@ Theme specific css should be placed in the `src/themes` directory in a unqiue fi
 }
 ```
 
+#### Overriding CSS Variables
+Components reuse common colors across components and, in an attempt to unify these colors under common variables, common component attributes have been defined in globals.css and can be overridden at the theme level (ex: src/themes/release-links/index.css`.
+
+These should be used where possible so that if we decide to change styling accross the component library we can do so in just a few places.
+
+This also makes it easier for overriding some component styles from within a project to something more dynamic. In the case of the `ReleaseLinks` app, we calculate some background colors from the album artwork. Because of this we want to override the background color of certain elements in the `ReleaseLinks` theme with a css variable.
+
+An example of this might look like:
+
+```js
+document.documentElement.style.setProperty(
+  "--proton-control-background",
+  buttonBackgroundColor
+);
+```
+
 ### Recommended Reading
 - https://www.gabe.pizza/notes-on-component-libraries/

package/dist/proton-ui.es.d.ts

@@ -1,8 +1,10 @@
+import type { AriaDialogProps } from 'react-aria';
 import type { AriaPopoverProps } from 'react-aria';
-import { AriaSelectOptions } from 'react-aria';
+import { AriaSelectProps } from 'react-aria';
 import { ColumnProps } from '@react-stately/table';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
-import type { OverlayTriggerState } from 'react-stately';
+import { OverlayTriggerProps } from 'react-stately';
+import { OverlayTriggerState } from 'react-stately';
 import { PressEvent } from 'react-aria';
 import { default as React_2 } from 'react';
 import { Row } from '@react-stately/table';
@@ -87,6 +89,16 @@ export declare const Cell: <T>(props: ProtonColumnProps<T>) => JSX_2.Element;
 
 export declare const Column: <T>(props: ProtonColumnProps<T>) => JSX_2.Element;
 
+/**
+ * Intended use in overlay containers such as modals or popovers.
+ */
+export declare function Dialog({ title, children, ...props }: DialogProps): JSX_2.Element;
+
+declare interface DialogProps extends AriaDialogProps {
+    title?: React.ReactNode;
+    children: React.ReactNode;
+}
+
 export declare function Icon(props: IconProps): JSX_2.Element;
 
 declare type IconID = "external-link" | "caret-down" | "chevron-down";
@@ -106,13 +118,29 @@ declare interface IconProps {
     color?: string;
 }
 
-export declare function Popover({ children, state, ...props }: PopoverProps): JSX_2.Element;
+export declare function Popover({ children, state, arrow, offset, ...props }: PopoverProps): JSX_2.Element;
 
+/**
+ * Popover is an unstyled popover component that handles positioning. It should be used
+ * with the Dialog component to provide a styled popover.
+ */
 declare interface PopoverProps extends Omit<AriaPopoverProps, "popoverRef"> {
+    /**
+     * Content to display within the popover.
+     */
     children: React_2.ReactNode;
-    __INTERNAL_ONLY_className?: string;
+    /**
+     * The `isOpen` state of the popover and the methods to toggle it.
+     */
     state: OverlayTriggerState;
+    /**
+     * Can optionally forward the ref to the popover.
+     */
     popoverRef?: React_2.RefObject<HTMLDivElement>;
+    /**
+     * Whether to show an arrow on the popover.
+     */
+    arrow?: boolean;
 }
 
 export declare interface ProtonColumnProps<T> extends ColumnProps<T> {
@@ -130,10 +158,9 @@ export declare const Select: {
 
 declare function SelectMenu<T extends object>(props: SelectProps<T>): JSX_2.Element;
 
-declare interface SelectProps<T> extends Omit<AriaSelectOptions<T>, "children"> {
+declare interface SelectProps<T> extends AriaSelectProps<T> {
     label?: string;
     name: string;
-    children: React_2.ReactNode | ((item: T) => React_2.ReactNode);
 }
 
 export declare function Switch(props: SwitchProps): JSX_2.Element;
@@ -184,4 +211,15 @@ export declare const THEME_CONFIG: {
     readonly ProtonRadio: "client-theme";
 };
 
+/**
+ * Hook for creating a popover trigger. This hook manages the state and events for the popover
+ * and popover trigger. For examples see Popover.stories.tsx.
+ */
+export declare function usePopoverTrigger(props?: OverlayTriggerProps): {
+    buttonProps: any;
+    overlayProps: any;
+    buttonRef: React_2.MutableRefObject<HTMLButtonElement>;
+    state: any;
+};
+
 export { }