@pantheon-systems/pds-toolkit-react 2.0.0-alpha.81 → 2.0.0-alpha.83

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 (49) hide show
  1. package/codemods/v1-to-v2/mappings.json +12 -4
  2. package/dist/components/Table/Table.d.ts +20 -11
  3. package/dist/components/badges/StatusBadge/StatusBadge.d.ts +1 -1
  4. package/dist/components/buttons/SegmentedButton/SegmentedButton.d.ts +5 -5
  5. package/dist/components/icons/Icon/generated-icon-data.d.ts +1 -1
  6. package/dist/components/{Avatar → identity/Avatar}/Avatar.d.ts +3 -2
  7. package/dist/components/identity/AvatarLabel/AvatarLabel.d.ts +42 -0
  8. package/dist/components/{IdentityBlock → identity/IdentityBlock}/IdentityBlock.d.ts +1 -1
  9. package/dist/components/inputs/Checkbox/Checkbox.d.ts +11 -1
  10. package/dist/components/inputs/CheckboxFieldset/CheckboxFieldset.d.ts +12 -2
  11. package/dist/components/inputs/CheckboxGroup/CheckboxGroup.d.ts +12 -2
  12. package/dist/components/inputs/Combobox/Combobox.d.ts +11 -1
  13. package/dist/components/inputs/ComboboxMultiselect/ComboboxMultiselect.d.ts +12 -2
  14. package/dist/components/inputs/Datepicker/Datepicker.d.ts +12 -4
  15. package/dist/components/inputs/FileUpload/FileUpload.d.ts +11 -1
  16. package/dist/components/inputs/RadioGroup/RadioGroup.d.ts +12 -2
  17. package/dist/components/inputs/Select/Select.d.ts +20 -3
  18. package/dist/components/inputs/Switch/Switch.d.ts +11 -1
  19. package/dist/components/inputs/TagsInput/TagsInput.d.ts +11 -1
  20. package/dist/components/inputs/TextInput/TextInput.d.ts +11 -1
  21. package/dist/components/inputs/Textarea/Textarea.d.ts +11 -1
  22. package/dist/components/inputs/Timepicker/Timepicker.d.ts +12 -2
  23. package/dist/components/inputs/input-utilities.d.ts +5 -0
  24. package/dist/components/navigation/ButtonNav/ButtonNav.d.ts +5 -5
  25. package/dist/components/overlays/Modal/Modal.d.ts +3 -1
  26. package/dist/components/panels/PanelList/PanelRow.d.ts +9 -1
  27. package/dist/css/component-css/pds-avatar-label.css +1 -0
  28. package/dist/css/component-css/pds-avatar.css +1 -1
  29. package/dist/css/component-css/pds-index.css +9 -9
  30. package/dist/css/component-css/pds-input-utilities.css +1 -1
  31. package/dist/css/component-css/pds-link-new-window.css +1 -1
  32. package/dist/css/component-css/pds-modal.css +1 -1
  33. package/dist/css/component-css/pds-panel-list.css +1 -1
  34. package/dist/css/component-css/pds-side-nav-global.css +1 -1
  35. package/dist/css/component-css/pds-stat-panel.css +1 -1
  36. package/dist/css/component-css/pds-status-badge.css +1 -1
  37. package/dist/css/layout-css/pds-sidebar-layout.css +2 -2
  38. package/dist/css/pds-components.css +9 -9
  39. package/dist/css/pds-core.css +1 -1
  40. package/dist/index.css +1 -1
  41. package/dist/index.d.ts +3 -2
  42. package/dist/index.js +2295 -2244
  43. package/dist/index.js.map +1 -1
  44. package/dist/index.source.d.ts +3 -2
  45. package/dist/layouts/SidebarLayout/SidebarLayout.d.ts +6 -1
  46. package/dist/libs/types/layout-types.d.ts +1 -0
  47. package/dist/utilities/FlexContainer/FlexContainer.d.ts +1 -1
  48. package/dist/utilities/grid/Grid.d.ts +2 -4
  49. package/package.json +1 -1
@@ -1,4 +1,5 @@
1
1
  import { ComponentPropsWithoutRef, ReactNode } from 'react';
2
+ import { ContainerStackBreakpoint } from '../../../libs/types/layout-types';
2
3
  import './panel-list.css';
3
4
  /**
4
5
  * Prop types for PanelRow
@@ -20,8 +21,15 @@ export interface PanelRowProps extends ComponentPropsWithoutRef<'li'> {
20
21
  * Whether the panel row is expandable.
21
22
  */
22
23
  isExpandable?: boolean;
