@pantheon-systems/pds-toolkit-react 1.0.0-dev.156 → 1.0.0-dev.158

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 (17) hide show
  1. package/_dist/components/navigation/DropdownMenu/DropdownMenu.d.ts +27 -16
  2. package/_dist/components/navigation/SideNav/SideNav.d.ts +40 -22
  3. package/_dist/components/navigation/SideNavCompact/SideNavCompact.d.ts +40 -22
  4. package/_dist/components/navigation/navigation-types.d.ts +39 -0
  5. package/_dist/components/navigation/navigation-utilities.d.ts +7 -0
  6. package/_dist/components/notifications/Banner/Banner.d.ts +38 -26
  7. package/_dist/css/component-css/pds-banner.css +1 -1
  8. package/_dist/css/component-css/pds-dropdown-menu.css +1 -1
  9. package/_dist/css/component-css/pds-index.css +2 -2
  10. package/_dist/css/component-css/pds-side-nav-compact.css +1 -1
  11. package/_dist/css/component-css/pds-side-nav.css +1 -1
  12. package/_dist/css/pds-components.css +2 -2
  13. package/_dist/index.css +1 -1
  14. package/_dist/index.d.ts +4 -4
  15. package/_dist/index.js +3186 -3266
  16. package/_dist/index.js.map +1 -1
  17. package/package.json +1 -1
