@aragon/gov-ui-kit 1.0.64 → 1.0.65

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.
Files changed (23) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/build.css +1 -1
  3. package/dist/index.es.js +1 -1
  4. package/dist/index.es.js.map +1 -1
  5. package/dist/types/src/core/components/dialogs/dialog/dialogContent/dialogContent.d.ts +9 -3
  6. package/dist/types/src/core/components/dialogs/dialog/dialogFooter/dialogFooter.d.ts +15 -14
  7. package/dist/types/src/core/components/dialogs/dialog/dialogHeader/dialogHeader.d.ts +3 -22
  8. package/dist/types/src/core/components/dialogs/dialog/dialogRoot/dialogRoot.api.d.ts +10 -0
  9. package/dist/types/src/core/components/dialogs/dialog/dialogRoot/dialogRoot.d.ts +0 -3
  10. package/dist/types/src/core/components/dialogs/dialog/dialogRoot/dialogRootHiddenElement.d.ts +11 -0
  11. package/dist/types/src/core/components/dialogs/dialog/dialogStoryComponent.d.ts +1 -0
  12. package/dist/types/src/core/components/dialogs/dialogAlert/dialogAlertContent/dialogAlertContent.d.ts +5 -3
  13. package/dist/types/src/core/components/dialogs/dialogAlert/dialogAlertContext/dialogAlertContext.d.ts +5 -0
  14. package/dist/types/src/core/components/dialogs/dialogAlert/dialogAlertContext/index.d.ts +1 -0
  15. package/dist/types/src/core/components/dialogs/dialogAlert/dialogAlertFooter/dialogAlertFooter.d.ts +5 -12
  16. package/dist/types/src/core/components/dialogs/dialogAlert/dialogAlertHeader/dialogAlertHeader.d.ts +1 -10
  17. package/dist/types/src/core/components/dialogs/dialogAlert/dialogAlertRoot/dialogAlertRoot.api.d.ts +55 -0
  18. package/dist/types/src/core/components/dialogs/dialogAlert/dialogAlertRoot/dialogAlertRoot.d.ts +1 -53
  19. package/dist/types/src/core/components/dialogs/dialogAlert/dialogAlertRoot/dialogAlertRootHiddenElement.d.ts +11 -0
  20. package/dist/types/src/core/components/dialogs/dialogAlert/dialogAlertRoot/index.d.ts +2 -1
  21. package/dist/types/src/core/components/dialogs/dialogAlert/dialogAlertStoryComponent.d.ts +2 -0
  22. package/dist/types/src/core/test/utils/testLogger.d.ts +2 -0
  23. package/package.json +21 -20
@@ -1,8 +1,14 @@
1
1
  import type React from 'react';
2
2
  import { type ComponentPropsWithoutRef } from 'react';
3
3
  export interface IDialogContentProps extends ComponentPropsWithoutRef<'div'> {
4
+ /**
5
+ * Optional description of the dialog.
6
+ */
7
+ description?: string;
8
+ /**
9
+ * Removes the default paddings when set to true.
10
+ * @default false
11
+ */
12
+ noInset?: boolean;
4
13
  }
5
- /**
6
- * `Dialog.Content` component.
7
- */
8
14
  export declare const DialogContent: React.FC<IDialogContentProps>;
