@pantheon-systems/pds-toolkit-react 1.0.0-dev.267 → 1.0.0-dev.269
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.
- package/_dist/components/SiteDashboardHeading/SiteDashboardHeading.d.ts +21 -17
- package/_dist/components/navigation/DropdownMenu/DropdownMenu.d.ts +2 -2
- package/_dist/components/navigation/SideNav/SideNav.d.ts +2 -2
- package/_dist/components/navigation/SideNavCompact/SideNavCompact.d.ts +9 -3
- package/_dist/components/navigation/navigation-types.d.ts +3 -6
- package/_dist/components/navigation/navigation-utilities.d.ts +5 -4
- package/_dist/components/notifications/InlineMessage/InlineMessage.d.ts +2 -2
- package/_dist/css/pds-layouts.css +2 -2
- package/_dist/index.css +1 -1
- package/_dist/index.d.ts +3 -0
- package/_dist/index.js +1436 -1383
- package/_dist/index.js.map +1 -1
- package/_dist/layouts/AppLayout/AppLayout.d.ts +18 -1
- package/_dist/libs/types/custom-types.d.ts +1 -1
- package/package.json +1 -1
|
@@ -7,21 +7,9 @@ import './site-dashboard-heading.css';
|
|
|
7
7
|
*/
|
|
8
8
|
export interface SiteDashboardHeadingProps extends ComponentPropsWithoutRef<'div'> {
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
11
|
-
*/
|
|
12
|
-
siteName: string;
|
|
13
|
-
/**
|
|
14
|
-
* Site plan level.
|
|
10
|
+
* Function to handle upgrade click.
|
|
15
11
|
*/
|
|
16
|
-
|
|
17
|
-
/**
|
|
18
|
-
* Site type.
|
|
19
|
-
*/
|
|
20
|
-
siteType?: SiteType;
|
|
21
|
-
/**
|
|
22
|
-
* Additional class names
|
|
23
|
-
*/
|
|
24
|
-
className?: string;
|
|
12
|
+
handleUpgradeClick?: () => void;
|
|
25
13
|
/**
|
|
26
14
|
* Function to handle popover content.
|
|
27
15
|
*/
|
|
@@ -39,15 +27,31 @@ export interface SiteDashboardHeadingProps extends ComponentPropsWithoutRef<'div
|
|
|
39
27
|
*/
|
|
40
28
|
setPopoverIsOpen?: (isOpen: boolean) => void;
|
|
41
29
|
/**
|
|
42
|
-
*
|
|
30
|
+
* Name of the site.
|
|
31
|
+
*/
|
|
32
|
+
siteName: string;
|
|
33
|
+
/**
|
|
34
|
+
* Site plan level.
|
|
43
35
|
*/
|
|
44
|
-
|
|
36
|
+
sitePlanLevel?: SitePlanLevel;
|
|
37
|
+
/**
|
|
38
|
+
* Site type.
|
|
39
|
+
*/
|
|
40
|
+
siteType?: SiteType;
|
|
45
41
|
/**
|
|
46
42
|
* Additional props to pass to the trigger component.
|
|
47
43
|
*/
|
|
48
44
|
triggerProps?: Omit<ComponentPropsWithoutRef<typeof Popover>, 'content' | 'title' | 'placement' | 'triggerIcon'>;
|
|
45
|
+
/**
|
|
46
|
+
* Label for the upgrade button.
|
|
47
|
+
*/
|
|
48
|
+
upgradeLabel: string;
|
|
49
|
+
/**
|
|
50
|
+
* Additional class names
|
|
51
|
+
*/
|
|
52
|
+
className?: string;
|
|
49
53
|
}
|
|
50
54
|
/**
|
|
51
55
|
* SiteDashboardHeading UI component
|
|
52
56
|
*/
|
|
53
|
-
export declare const SiteDashboardHeading: ({
|
|
57
|
+
export declare const SiteDashboardHeading: ({ popoverContent, popoverIsOpen, popoverTitle, handleUpgradeClick, setPopoverIsOpen, siteName, sitePlanLevel, siteType, triggerProps, upgradeLabel, className, ...props }: SiteDashboardHeadingProps) => React.JSX.Element;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { ComponentPropsWithoutRef } from 'react';
|
|
1
|
+
import React, { ComponentPropsWithoutRef, ReactElement } from 'react';
|
|
2
2
|
import { NavigationItem } from '@components/navigation/navigation-types';
|
|
3
3
|
import './dropdown-menu.css';
|
|
4
4
|
/**
|
|
@@ -8,7 +8,7 @@ export interface DropdownMenuProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
8
8
|
/**
|
|
9
9
|
* Heading text. If a string is passed, it will be rendered as a heading. If a link is passed, it will be rendered as a link.
|
|
10
10
|
*/
|
|
11
|
-
headingText?: string |
|
|
11
|
+
headingText?: string | ReactElement;
|
|
12
12
|
/**
|
|
13
13
|
* Menu items to render.
|
|
14
14
|
*/
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { ComponentPropsWithoutRef } from 'react';
|
|
1
|
+
import React, { ComponentPropsWithoutRef, ReactElement } from 'react';
|
|
2
2
|
import { NavigationItem } from '@components/navigation/navigation-types';
|
|
3
3
|
import './side-nav.css';
|
|
4
4
|
/**
|
|
@@ -16,7 +16,7 @@ export interface SideNavProps extends ComponentPropsWithoutRef<'nav'> {
|
|
|
16
16
|
/**
|
|
17
17
|
* Heading text. If a link is passed, it will be rendered as a link.
|
|
18
18
|
*/
|
|
19
|
-
headingText?: string |
|
|
19
|
+
headingText?: string | ReactElement;
|
|
20
20
|
/**
|
|
21
21
|
* Labels for translatable strings.
|
|
22
22
|
*/
|
|
@@ -1,6 +1,12 @@
|
|
|
1
|
-
import React, { ComponentPropsWithoutRef } from 'react';
|
|
1
|
+
import React, { ComponentPropsWithoutRef, ReactElement } from 'react';
|
|
2
2
|
import { NavigationItem } from '@components/navigation/navigation-types';
|
|
3
3
|
import './side-nav-compact.css';
|
|
4
|
+
export type SideNavCompactItem = NavigationItem & {
|
|
5
|
+
/**
|
|
6
|
+
* A boolean indicating whether the item is a submenu.
|
|
7
|
+
*/
|
|
8
|
+
path?: string;
|
|
9
|
+
};
|
|
4
10
|
/**
|
|
5
11
|
* Prop types for SideNavCompact
|
|
6
12
|
*/
|
|
@@ -16,7 +22,7 @@ export interface SideNavCompactProps extends ComponentPropsWithoutRef<'nav'> {
|
|
|
16
22
|
/**
|
|
17
23
|
* Heading text. If a link is passed, it will be rendered as a link.
|
|
18
24
|
*/
|
|
19
|
-
headingText?: string |
|
|
25
|
+
headingText?: string | ReactElement;
|
|
20
26
|
/**
|
|
21
27
|
* Labels for translatable strings.
|
|
22
28
|
*/
|
|
@@ -27,7 +33,7 @@ export interface SideNavCompactProps extends ComponentPropsWithoutRef<'nav'> {
|
|
|
27
33
|
/**
|
|
28
34
|
* Menu items to render.
|
|
29
35
|
*/
|
|
30
|
-
menuItems:
|
|
36
|
+
menuItems: SideNavCompactItem[];
|
|
31
37
|
/**
|
|
32
38
|
* Mobile menu will be enabled when viewport is at or below this number in pixels.
|
|
33
39
|
*/
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import type { ReactElement } from 'react';
|
|
1
2
|
export type NavigationItem = {
|
|
2
3
|
/**
|
|
3
4
|
* A boolean indicating whether the item is the active item.
|
|
@@ -6,15 +7,11 @@ export type NavigationItem = {
|
|
|
6
7
|
/**
|
|
7
8
|
* Link content — a fully-formed link element using the router of your choice. If a string is provided instead, the item will be rendered as a link that navigates to the first child item.
|
|
8
9
|
*/
|
|
9
|
-
linkContent:
|
|
10
|
+
linkContent: ReactElement | string;
|
|
10
11
|
/**
|
|
11
12
|
* Submenu items.
|
|
12
13
|
*/
|
|
13
14
|
links?: NavigationItem[];
|
|
14
|
-
/**
|
|
15
|
-
* A boolean indicating whether the item is a submenu.
|
|
16
|
-
*/
|
|
17
|
-
path?: string;
|
|
18
15
|
};
|
|
19
16
|
export type FlattenedNavigationItem = {
|
|
20
17
|
/**
|
|
@@ -24,7 +21,7 @@ export type FlattenedNavigationItem = {
|
|
|
24
21
|
/**
|
|
25
22
|
* Link content — a fully-formed link element using the router of your choice.
|
|
26
23
|
*/
|
|
27
|
-
linkContent:
|
|
24
|
+
linkContent: ReactElement;
|
|
28
25
|
/**
|
|
29
26
|
* Nesting level of the item.
|
|
30
27
|
*/
|
|
@@ -1,8 +1,9 @@
|
|
|
1
|
+
import React, { ReactElement } from 'react';
|
|
1
2
|
import { PDSIcon } from '@components/icons/Icon/Icon';
|
|
2
3
|
import { NavigationItem } from '@components/navigation/navigation-types';
|
|
3
4
|
export declare const isActiveItem: (item: NavigationItem) => boolean;
|
|
4
5
|
export declare const isActiveTrail: (item: NavigationItem) => boolean;
|
|
5
|
-
export declare const getActiveLink: (items: NavigationItem[]) =>
|
|
6
|
-
export declare const getLinkContentString: (linkContent:
|
|
7
|
-
export declare const processNavLinkContent: (linkContent:
|
|
8
|
-
export declare const processSideNavGlobalLinkContent: (baseClass: string, linkContent:
|
|
6
|
+
export declare const getActiveLink: (items: NavigationItem[]) => ReactElement | null;
|
|
7
|
+
export declare const getLinkContentString: (linkContent: ReactElement | string) => string;
|
|
8
|
+
export declare const processNavLinkContent: (linkContent: ReactElement | string, links?: NavigationItem[]) => ReactElement | string;
|
|
9
|
+
export declare const processSideNavGlobalLinkContent: (baseClass: string, linkContent: ReactElement | string, links?: NavigationItem[], icon?: PDSIcon) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
|
|
@@ -8,11 +8,11 @@ type MessageType = 'info' | 'success' | 'warning' | 'critical' | 'working';
|
|
|
8
8
|
* Labels for each message type.
|
|
9
9
|
*/
|
|
10
10
|
type TypeLabels = Record<MessageType, string>;
|
|
11
|
-
export interface InlineMessageProps extends ComponentPropsWithoutRef<'div'> {
|
|
11
|
+
export interface InlineMessageProps extends Omit<ComponentPropsWithoutRef<'div'>, 'title'> {
|
|
12
12
|
/**
|
|
13
13
|
* Title text.
|
|
14
14
|
*/
|
|
15
|
-
title:
|
|
15
|
+
title: ReactNode;
|
|
16
16
|
/**
|
|
17
17
|
* Secondary text.
|
|
18
18
|
*/
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
.pds-app-layout{--toggle-icon-size:1.5rem;--toggle-trigger-size:2rem;--button-offset:calc(var(--toggle-trigger-size)*-0.5);column-gap:var(--pds-spacing-3xl);display:flex;flex:1;flex-direction:row;height:100%}.pds-app-
|
|
2
|
-
.pds-app-layout__sidebar-toggle-icon{transform:rotate(180deg);transition:all .2s ease-in-out 0s}.pds-app-layout__sidebar-inner{height:100%;overflow-x:hidden;padding-inline-end:var(--pds-spacing-l);text-wrap:nowrap}.pds-app-layout__sidebar-inner:has(.pds-side-nav-global){margin-inline-start:calc(var(--pds-spacing-xs)*-1)}.pds-app-layout--isMobile{flex-direction:column;height:unset}.pds-app-layout--isMobile .pds-app-
|
|
1
|
+
.pds-app-layout{--toggle-icon-size:1.5rem;--toggle-trigger-size:2rem;--button-offset:calc(var(--toggle-trigger-size)*-0.5);column-gap:var(--pds-spacing-3xl);display:flex;flex:1;flex-direction:row;height:100%}.pds-app-layout__main,.pds-app-layout__sidebar{padding-block:var(--pds-spacing-2xl);position:relative}.pds-app-layout__main{flex:1;position:relative}.pds-app-layout__sidebar{border-right:1px solid var(--pds-color-border-default);position:relative}.pds-app-layout__sidebar:after{background-color:var(--pds-color-border-default);content:"";height:100%;opacity:0;pointer-events:none;position:absolute;right:-1px;top:0;transition:opacity .15s ease-in-out;width:2px}.pds-app-layout__sidebar:has(.pds-app-layout__sidebar-toggle-button:hover):after{opacity:1}.pds-app-layout__sidebar-toggle-button{background-color:transparent;border:none;cursor:pointer;height:100%;position:absolute;right:var(--button-offset);top:.125rem;width:var(--toggle-trigger-size);z-index:2}.pds-app-layout__sidebar-toggle-button:focus-visible{outline:none}.pds-app-layout__sidebar-toggle-button:focus-visible>.pds-app-layout__sidebar-toggle-icon{opacity:1;outline:1px solid var(--pds-color-interactive-focus);outline-offset:2px}.pds-app-layout__sidebar-toggle-button:hover>.pds-app-layout__sidebar-toggle-icon{opacity:1;transition:opacity .1s ease-in-out;transition-delay:.1s}.pds-app-layout__sidebar-toggle-icon{align-items:center;background-color:var(--pds-color-dashboard-toggle-button-background);border:none;border-radius:50%;color:var(--pds-color-dashboard-toggle-button-foreground);display:flex;height:var(--toggle-icon-size);justify-content:center;opacity:0;position:absolute;right:.25rem;top:2rem;width:var(--toggle-icon-size);z-index:2}.pds-app-layout__sidebar-toggle-button[aria-expanded=false]
|
|
2
|
+
.pds-app-layout__sidebar-toggle-icon{transform:rotate(180deg);transition:all .2s ease-in-out 0s}.pds-app-layout__sidebar-inner{height:100%;overflow-x:hidden;padding-inline-end:var(--pds-spacing-l);text-wrap:nowrap}.pds-app-layout__sidebar-inner:has(.pds-side-nav-global){margin-inline-start:calc(var(--pds-spacing-xs)*-1)}.pds-app-layout--isMobile{flex-direction:column;height:unset}.pds-app-layout--isMobile .pds-app-layout__main,.pds-app-layout--isMobile .pds-app-layout__sidebar{border-right:none;width:100%}.pds-app-layout--isMobile .pds-app-layout__sidebar{border-bottom:1px solid var(--pds-color-border-default);min-width:unset;padding-inline-end:0}.pds-dashboard-global{--dashboard-toggle-icon-size:1.5rem;--dashboard-toggle-trigger-size:3rem;--dashboard-toggle-top-position:5rem;--dashboard-navbar-inline-padding:var(--pds-spacing-3xl);display:flex;min-height:100vh;overflow:hidden;position:relative}@media (min-width:641px){.pds-dashboard-global .pds-workspace-selector{margin-inline-start:-1.25rem}}.pds-dashboard-global--notMobile{background-color:var(--pds-color-dashboard-nav-background)}.pds-dashboard-global--notMobile .pds-dashboard-global__header{max-width:calc(var(--pds-dashboard-navbar-max-width) + var(--dashboard-navbar-inline-padding)*2)}.pds-dashboard-global--notMobile .pds-dashboard-global__sidebar-toggle-button{background-color:transparent;border:none;height:calc(100% - var(--dashboard-toggle-top-position));position:absolute;right:calc(var(--dashboard-toggle-trigger-size)*-.5);top:var(--dashboard-toggle-top-position);width:var(--dashboard-toggle-trigger-size);z-index:2}.pds-dashboard-global--notMobile .pds-dashboard-global__sidebar-toggle-button:focus-visible{outline:none}.pds-dashboard-global--notMobile .pds-dashboard-global__sidebar-toggle-button:focus-visible>.pds-dashboard-global__sidebar-toggle-icon{opacity:1;outline:1px solid var(--pds-color-interactive-focus);outline-offset:2px}.pds-dashboard-global--notMobile .pds-dashboard-global__sidebar-toggle-button:hover>.pds-dashboard-global__sidebar-toggle-icon{opacity:1;transition:opacity .1s ease-in-out;transition-delay:.1s}.pds-dashboard-global--notMobile .pds-dashboard-global__sidebar-toggle-icon{align-items:center;background-color:var(--pds-color-dashboard-toggle-button-background);border:none;border-radius:50%;color:var(--pds-color-dashboard-toggle-button-foreground);display:flex;height:var(--dashboard-toggle-icon-size);justify-content:center;opacity:0;position:absolute;right:25%;top:2rem;width:var(--dashboard-toggle-icon-size);z-index:2}.pds-dashboard-global--notMobile .pds-dashboard-global__sidebar-toggle-button[aria-expanded=false]
|
|
3
3
|
.pds-dashboard-global__sidebar-toggle-icon{transform:rotate(180deg);transition:all .2s ease-in-out 0s}.pds-dashboard-global--notMobile .pds-dashboard-global__sidebar{box-sizing:content-box;padding-block-end:1rem;padding-block-start:.75rem;padding-inline-end:1.563rem;padding-inline-start:calc(1.563rem + var(--pds-spacing-dashboard-nav-item-padding));position:relative}.pds-dashboard-global--notMobile .pds-dashboard-global__sidebar-inner{height:100%;margin-inline-start:-.75rem;overflow-x:hidden}.pds-dashboard-global--notMobile .pds-dashboard-global__right{display:flex;flex-direction:column}.pds-dashboard-global--notMobile .pds-navbar__inner{padding-inline-end:2.441rem}.pds-dashboard-global--notMobile .pds-dashboard-global__inner{background-color:var(--pds-color-background-default);border-top-left-radius:1.25rem;box-shadow:var(--pds-elevation-dashboard);display:flex;flex:1;flex-direction:column;position:relative}.pds-dashboard-global--notMobile .pds-dashboard-global__main{flex:1;padding-block:2.441rem;padding-inline:2.441rem 2.691rem}.pds-dashboard-global--notMobile .pds-site-footer .pds-container{padding-inline:2.441rem}.pds-dashboard-global__sidebar--collapsed
|
|
4
4
|
.pds-dashboard-global__sidebar-toggle{opacity:1}.pds-dashboard-global--isMobile{display:flex;flex-direction:column}.pds-dashboard-global--isMobile .pds-dashboard-global__sidebar{padding-block:1.953rem;padding-inline:1.563rem}.pds-dashboard-global--isMobile .pds-dashboard-global__main{padding-block:.64rem;padding-inline:1.563rem}.pds-dashboard-global--isMobile .pds-site-footer{padding-inline:.328rem}.pds-dashboard-global--isAdmin{--pds-color-dashboard-nav-background:var(
|
|
5
5
|
--pds-color-dashboard-nav-background-admin
|