package/_dist/components/navigation/DropdownMenu/DropdownMenu.d.ts CHANGED
@@ -1,17 +1,28 @@
1
- export function DropdownMenu({ headingText, menuItems, selectTextFallback, className, ...props }: {
2
- [x: string]: any;
3
- headingText: any;
4
- menuItems: any;
5
- selectTextFallback?: string;
6
- className: any;
7
- }): React.JSX.Element;
8
- export namespace DropdownMenu {
9
- namespace propTypes {
10
- let headingText: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
11
- let menuItems: PropTypes.Validator<any[]>;
12
- let selectTextFallback: PropTypes.Requireable<string>;
13
- let className: PropTypes.Requireable<string>;
14
- }
1
+ import React, { ComponentPropsWithoutRef } from 'react';
2
+ import { NavigationItem } from '@components/navigation/navigation-types';
3
+ import './dropdown-menu.css';
4
+ /**
5
+ * Prop types for DropdownMenu
6
+ */
7
+ export interface DropdownMenuProps extends ComponentPropsWithoutRef<'div'> {
8
+ /**
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
+ */
11
+ headingText?: string | JSX.Element;
12
+ /**
13
+ * Menu items to render.
14
+ */
15
+ menuItems: NavigationItem[];
16
+ /**
17
+ * Text to display in the mobile menu trigger button when no active link is found.
18
+ */
19
+ selectTextFallback: string;
20
+ /**
21
+ * Additional class names
22
+ */
23
+ className?: string;
15
24
  }
16
- import React from 'react';
17
- import PropTypes from 'prop-types';
25
+ /**
26
+ * DropdownMenu UI component
27
+ */
28
+ export declare const DropdownMenu: ({ headingText, menuItems, selectTextFallback, className, ...props }: DropdownMenuProps) => React.JSX.Element;
package/_dist/components/navigation/SideNav/SideNav.d.ts CHANGED
@@ -1,29 +1,47 @@
1
- export function SideNav({ ariaLabel, headingText, labels, menuItems, mobileMenuMaxWidth, mobileMenuSelectTextFallback, className, ...props }: {
2
- [x: string]: any;
3
- ariaLabel?: string;
4
- headingText: any;
1
+ import React, { ComponentPropsWithoutRef } from 'react';
2
+ import { NavigationItem } from '@components/navigation/navigation-types';
3
+ import './side-nav.css';
4
+ /**
5
+ * Prop types for SideNav
6
+ */
7
+ export interface SideNavProps extends ComponentPropsWithoutRef<'nav'> {
8
+ /**
9
+ * Aria label for the navigation.
10
+ */
11
+ ariaLabel: string;
12
+ /**
13
+ * Whether the menu should be rendered as a mobile menu when the viewport is at or below the mobileMenuMaxWidth.
14
+ */
15
+ hasMobileMenu?: boolean;
16
+ /**
17
+ * Heading text. If a link is passed, it will be rendered as a link.
18
+ */
19
+ headingText?: string | JSX.Element;
20
+ /**
21
+ * Labels for translatable strings.
22
+ */
5
23
  labels?: {
6
24
  submenu: string;
7
25
  toggle: string;
8
26
  };
9
- menuItems: any;
27
+ /**
28
+ * Menu items to render.
29
+ */
30
+ menuItems: NavigationItem[];
31
+ /**
32
+ * Mobile menu will be enabled when viewport is at or below this number in pixels.
33
+ */
10
34
  mobileMenuMaxWidth?: number;
35
+ /**
36
+ * Text to display in the mobile menu trigger button when no active link is found.
37
+ */
11
38
  mobileMenuSelectTextFallback?: string;
12
- className: any;
13
- }): React.JSX.Element;
14
- export namespace SideNav {
15
- namespace propTypes {
16
- let ariaLabel: PropTypes.Requireable<string>;
17
- let headingText: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
18
- let labels: PropTypes.Requireable<PropTypes.InferProps<{
19
- submenu: PropTypes.Requireable<string>;
20
- toggle: PropTypes.Requireable<string>;
21
- }>>;
22
- let menuItems: PropTypes.Validator<any[]>;
23
- let mobileMenuMaxWidth: PropTypes.Requireable<number>;
24
- let mobileMenuSelectTextFallback: PropTypes.Requireable<string>;
25
- let className: PropTypes.Requireable<string>;
26
- }
39
+ /**
40
+ * Additional class names
41
+ */
42
+ className?: string;
27
43
  }
28
- import React from 'react';
29
- import PropTypes from 'prop-types';
44
+ /**
45
+ * SideNav UI component
46
+ */
47
+ export declare const SideNav: ({ ariaLabel, hasMobileMenu, headingText, labels, menuItems, mobileMenuMaxWidth, mobileMenuSelectTextFallback, className, ...props }: SideNavProps) => React.JSX.Element;
package/_dist/components/navigation/SideNavCompact/SideNavCompact.d.ts CHANGED
@@ -1,29 +1,47 @@
1
- export function SideNavCompact({ ariaLabel, headingText, labels, menuItems, mobileMenuMaxWidth, mobileMenuSelectTextFallback, className, ...props }: {
2
- [x: string]: any;
3
- ariaLabel?: string;
4
- headingText: any;
1
+ import React, { ComponentPropsWithoutRef } from 'react';
2
+ import { NavigationItem } from '@components/navigation/navigation-types';
3
+ import './side-nav-compact.css';
4
+ /**
5
+ * Prop types for SideNavCompact
6
+ */
7
+ export interface SideNavCompactProps extends ComponentPropsWithoutRef<'nav'> {
8
+ /**
9
+ * Aria label for the navigation.
10
+ */
11
+ ariaLabel: string;
12
+ /**
13
+ * Whether the menu should be rendered as a mobile menu when the viewport is at or below the mobileMenuMaxWidth.
14
+ */
15
+ hasMobileMenu?: boolean;
16
+ /**
17
+ * Heading text. If a link is passed, it will be rendered as a link.
18
+ */
19
+ headingText?: string | JSX.Element;
20
+ /**
21
+ * Labels for translatable strings.
22
+ */
5
23
  labels?: {
6
24
  submenu: string;
7
25
  toggle: string;
8
26
  };
9
- menuItems: any;
27
+ /**
28
+ * Menu items to render.
29
+ */
30
+ menuItems: NavigationItem[];
31
+ /**
32
+ * Mobile menu will be enabled when viewport is at or below this number in pixels.
33
+ */
10
34
  mobileMenuMaxWidth?: number;
35
+ /**
36
+ * Text to display in the mobile menu trigger button when no active link is found.
37
+ */
11
38
  mobileMenuSelectTextFallback?: string;
12
- className: any;
13
- }): React.JSX.Element;
14
- export namespace SideNavCompact {
15
- namespace propTypes {
16
- let ariaLabel: PropTypes.Requireable<string>;
17
- let headingText: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
18
- let labels: PropTypes.Requireable<PropTypes.InferProps<{
19
- submenu: PropTypes.Requireable<string>;
20
- toggle: PropTypes.Requireable<string>;
21
- }>>;
22
- let menuItems: PropTypes.Validator<any[]>;
23
- let mobileMenuMaxWidth: PropTypes.Requireable<number>;
24
- let mobileMenuSelectTextFallback: PropTypes.Requireable<string>;
25
- let className: PropTypes.Requireable<string>;
26
- }
39
+ /**
40
+ * Additional class names
41
+ */
42
+ className?: string;
27
43
  }
28
- import React from 'react';
29
- import PropTypes from 'prop-types';
44
+ /**
45
+ * SideNavCompact UI component
46
+ */
47
+ export declare const SideNavCompact: ({ ariaLabel, hasMobileMenu, headingText, labels, menuItems, mobileMenuMaxWidth, mobileMenuSelectTextFallback, className, ...props }: SideNavCompactProps) => React.JSX.Element;
package/_dist/components/navigation/navigation-types.d.ts ADDED
@@ -0,0 +1,39 @@
1
+ /// <reference types="react" />
2
+ export type NavigationItem = {
3
+ /**
4
+ * A boolean indicating whether the item is the active item.
5
+ */
6
+ isActive?: boolean;
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.
9
+ */
10
+ linkContent: JSX.Element | string;
11
+ /**
12
+ * Submenu items.
13
+ */
14
+ links?: NavigationItem[];
15
+ };
16
+ export type SingleLevelNavigationItem = {
17
+ /**
18
+ * A boolean indicating whether the item is the active item.
19
+ */
20
+ isActive?: boolean;
21
+ /**
22
+ * Link content — a fully-formed link element using the router of your choice.
23
+ */
24
+ linkContent: JSX.Element;
25
+ };
26
+ export type FlattenedNavigationItem = {
27
+ /**
28
+ * A boolean indicating whether the item is the active item.
29
+ */
30
+ isActive?: boolean;
31
+ /**
32
+ * Link content — a fully-formed link element using the router of your choice.
33
+ */
34
+ linkContent: JSX.Element;
35
+ /**
36
+ * Nesting level of the item.
37
+ */
38
+ level: 'top-level' | 'second-level' | 'third-level';
39
+ };
package/_dist/components/navigation/navigation-utilities.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ /// <reference types="react" />
2
+ import { NavigationItem } from '@components/navigation/navigation-types';
3
+ export declare const isActiveItem: (item: NavigationItem) => boolean;
4
+ export declare const isActiveTrail: (item: NavigationItem) => boolean;
5
+ export declare const getActiveLink: (items: NavigationItem[]) => JSX.Element | null;
6
+ export declare const getLinkContentString: (linkContent: JSX.Element | string) => string;
7
+ export declare const processNavLinkContent: (linkContent: JSX.Element | string, links?: NavigationItem[]) => JSX.Element | string;
package/_dist/components/notifications/Banner/Banner.d.ts CHANGED
@@ -1,35 +1,47 @@
1
- export function Banner({ banners, dismissLabel, labelNext, labelPrevious, typeLabels, className, ...props }: {
2
- [x: string]: any;
3
- banners: any;
1
+ import React, { ComponentPropsWithoutRef } from 'react';
2
+ import './banner.css';
3
+ type Banner = {
4
+ id: string;
5
+ isDismissible?: boolean;
6
+ message: string | React.ReactNode;
7
+ onDismiss?: () => void;
8
+ type?: 'info' | 'warning' | 'critical';
9
+ };
10
+ /**
11
+ * Prop types for Banner
12
+ */
13
+ export interface BannerProps extends ComponentPropsWithoutRef<'div'> {
14
+ /**
15
+ * Array of banner objects
16
+ */
17
+ banners: Banner[];
18
+ /**
19
+ * Label for the dismiss button
20
+ */
4
21
  dismissLabel?: string;
22
+ /**
23
+ * Label for the next message button
24
+ */
5
25
  labelNext?: string;
26
+ /**
27
+ * Label for the previous message button
28
+ */
6
29
  labelPrevious?: string;
30
+ /**
31
+ * Type labels
32
+ */
7
33
  typeLabels?: {
8
34
  info: string;
9
35
  warning: string;
10
36
  critical: string;
11
37
  };
12
- className: any;
13
- }): React.JSX.Element;
14
- export namespace Banner {
15
- namespace propTypes {
16
- let banners: PropTypes.Requireable<PropTypes.InferProps<{
17
- id: PropTypes.Validator<string>;
18
- isDismissible: PropTypes.Requireable<boolean>;
19
- message: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
20
- onDismiss: PropTypes.Requireable<(...args: any[]) => any>;
21
- type: PropTypes.Requireable<string>;
22
- }>[]>;
23
- let dismissLabel: PropTypes.Requireable<string>;
24
- let labelNext: PropTypes.Requireable<string>;
25
- let labelPrevious: PropTypes.Requireable<string>;
26
- let typeLabels: PropTypes.Requireable<PropTypes.InferProps<{
27
- info: PropTypes.Requireable<string>;
28
- warning: PropTypes.Requireable<string>;
29
- critical: PropTypes.Requireable<string>;
30
- }>>;
31
- let className: PropTypes.Requireable<string>;
32
- }
38
+ /**
39
+ * Additional class names
40
+ */
41
+ className?: string;
33
42
  }
34
- import React from 'react';
35
- import PropTypes from 'prop-types';
43
+ /**
44
+ * Banner UI component
45
+ */
46
+ export declare const Banner: ({ banners, dismissLabel, labelNext, labelPrevious, typeLabels, className, ...props }: BannerProps) => React.JSX.Element;
47
+ export {};
package/_dist/css/component-css/pds-banner.css CHANGED
@@ -1 +1 @@
1
- .pds-banner-group{--pds-banner-background:var(--pds-color-banner-info-background);--pds-banner-foreground:var(--pds-color-banner-info-foreground);--pds-banner-height:4.678rem;--pds-nav-button-size:1.953rem;min-height:var(--pds-banner-height);position:relative}@media (min-width:641px){.pds-banner-group{--pds-banner-height:3.815rem}}.pds-banner{background:var(--pds-banner-background);box-sizing:border-box;color:var(--pds-banner-foreground);font-size:.833rem;height:var(--pds-banner-height);justify-content:space-between;padding-inline:1.953rem;position:absolute;width:100%}.pds-banner,.pds-banner__content{align-items:center;display:flex;gap:.8rem}.pds-banner-group--multiple .pds-banner{padding-inline:3.052rem}.pds-banner__icon{flex-grow:0;flex-shrink:0}.pds-banner__message p{all:unset}.pds-banner__message a{color:var(--pds-banner-foreground);padding:.125rem;text-decoration:underline}.pds-banner__message a:hover{background-color:hsla(0,0%,100%,.2);color:var(--pds-banner-foreground);text-decoration:none;transition:all .2s ease-in-out 0s}.pds-banner__message a:focus-visible{outline:.0625rem solid var(--pds-banner-foreground);outline-offset:0}.pds-banner__dismiss-button{all:unset;border-radius:.1875rem;cursor:pointer;padding:.328rem .512rem;transition:all .2s ease-in-out 0s}.pds-banner__dismiss-button:hover{background-color:hsla(0,0%,100%,.2)}.pds-banner__dismiss-button:focus-visible{outline:.0625rem solid var(--pds-banner-foreground);outline-offset:0}.pds-banner__navigation{display:flex;justify-content:space-between;width:100%}button.pds-banner__nav-button{color:var(--pds-banner-foreground);height:var(--pds-nav-button-size);margin-block:1.375rem;margin-inline:.512rem;min-width:unset;padding:0;transition:all .2s ease-in-out 0s;width:var(--pds-nav-button-size);z-index:calc(var(--pds-z-index-notifications) + 10)}@media (min-width:641px){button.pds-banner__nav-button{margin-block:.9375rem}}button.pds-banner__nav-button:hover:enabled{background-color:hsla(0,0%,100%,.2)}button.pds-banner__nav-button:focus-visible{outline:.0625rem solid var(--pds-banner-foreground);outline-offset:0}.pds-banner--critical{--pds-banner-background:var(--pds-color-banner-critical-background);--pds-banner-foreground:var(--pds-color-banner-critical-foreground)}.pds-banner--info{--pds-banner-background:var(--pds-color-banner-info-background);--pds-banner-foreground:var(--pds-color-banner-info-foreground)}.pds-banner--warning{--pds-banner-background:var(--pds-color-banner-warning-background);--pds-banner-foreground:var(--pds-color-banner-warning-foreground)}.pds-banner--dismissing,.pds-banner--fading{animation:hideBannerAnimation .3s ease-in;animation-fill-mode:forwards}@keyframes hideBannerAnimation{to{opacity:0}0%{opacity:1}}
1
+ .pds-banner-group{--pds-banner-background:var(--pds-color-banner-info-background);--pds-banner-foreground:var(--pds-color-banner-info-foreground);--pds-banner-height:4.678rem;--pds-nav-button-size:1.953rem;min-height:var(--pds-banner-height);position:relative}@media (min-width:641px){.pds-banner-group{--pds-banner-height:3.815rem}}.pds-banner--critical,.pds-banner-group--critical{--pds-banner-background:var(--pds-color-banner-critical-background);--pds-banner-foreground:var(--pds-color-banner-critical-foreground)}.pds-banner--info,.pds-banner-group--info{--pds-banner-background:var(--pds-color-banner-info-background);--pds-banner-foreground:var(--pds-color-banner-info-foreground)}.pds-banner--warning,.pds-banner-group--warning{--pds-banner-background:var(--pds-color-banner-warning-background);--pds-banner-foreground:var(--pds-color-banner-warning-foreground)}.pds-banner{background:var(--pds-banner-background);box-sizing:border-box;color:var(--pds-banner-foreground);font-size:.833rem;height:var(--pds-banner-height);justify-content:space-between;padding-inline:1.953rem;position:absolute;width:100%}.pds-banner,.pds-banner__content{align-items:center;display:flex;gap:.8rem}.pds-banner__icon{flex-grow:0;flex-shrink:0}.pds-banner__message p{all:unset}.pds-banner__message a{color:var(--pds-banner-foreground);padding:.125rem;text-decoration:underline}.pds-banner__message a:hover{background-color:hsla(0,0%,100%,.2);color:var(--pds-banner-foreground);text-decoration:none;transition:all .2s ease-in-out 0s}.pds-banner__message a:focus-visible{outline:.0625rem solid var(--pds-banner-foreground);outline-offset:0}.pds-banner__dismiss-button{all:unset;border-radius:.1875rem;cursor:pointer;padding:.328rem .512rem;transition:all .2s ease-in-out 0s}.pds-banner__dismiss-button:hover{background-color:hsla(0,0%,100%,.2)}.pds-banner__dismiss-button:focus-visible{outline:.0625rem solid var(--pds-banner-foreground);outline-offset:0}.pds-banner-group--multiple .pds-banner{padding-inline:3.052rem}.pds-banner__navigation{display:flex;justify-content:space-between;width:100%}button.pds-banner__nav-button{color:var(--pds-banner-foreground);height:var(--pds-nav-button-size);margin-block:1.375rem;margin-inline:.512rem;min-width:unset;padding:0;transition:all .2s ease-in-out 0s;width:var(--pds-nav-button-size);z-index:calc(var(--pds-z-index-notifications) + 10)}@media (min-width:641px){button.pds-banner__nav-button{margin-block:.9375rem}}button.pds-banner__nav-button:hover:enabled{background-color:hsla(0,0%,100%,.2)}button.pds-banner__nav-button:focus-visible{outline:.0625rem solid var(--pds-banner-foreground);outline-offset:0}.pds-banner--dismissing,.pds-banner--fading{animation:hideBannerAnimation .2s ease-in;animation-fill-mode:forwards}@keyframes hideBannerAnimation{to{opacity:0}0%{opacity:1}}
package/_dist/css/component-css/pds-dropdown-menu.css CHANGED
@@ -1,2 +1,2 @@
1
1
  .pds-dropdown-menu{position:relative}.pds-dropdown-menu__heading{font-size:1rem;font-weight:600;margin-block-end:.64rem}.pds-dropdown-menu__heading a{color:var(--pds-color-text-default);text-decoration:none}.pds-dropdown-menu__heading a:hover{color:var(--pds-color-interactive-link-hover)}.pds-dropdown-menu__trigger{align-items:center;background-color:var(--pds-color-input-background-default);border:.0625rem solid var(--pds-color-input-border-default);border-radius:.1875rem;color:var(--pds-color-input-foreground-default);cursor:pointer;display:flex;height:2.441rem;justify-content:space-between;padding:0 .64rem;text-align:left;width:100%}.pds-dropdown-menu__trigger:focus-visible{outline:.0625rem solid var(--pds-color-interactive-focus)}.pds-dropdown-menu__trigger-icon{transition:transform .2s ease-in-out 0s}.pds-dropdown-menu__trigger[aria-expanded=true]
2
- .pds-dropdown-menu__trigger-icon{transform:rotate(180deg);transition:transform .2s ease-in-out 0s}.pds-dropdown-menu__dropdown{background-color:var(--pds-color-menu-background);border-radius:.1875rem;box-shadow:var(--pds-elevation-active);list-style-type:none;margin-block-start:.64rem;max-height:30rem;overflow-y:scroll;padding:0;position:absolute;width:100%;z-index:200}.pds-dropdown-menu__dropdown a{color:var(--pds-color-menu-item-foreground);display:flex;padding:.64rem 1rem;text-decoration:none}.pds-dropdown-menu__dropdown:focus{outline:none}.pds-dropdown-menu__item:focus{background-color:var(--pds-color-menu-item-background-hover);outline:none}.pds-dropdown-menu__item--second-level a{padding-inline-start:1.953rem}.pds-dropdown-menu__item--third-level a{padding-inline-start:2.953rem}.pds-dropdown-menu__active-label{display:flex;padding-inline-start:.25rem}.pds-dropdown-menu__item--active{align-items:center;background-color:var(--pds-color-side-nav-background-hover);color:var(--pds-color-interactive-link-hover);display:flex;justify-content:space-between}.pds-dropdown-menu__active-icon{flex-shrink:0;margin-inline:1rem}
2
+ .pds-dropdown-menu__trigger-icon{transform:rotate(180deg);transition:transform .2s ease-in-out 0s}.pds-dropdown-menu__dropdown{background-color:var(--pds-color-menu-background);border-radius:.1875rem;box-shadow:var(--pds-elevation-active);list-style-type:none;margin-block-start:.64rem;max-height:30rem;overflow-y:scroll;padding:0;position:absolute;width:100%;z-index:200}.pds-dropdown-menu__dropdown a{color:var(--pds-color-menu-item-foreground);display:flex;padding:.64rem 1rem;text-decoration:none}.pds-dropdown-menu__dropdown:focus{outline:none}.pds-dropdown-menu__item:focus,.pds-dropdown-menu__item:hover{background-color:var(--pds-color-menu-item-background-hover);outline:none}.pds-dropdown-menu__item--second-level a{padding-inline-start:2.441rem}.pds-dropdown-menu__item--third-level a{padding-inline-start:4.004rem}.pds-dropdown-menu__active-label{display:flex;padding-inline-start:.25rem}.pds-dropdown-menu__item--active{align-items:center;background-color:var(--pds-color-menu-item-background-active);color:var(--pds-color-foreground-default);display:flex;justify-content:space-between}.pds-dropdown-menu__active-icon{flex-shrink:0;margin-inline:1rem}