@@ -1,27 +1,28 @@
1
- import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type ComponentPropsWithoutRef } from 'react';
2
- import { type IAlertInlineProps } from '../../../alerts';
3
- import { type IButtonBaseProps } from '../../../button';
4
- export type IDialogFooterAction = (Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> | Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'type'>) & Pick<IButtonBaseProps, 'iconRight' | 'iconLeft' | 'disabled' | 'isLoading'> & {
1
+ import type { ComponentPropsWithoutRef } from 'react';
2
+ import { type IButtonProps } from '../../../button';
3
+ export type IDialogFooterAction = Exclude<IButtonProps, 'children' | 'variant'> & {
5
4
  /**
6
- * Button label
5
+ * Label of the action button.
7
6
  */
8
7
  label: string;
9
8
  };
10
9
  export interface IDialogFooterProps extends ComponentPropsWithoutRef<'div'> {
11
10
  /**
12
- * Optional AlertInline
13
- */
14
- alert?: IAlertInlineProps;
15
- /**
16
- * Dialog primary action button
11
+ * Primary action of the dialog.
17
12
  */
18
13
  primaryAction?: IDialogFooterAction;
19
14
  /**
20
- * Dialog secondary action button
15
+ * Secondary action of the dialog.
21
16
  */
22
17
  secondaryAction?: IDialogFooterAction;
18
+ /**
19
+ * Variant of the dialog footer.
20
+ * @default default
21
+ */
22
+ variant?: 'default' | 'wizard';
23
+ /**
24
+ * Displays the primary actions with error variant when set to true.
25
+ */
26
+ hasError?: boolean;
23
27
  }
24
- /**
25
- * `Dialog.Footer` component
26
- */
27
28
  export declare const DialogFooter: React.FC<IDialogFooterProps>;
@@ -1,31 +1,12 @@
1
1
  import { type ComponentPropsWithoutRef } from 'react';
2
2
  export interface IDialogHeaderProps extends ComponentPropsWithoutRef<'div'> {
3
3
  /**
4
- * Optional accessible description announced when the dialog is opened
5
- */
6
- description?: string;
7
- /**
8
- * Indicates whether a back button should be shown
9
- * @default false
10
- */
11
- showBackButton?: boolean;
12
- /**
13
- * Accessible title summarizing dialog's content or purpose. Will be announced when
14
- * dialog is opened.
4
+ * Title of the dialog displayed on the header and used as the dialog's accessible name.
15
5
  */
16
6
  title: string;
17
7
  /**
18
- * Callback invoked when the back button is clicked
19
- */
20
- onBackClick?: () => void;
21
- /**
22
- * Callback invoked when the close button is clicked. Closes the dialog by default
8
+ * Callback triggered on close button click. The close button is not displayed when the property is not set.
23
9
  */
24
- onCloseClick?: () => void;
10
+ onClose?: () => void;
25
11
  }
26
- /**
27
- * `Dialog.Header` component
28
- *
29
- * **NOTE**: This component must be used inside a `<Dialog.Root />` component.
30
- */
31
12
  export declare const DialogHeader: React.FC<IDialogHeaderProps>;
@@ -56,4 +56,14 @@ export interface IDialogRootProps extends ComponentPropsWithoutRef<'div'> {
56
56
  * @default true
57
57
  */
58
58
  useFocusTrap?: boolean;
59
+ /**
60
+ * An accessible and hidden title for the dialog, to be used when implementing a dialog without a Dialog.Header
61
+ * component.
62
+ */
63
+ hiddenTitle?: string;
64
+ /**
65
+ * An accessible and hidden description for the dialog, to be used when implementing a dialog without a description
66
+ * on the Dialog.Content component.
67
+ */
68
+ hiddenDescription?: string;
59
69
  }
@@ -1,5 +1,2 @@
1
1
  import type { IDialogRootProps } from './dialogRoot.api';
2
- /**
3
- * `Dialog.Root` component.
4
- */
5
2
  export declare const DialogRoot: React.FC<IDialogRootProps>;
@@ -0,0 +1,11 @@
1
+ export interface IDialogRootHiddenElementProps {
2
+ /**
3
+ * Label to be rendered for screen readers only.
4
+ */
5
+ label?: string;
6
+ /**
7
+ * Type of element to be displayed.
8
+ */
9
+ type: 'title' | 'description';
10
+ }
11
+ export declare const DialogRootHiddenElement: React.FC<IDialogRootHiddenElementProps>;
@@ -0,0 +1 @@
1
+ export declare const DialogStoryComponent: (component: "header" | "content" | "footer" | "root") => (props: object) => import("react/jsx-runtime").JSX.Element;
@@ -1,8 +1,10 @@
1
1
  import type React from 'react';
2
2
  import { type ComponentPropsWithoutRef } from 'react';
3
3
  export interface IDialogAlertContentProps extends ComponentPropsWithoutRef<'div'> {
4
+ /**
5
+ * Removes the default paddings when set to true.
6
+ * @default false
7
+ */
8
+ noInset?: boolean;
4
9
  }
5
- /**
6
- * `DialogAlert.Content` component.
7
- */
8
10
  export declare const DialogAlertContent: React.FC<IDialogAlertContentProps>;
@@ -0,0 +1,5 @@
1
+ import type { IDialogAlertRootProps } from '../dialogAlertRoot';
2
+ export interface IDialogAlertContext extends Required<Pick<IDialogAlertRootProps, 'variant'>> {
3
+ }
4
+ export declare const DialogAlertContextProvider: import("react").Provider<IDialogAlertContext | null>;
5
+ export declare const useDialogAlertContext: () => IDialogAlertContext;
@@ -0,0 +1 @@
1
+ export { DialogAlertContextProvider, useDialogAlertContext, type IDialogAlertContext } from './dialogAlertContext';
@@ -1,26 +1,19 @@
1
1
  import type React from 'react';
2
- import { type AnchorHTMLAttributes, type ButtonHTMLAttributes } from 'react';
3
- import { type IButtonBaseProps } from '../../../button';
4
- export type IDialogAlertFooterAction = (Pick<AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> | Pick<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>) & Pick<IButtonBaseProps, 'iconRight' | 'iconLeft' | 'disabled' | 'isLoading'> & {
2
+ import { type IButtonProps } from '../../../button';
3
+ export type IDialogAlertFooterAction = Exclude<IButtonProps, 'children' | 'variant'> & {
5
4
  /**
6
- * Button label
5
+ * Label of the action button.
7
6
  */
8
7
  label: string;
9
8
  };
10
9
  export interface IDialogAlertFooterProps {
11
10
  /**
12
- * Alert dialog primary action button
11
+ * Action button of the alert dialog.
13
12
  */
14
13
  actionButton: IDialogAlertFooterAction;
15
14
  /**
16
- * Alert dialog secondary button used for dismissing the dialog
17
- * or cancelling the action
15
+ * Secondary button of the alert dialog used for dismissing the dialog or cancelling the action.
18
16
  */
19
17
  cancelButton: IDialogAlertFooterAction;
20
18
  }
21
- /**
22
- * `DialogAlert.Footer` component
23
- *
24
- * **NOTE**: This component must be used inside a `<DialogAlert.Root />` component.
25
- */
26
19
  export declare const DialogAlertFooter: React.FC<IDialogAlertFooterProps>;
@@ -1,17 +1,8 @@
1
- import { type ComponentPropsWithoutRef } from 'react';
1
+ import type { ComponentPropsWithoutRef } from 'react';
2
2
  export interface IDialogAlertHeaderProps extends ComponentPropsWithoutRef<'div'> {
3
3
  /**
4
4
  * Title summarizing dialog's content or purpose.
5
5
  */
6
6
  title: string;
7
- /**
8
- * Optional visually hidden description announced when the dialog is opened for accessibility.
9
- */
10
- description?: string;
11
7
  }
12
- /**
13
- * `DialogAlert.Header` component
14
- *
15
- * **NOTE**: This component must be used inside a `<DialogAlert.Root />` component.
16
- */
17
8
  export declare const DialogAlertHeader: React.FC<IDialogAlertHeaderProps>;
@@ -0,0 +1,55 @@
1
+ import type { ComponentPropsWithoutRef, ReactNode } from 'react';
2
+ export type DialogAlertVariant = 'critical' | 'info' | 'success' | 'warning';
3
+ export interface IDialogAlertRootProps extends ComponentPropsWithoutRef<'div'> {
4
+ /**
5
+ * Children of the component.
6
+ */
7
+ children?: ReactNode;
8
+ /**
9
+ * Additional CSS class names for custom styling of the dialog's content container.
10
+ */
11
+ containerClassName?: string;
12
+ /**
13
+ * Manages the visibility state of the dialog. Should be implemented alongside `onOpenChange` for controlled usage.
14
+ */
15
+ open?: boolean;
16
+ /**
17
+ * Additional CSS class names for custom styling of the overlay behind the dialog.
18
+ */
19
+ overlayClassName?: string;
20
+ /**
21
+ * The visual style variant of the dialog.
22
+ * @default info
23
+ */
24
+ variant?: DialogAlertVariant;
25
+ /**
26
+ * Callback function invoked when the open state of the dialog changes.
27
+ */
28
+ onOpenChange?: (open: boolean) => void;
29
+ /**
30
+ * Handler called when focus moves to the trigger after closing the dialog.
31
+ */
32
+ onCloseAutoFocus?: (e: Event) => void;
33
+ /**
34
+ * Handler called when focus moves to the destructive action after opening the dialog.
35
+ */
36
+ onOpenAutoFocus?: (e: Event) => void;
37
+ /**
38
+ * Handler called when the escape key is pressed while the dialog is opened. Closes the dialog by default.
39
+ */
40
+ onEscapeKeyDown?: (e: KeyboardEvent) => void;
41
+ /**
42
+ * Keeps the focus inside the Alert Dialog when set to true.
43
+ * @default true
44
+ */
45
+ useFocusTrap?: boolean;
46
+ /**
47
+ * An accessible and hidden title for the alert dialog, to be used when implementing a dialog without a
48
+ * DialogAlert.Header component.
49
+ */
50
+ hiddenTitle?: string;
51
+ /**
52
+ * An accessible and hidden description for the alert dialog.
53
+ */
54
+ hiddenDescription?: string;
55
+ }
@@ -1,54 +1,2 @@
1
- import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
2
- export type DialogAlertVariant = 'critical' | 'info' | 'success' | 'warning';
3
- export interface IDialogAlertRootProps extends ComponentPropsWithoutRef<'div'> {
4
- /**
5
- * Children of the component.
6
- */
7
- children?: ReactNode;
8
- /**
9
- * Additional CSS class names for custom styling of the dialog's content container.
10
- */
11
- containerClassName?: string;
12
- /**
13
- * Manages the visibility state of the dialog. Should be implemented alongside `onOpenChange` for controlled usage.
14
- */
15
- open?: boolean;
16
- /**
17
- * Additional CSS class names for custom styling of the overlay behind the dialog.
18
- */
19
- overlayClassName?: string;
20
- /**
21
- * The visual style variant of the dialog.
22
- * @default info
23
- */
24
- variant?: DialogAlertVariant;
25
- /**
26
- * Callback function invoked when the open state of the dialog changes.
27
- */
28
- onOpenChange?: (open: boolean) => void;
29
- /**
30
- * Handler called when focus moves to the trigger after closing the dialog.
31
- */
32
- onCloseAutoFocus?: (e: Event) => void;
33
- /**
34
- * Handler called when focus moves to the destructive action after opening the dialog.
35
- */
36
- onOpenAutoFocus?: (e: Event) => void;
37
- /**
38
- * Handler called when the escape key is pressed while the dialog is opened. Closes the dialog by default.
39
- */
40
- onEscapeKeyDown?: (e: KeyboardEvent) => void;
41
- /**
42
- * Keeps the focus inside the Alert Dialog when set to true.
43
- * @default true
44
- */
45
- useFocusTrap?: boolean;
46
- }
47
- export interface IDialogAlertContext {
48
- variant: DialogAlertVariant;
49
- }
50
- export declare const DialogAlertContext: import("react").Context<IDialogAlertContext>;
51
- /**
52
- * `DialogAlert.Root` component.
53
- */
1
+ import type { IDialogAlertRootProps } from './dialogAlertRoot.api';
54
2
  export declare const DialogAlertRoot: React.FC<IDialogAlertRootProps>;
@@ -0,0 +1,11 @@
1
+ export interface IDialogAlertRootHiddenElementProps {
2
+ /**
3
+ * Label to be rendered for screen readers only.
4
+ */
5
+ label?: string;
6
+ /**
7
+ * Type of element to be displayed.
8
+ */
9
+ type: 'title' | 'description';
10
+ }
11
+ export declare const DialogAlertRootHiddenElement: React.FC<IDialogAlertRootHiddenElementProps>;
@@ -1 +1,2 @@
1
- export { DialogAlertContext, DialogAlertRoot, type DialogAlertVariant, type IDialogAlertContext, type IDialogAlertRootProps, } from './dialogAlertRoot';
1
+ export { DialogAlertRoot } from './dialogAlertRoot';
2
+ export type { DialogAlertVariant, IDialogAlertRootProps } from './dialogAlertRoot.api';
@@ -0,0 +1,2 @@
1
+ import { type DialogAlertVariant } from './index';
2
+ export declare const DialogAlertStoryComponent: (component: "header" | "content" | "footer" | "root", variant?: DialogAlertVariant) => (props: object) => import("react/jsx-runtime").JSX.Element;
@@ -1,7 +1,9 @@
1
1
  declare class TestLogger {
2
2
  private shouldSuppressErrors;
3
3
  private originalConsoleError;
4
+ private originalConsoleWarn;
4
5
  private testErrorLogger;
6
+ private testWarnLogger;
5
7
  setup: () => void;
6
8
  suppressErrors: () => void;
7
9
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aragon/gov-ui-kit",
3
- "version": "1.0.64",
3
+ "version": "1.0.65",
4
4
  "description": "Implementation of the Aragon's Governance UI Kit",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/types/src/index.d.ts",
@@ -74,7 +74,7 @@
74
74
  },
75
75
  "peerDependencies": {
76
76
  "@tailwindcss/typography": "^0.5.0",
77
- "@tanstack/react-query": "^5.64.0",
77
+ "@tanstack/react-query": "^5.65.0",
78
78
  "react": "^18.2.0 || ^19.0.0",
79
79
  "react-dom": "^18.2.0 || ^19.0.0",
80
80
  "react-hook-form": "^7.54.0",
@@ -83,8 +83,8 @@
83
83
  "wagmi": "^2.14.0"
84
84
  },
85
85
  "devDependencies": {
86
- "@babel/core": "^7.26.0",
87
- "@babel/preset-env": "^7.26.0",
86
+ "@babel/core": "^7.26.7",
87
+ "@babel/preset-env": "^7.26.7",
88
88
  "@babel/preset-react": "^7.26.3",
89
89
  "@babel/preset-typescript": "^7.26.0",
90
90
  "@hookform/devtools": "^4.3.3",
@@ -94,29 +94,30 @@
94
94
  "@rollup/plugin-terser": "^0.4.4",
95
95
  "@rollup/plugin-typescript": "^12.1.2",
96
96
  "@storybook/addon-designs": "^8.0.4",
97
- "@storybook/addon-essentials": "^8.5.0",
98
- "@storybook/addon-links": "^8.5.0",
97
+ "@storybook/addon-essentials": "^8.5.2",
98
+ "@storybook/addon-links": "^8.5.2",
99
99
  "@storybook/addon-styling-webpack": "^1.0.1",
100
100
  "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
101
- "@storybook/blocks": "^8.5.0",
102
- "@storybook/react": "^8.5.0",
103
- "@storybook/react-webpack5": "^8.5.0",
101
+ "@storybook/blocks": "^8.5.2",
102
+ "@storybook/react": "^8.5.2",
103
+ "@storybook/react-webpack5": "^8.5.2",
104
+ "@storybook/test": "^8.5.2",
104
105
  "@svgr/rollup": "^8.1.0",
105
106
  "@svgr/webpack": "^8.1.0",
106
107
  "@tailwindcss/typography": "^0.5.16",
107
- "@tanstack/react-query": "^5.64.2",
108
+ "@tanstack/react-query": "^5.65.0",
108
109
  "@testing-library/dom": "^10.4.0",
109
110
  "@testing-library/jest-dom": "^6.6.3",
110
111
  "@testing-library/react": "^16.2.0",
111
- "@testing-library/user-event": "^14.6.0",
112
+ "@testing-library/user-event": "^14.6.1",
112
113
  "@types/jest": "^29.5.14",
113
114
  "@types/luxon": "^3.4.2",
114
- "@types/react": "^19.0.7",
115
+ "@types/react": "^19.0.8",
115
116
  "@types/react-dom": "^19.0.3",
116
117
  "@types/sanitize-html": "^2.13.0",
117
118
  "autoprefixer": "^10.4.20",
118
119
  "cross-env": "^7.0.3",
119
- "eslint": "^9.18.0",
120
+ "eslint": "^9.19.0",
120
121
  "eslint-import-resolver-typescript": "^3.7.0",
121
122
  "eslint-plugin-import": "^2.31.0",
122
123
  "eslint-plugin-jsx-a11y": "^6.10.2",
@@ -128,26 +129,26 @@
128
129
  "husky": "^9.1.7",
129
130
  "jest": "^29.7.0",
130
131
  "jest-environment-jsdom": "^29.7.0",
131
- "lint-staged": "^15.4.1",
132
+ "lint-staged": "^15.4.3",
132
133
  "postcss": "^8.5.1",
133
134
  "postcss-loader": "^8.1.1",
134
135
  "prettier": "^3.4.2",
135
136
  "prettier-plugin-organize-imports": "^4.1.0",
136
- "prettier-plugin-tailwindcss": "^0.6.10",
137
+ "prettier-plugin-tailwindcss": "^0.6.11",
137
138
  "react": "^19.0.0",
138
139
  "react-dom": "^19.0.0",
139
140
  "react-hook-form": "^7.54.2",
140
- "rollup": "^4.31.0",
141
+ "rollup": "^4.32.1",
141
142
  "rollup-plugin-peer-deps-external": "^2.2.4",
142
143
  "rollup-plugin-postcss": "^4.0.2",
143
144
  "rollup-plugin-visualizer": "^5.14.0",
144
- "storybook": "^8.5.0",
145
+ "storybook": "^8.5.2",
145
146
  "tailwindcss": "^3.4.17",
146
147
  "ts-jest": "^29.2.5",
147
148
  "typescript": "^5.7.3",
148
- "typescript-eslint": "^8.21.0",
149
- "viem": "^2.22.10",
150
- "wagmi": "^2.14.8"
149
+ "typescript-eslint": "^8.22.0",
150
+ "viem": "^2.22.16",
151
+ "wagmi": "^2.14.9"
151
152
  },
152
153
  "bugs": {
153
154
  "url": "https://github.com/aragon/gov-ui-kit/issues"