24
+ /**
25
+ * Width, based on the row's own available space (not the viewport), below
26
+ * which items-left/items-right stack instead of sitting side by side.
27
+ * Uses the same scale as Grid's `stackBelow`: s = 30rem, m = 48rem,
28
+ * l = 60rem, xl = 75rem.
29
+ */
30
+ stackBelow?: ContainerStackBreakpoint;
23
31
  }
24
32
  /**
25
33
  * PanelRow UI component
26
34
  */
27
- export declare const PanelRow: ({ children, className, expandButtonAriaLabel, isExpandable, ...props }: PanelRowProps) => import("react/jsx-runtime").JSX.Element;
35
+ export declare const PanelRow: ({ children, className, expandButtonAriaLabel, isExpandable, stackBelow, ...props }: PanelRowProps) => import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1 @@
1
+ @layer pds-v1, pds-v2;@layer pds-v2{.pds-avatar-label{align-items:center;display:flex;min-width:0}.pds-avatar-label__label{color:var(--pds-color-foreground-default);font-family:var(--pds-typography-ff-default);font-weight:var(--pds-typography-fw-medium);line-height:1;overflow:hidden;padding-block:.15em;text-overflow:ellipsis;transform:translateY(-.1em);white-space:nowrap}.pds-avatar-label--xs{gap:var(--pds-spacing-2xs)}.pds-avatar-label--xs .pds-avatar-label__label{font-size:var(--pds-typography-size-xs)}.pds-avatar-label--s{gap:var(--pds-spacing-2xs)}.pds-avatar-label--s .pds-avatar-label__label{font-size:var(--pds-typography-size-s)}.pds-avatar-label--m{gap:var(--pds-spacing-xs)}.pds-avatar-label--m .pds-avatar-label__label{font-size:var(--pds-typography-size-s)}.pds-avatar-label__link{align-items:inherit;color:var(--pds-color-foreground-default);display:flex;gap:inherit;min-width:0;text-decoration:none}.pds-avatar-label__link:hover{cursor:pointer;text-decoration:none}.pds-avatar-label__link:hover .pds-avatar-label__label{color:var(--pds-color-interactive-link-default)}.pds-avatar-label__link:hover .pds-avatar__content{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-link-default);outline-offset:2px}.pds-avatar-label__link:focus-visible{border-radius:var(--pds-border-radius-container);outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:2px;text-decoration:none}}
@@ -1 +1 @@
1
- @layer pds-v1, pds-v2;@layer pds-v2{.pds-avatar{--avatar-size:1.5rem;--avatar-icon-size:0.875rem;align-items:center;display:inline-flex;justify-content:center;vertical-align:top}.pds-avatar,.pds-avatar__content{border-radius:100%;height:var(--avatar-size);width:var(--avatar-size)}.pds-avatar__content{display:flex}.pds-avatar__content--link:hover{cursor:pointer;opacity:.8}.pds-avatar__content--link:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:2px}.pds-avatar--image .pds-avatar__image{border-radius:100%;height:100%;object-fit:cover;width:100%}.pds-avatar__user-icon{color:#fff;height:var(--avatar-icon-size);scale:.92;width:var(--avatar-icon-size)}.pds-avatar--square,.pds-avatar--square .pds-avatar__content,.pds-avatar--square .pds-avatar__image{border-radius:var(--pds-border-radius-default)}.pds-avatar--xs{--avatar-size:1rem;--avatar-icon-size:0.5625rem}.pds-avatar--m{--avatar-size:2rem;--avatar-icon-size:1.125rem}.pds-avatar--l{--avatar-size:2.5rem;--avatar-icon-size:1.375rem}}
1
+ @layer pds-v1, pds-v2;@layer pds-v2{.pds-avatar{--avatar-size:1.25rem;--avatar-icon-size:0.6875rem;align-items:center;display:inline-flex;justify-content:center;vertical-align:top}.pds-avatar,.pds-avatar__content{border-radius:100%;height:var(--avatar-size);width:var(--avatar-size)}.pds-avatar__content{display:flex}.pds-avatar__content--link:hover{cursor:pointer;opacity:.8}.pds-avatar__content--link:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:2px}.pds-avatar--image .pds-avatar__image{border-radius:100%;height:100%;object-fit:cover;width:100%}.pds-avatar__user-icon{color:#fff;height:var(--avatar-icon-size);scale:.92;width:var(--avatar-icon-size)}.pds-avatar--square,.pds-avatar--square .pds-avatar__content,.pds-avatar--square .pds-avatar__image{border-radius:var(--pds-border-radius-default)}.pds-avatar--xs{--avatar-size:1rem;--avatar-icon-size:0.5625rem}.pds-avatar--m{--avatar-size:1.5rem;--avatar-icon-size:0.875rem}.pds-avatar--l{--avatar-size:2rem;--avatar-icon-size:1.125rem}.pds-avatar--xl{--avatar-size:2.5rem;--avatar-icon-size:1.375rem}}