@pantheon-systems/pds-toolkit-react 2.0.0-alpha.8 → 2.0.0-alpha.81
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/bin/pds-codemod.cjs +58 -0
- package/codemods/v1-to-v2/css-token-renames.js +186 -0
- package/codemods/v1-to-v2/mappings.json +1787 -0
- package/codemods/v1-to-v2/transforms/__testfixtures__/component-renames/basic.input.tsx +33 -0
- package/codemods/v1-to-v2/transforms/__testfixtures__/component-renames/basic.output.tsx +33 -0
- package/codemods/v1-to-v2/transforms/__testfixtures__/component-renames/only.input.tsx +8 -0
- package/codemods/v1-to-v2/transforms/__testfixtures__/component-renames/only.output.tsx +8 -0
- package/codemods/v1-to-v2/transforms/__testfixtures__/css-class-removals/basic.input.tsx +55 -0
- package/codemods/v1-to-v2/transforms/__testfixtures__/css-class-removals/basic.output.tsx +55 -0
- package/codemods/v1-to-v2/transforms/__testfixtures__/css-class-renames/basic.input.tsx +60 -0
- package/codemods/v1-to-v2/transforms/__testfixtures__/css-class-renames/basic.output.tsx +60 -0
- package/codemods/v1-to-v2/transforms/__testfixtures__/icon-name-updates/basic.input.tsx +35 -0
- package/codemods/v1-to-v2/transforms/__testfixtures__/icon-name-updates/basic.output.tsx +35 -0
- package/codemods/v1-to-v2/transforms/__testfixtures__/icon-name-updates/only.input.tsx +8 -0
- package/codemods/v1-to-v2/transforms/__testfixtures__/icon-name-updates/only.output.tsx +8 -0
- package/codemods/v1-to-v2/transforms/__testfixtures__/prop-renames/basic.input.tsx +28 -0
- package/codemods/v1-to-v2/transforms/__testfixtures__/prop-renames/basic.output.tsx +28 -0
- package/codemods/v1-to-v2/transforms/__testfixtures__/prop-renames/only.input.tsx +8 -0
- package/codemods/v1-to-v2/transforms/__testfixtures__/prop-renames/only.output.tsx +8 -0
- package/codemods/v1-to-v2/transforms/__testfixtures__/prop-value-standardization/basic.input.tsx +37 -0
- package/codemods/v1-to-v2/transforms/__testfixtures__/prop-value-standardization/basic.output.tsx +37 -0
- package/codemods/v1-to-v2/transforms/__testfixtures__/prop-value-standardization/only.input.tsx +21 -0
- package/codemods/v1-to-v2/transforms/__testfixtures__/prop-value-standardization/only.output.tsx +21 -0
- package/codemods/v1-to-v2/transforms/__testfixtures__/removed-prop-values/basic.input.tsx +60 -0
- package/codemods/v1-to-v2/transforms/__testfixtures__/removed-prop-values/basic.output.tsx +51 -0
- package/codemods/v1-to-v2/transforms/__testfixtures__/removed-prop-values/only.input.tsx +8 -0
- package/codemods/v1-to-v2/transforms/__testfixtures__/removed-prop-values/only.output.tsx +8 -0
- package/codemods/v1-to-v2/transforms/__tests__/component-renames.test.js +15 -0
- package/codemods/v1-to-v2/transforms/__tests__/css-class-removals.test.js +6 -0
- package/codemods/v1-to-v2/transforms/__tests__/css-class-renames.test.js +6 -0
- package/codemods/v1-to-v2/transforms/__tests__/icon-name-updates.test.js +15 -0
- package/codemods/v1-to-v2/transforms/__tests__/prop-renames.test.js +15 -0
- package/codemods/v1-to-v2/transforms/__tests__/prop-value-standardization.test.js +16 -0
- package/codemods/v1-to-v2/transforms/__tests__/removed-prop-values.test.js +15 -0
- package/codemods/v1-to-v2/transforms/component-renames.js +166 -0
- package/codemods/v1-to-v2/transforms/css-class-removals.js +262 -0
- package/codemods/v1-to-v2/transforms/css-class-renames.js +178 -0
- package/codemods/v1-to-v2/transforms/icon-name-updates.js +124 -0
- package/codemods/v1-to-v2/transforms/prop-renames.js +109 -0
- package/codemods/v1-to-v2/transforms/prop-value-standardization.js +143 -0
- package/codemods/v1-to-v2/transforms/removed-prop-values.js +206 -0
- package/dist/components/Avatar/Avatar.d.ts +5 -1
- package/dist/components/Callout/Callout.d.ts +6 -2
- package/dist/components/CodeBlock/CodeBlock.d.ts +10 -5
- package/dist/components/CodeBlock/code-examples.d.ts +2 -1
- package/dist/components/CodeBlock/prism-setup.d.ts +2 -0
- package/dist/components/CodeBlock/themes/index.d.ts +1 -2
- package/dist/components/CodeBlock/themes/{pdsDark.d.ts → pds.d.ts} +1 -1
- package/dist/components/ComparisonList/ComparisonList.d.ts +6 -1
- package/dist/components/Dropdown/Dropdown.d.ts +257 -0
- package/dist/components/Dropdown/DropdownSelectedIcon.d.ts +7 -0
- package/dist/components/FileDiff/FileDiff.d.ts +2 -2
- package/dist/components/IdentityBlock/IdentityBlock.d.ts +37 -0
- package/dist/components/PantheonLogo/PantheonLogo.d.ts +5 -4
- package/dist/components/Popover/Popover.d.ts +5 -1
- package/dist/components/ResultCount/ResultCount.d.ts +53 -0
- package/dist/components/RowActionsMenu/RowActionsMenu.d.ts +46 -0
- package/dist/components/SiteFooter/SiteFooter.d.ts +45 -0
- package/dist/components/{navigation/DashboardSearch/DashboardSearch.d.ts → SiteSearch/SiteSearch.d.ts} +6 -11
- package/dist/components/SortableList/SortableList.d.ts +8 -0
- package/dist/components/SortableList/SortableListHeader.d.ts +7 -0
- package/dist/components/SortableList/SortableRow.d.ts +16 -0
- package/dist/components/SortableList/sortable-utils.d.ts +19 -0
- package/dist/components/SortableList/types.d.ts +142 -0
- package/dist/components/SortableList/useSortableTree.d.ts +18 -0
- package/dist/components/StatPanel/StatPanel.d.ts +70 -0
- package/dist/components/{RefreshChecker/RefreshChecker.d.ts → StatusChecker/StatusChecker.d.ts} +6 -19
- package/dist/components/StatusIndicator/StatusIndicator.d.ts +7 -4
- package/dist/components/Table/Table.d.ts +356 -17
- package/dist/components/TableOfContents/TableOfContents.d.ts +1 -5
- package/dist/components/Tag/Tag.d.ts +21 -3
- package/dist/components/ThemeSwitcher/ThemeSwitcher.d.ts +29 -8
- package/dist/components/Tooltip/Tooltip.d.ts +6 -2
- package/dist/components/UtilityBar/UtilityBar.d.ts +26 -0
- package/dist/components/badges/Badge/Badge.d.ts +10 -3
- package/dist/components/badges/StatusBadge/StatusBadge.d.ts +2 -1
- package/dist/components/buttons/Button/Button.d.ts +15 -0
- package/dist/components/buttons/ButtonLink/ButtonLink.d.ts +1 -3
- package/dist/components/buttons/ClipboardButton/ClipboardButton.d.ts +5 -1
- package/dist/components/buttons/CloseButton/CloseButton.d.ts +2 -2
- package/dist/components/buttons/FilterButton/FilterButton.d.ts +92 -0
- package/dist/components/buttons/IconButton/IconButton.d.ts +13 -1
- package/dist/components/buttons/MenuButton/MenuButton.d.ts +53 -19
- package/dist/components/buttons/SSOButton/SSOButton.d.ts +9 -1
- package/dist/components/buttons/SegmentedButton/SegmentedButton.d.ts +44 -8
- package/dist/components/buttons/SelectButton/SelectButton.d.ts +81 -0
- package/dist/components/buttons/SplitButton/SplitButton.d.ts +7 -1
- package/dist/components/cards/ActionCard/ActionCard.d.ts +64 -0
- package/dist/components/cards/Card/Card.d.ts +10 -4
- package/dist/components/cards/CardSelect/CardSelect.d.ts +100 -0
- package/dist/components/charts/BarChart/BarChart.d.ts +21 -0
- package/dist/components/charts/LineChart/LineChart.d.ts +22 -0
- package/dist/components/charts/PieChart/PieChart.d.ts +59 -0
- package/dist/components/charts/ProportionBar/ProportionBar.d.ts +57 -0
- package/dist/components/charts/shared/ChartAccessibleTable.d.ts +17 -0
- package/dist/components/charts/shared/ChartLegend.d.ts +31 -0
- package/dist/components/charts/shared/ChartSkeleton.d.ts +11 -0
- package/dist/components/charts/shared/chart-colors.d.ts +30 -0
- package/dist/components/charts/shared/chart-styles.d.ts +24 -0
- package/dist/components/charts/shared/formatters.d.ts +12 -0
- package/dist/components/charts/shared/types.d.ts +128 -0
- package/dist/components/empty-states/HorizontalEmptyState/HorizontalEmptyState.d.ts +13 -8
- package/dist/components/empty-states/VerticalEmptyState/VerticalEmptyState.d.ts +3 -2
- package/dist/components/icons/Icon/Icon.d.ts +2 -2
- package/dist/components/icons/Icon/custom-icons.d.ts +1 -1
- package/dist/components/icons/Icon/generated-icon-data.d.ts +226 -16
- package/dist/components/icons/PaymentIcon/PaymentIcon.d.ts +7 -3
- package/dist/components/icons/PlatformIcon/PlatformIcon.d.ts +6 -6
- package/dist/components/inputs/Checkbox/Checkbox.d.ts +3 -3
- package/dist/components/inputs/CheckboxFieldset/CheckboxFieldset.d.ts +9 -1
- package/dist/components/inputs/CheckboxGroup/CheckboxGroup.d.ts +9 -1
- package/dist/components/inputs/Combobox/Combobox.d.ts +17 -7
- package/dist/components/inputs/ComboboxMultiselect/ComboboxMultiselect.d.ts +10 -5
- package/dist/components/inputs/Datepicker/Datepicker.d.ts +217 -14
- package/dist/components/inputs/FileUpload/FileUpload.d.ts +6 -1
- package/dist/components/inputs/RadioGroup/RadioGroup.d.ts +10 -2
- package/dist/components/inputs/Select/Select.d.ts +11 -2
- package/dist/components/inputs/Switch/Switch.d.ts +5 -5
- package/dist/components/inputs/TagsInput/TagsInput.d.ts +6 -1
- package/dist/components/inputs/TextInput/TextInput.d.ts +4 -4
- package/dist/components/inputs/Textarea/Textarea.d.ts +2 -2
- package/dist/components/inputs/Timepicker/Timepicker.d.ts +94 -0
- package/dist/components/inputs/input-utilities.d.ts +12 -2
- package/dist/components/{CTALink → links/CTALink}/CTALink.d.ts +2 -2
- package/dist/components/{LinkNewWindow → links/LinkNewWindow}/LinkNewWindow.d.ts +1 -1
- package/dist/components/loading-indicators/Spinner/Spinner.d.ts +5 -4
- package/dist/components/navigation/ButtonNav/ButtonNav.d.ts +11 -5
- package/dist/components/navigation/DropdownMenu/DropdownMenu.d.ts +1 -0
- package/dist/components/navigation/Navbar/Navbar.d.ts +9 -21
- package/dist/components/navigation/SideNav/SideNav.d.ts +7 -1
- package/dist/components/navigation/SideNavGlobal/SideNavGlobal.d.ts +5 -15
- package/dist/components/navigation/SideNavGlobal/SideNavGlobalItem.d.ts +15 -1
- package/dist/components/navigation/SiteMenu/SiteMenu.d.ts +26 -0
- package/dist/components/navigation/SiteMenu/SiteMenuDropdown.d.ts +23 -0
- package/dist/components/navigation/TreeNav/TreeNav.d.ts +48 -0
- package/dist/components/navigation/UserMenu/UserMenu.d.ts +31 -5
- package/dist/components/navigation/WorkspaceSelector/WorkspaceSelector.d.ts +13 -16
- package/dist/components/navigation/navigation-utilities.d.ts +15 -2
- package/dist/components/notifications/SectionMessage/SectionMessage.d.ts +12 -4
- package/dist/components/notifications/Toaster/Toast.d.ts +12 -1
- package/dist/components/notifications/Toaster/Toaster.d.ts +16 -7
- package/dist/components/notifications/Toaster/useToast.d.ts +2 -0
- package/dist/components/overlays/BottomSheet/BottomSheet.d.ts +66 -0
- package/dist/components/overlays/BulkActionBar/BulkActionBar.d.ts +48 -0
- package/dist/components/overlays/Drawer/Drawer.d.ts +58 -0
- package/dist/components/overlays/FullScreenOverlay/FullScreenOverlay.d.ts +45 -0
- package/dist/components/{Modal → overlays/Modal}/Modal.d.ts +1 -1
- package/dist/components/{Pagination → pagination/Pagination}/Pagination.d.ts +7 -2
- package/dist/components/pagination/PaginationChapter/PaginationChapter.d.ts +55 -0
- package/dist/components/pagination/PaginationCompact/PaginationCompact.d.ts +67 -0
- package/dist/components/panels/ExpansionPanel/ExpansionPanel.d.ts +1 -2
- package/dist/components/panels/ExpansionPanelGroup/ExpansionPanelGroup.d.ts +1 -2
- package/dist/components/panels/FeaturePanel/FeaturePanel.d.ts +72 -0
- package/dist/components/panels/Panel/Panel.d.ts +4 -21
- package/dist/components/panels/PanelList/PanelList.d.ts +1 -1
- package/dist/components/panels/PanelStack/PanelStack.d.ts +19 -0
- package/dist/components/panels/WidgetPanel/WidgetPanel.d.ts +39 -0
- package/dist/components/progress-indicators/ProgressBar/ProgressBar.d.ts +4 -5
- package/dist/components/progress-indicators/ProgressRing/ProgressRing.d.ts +12 -4
- package/dist/components/{FlowSteps/FlowSteps.d.ts → steppers/StepList/StepList.d.ts} +7 -7
- package/dist/css/component-css/pds-action-card.css +1 -0
- package/dist/css/component-css/pds-avatar.css +1 -1
- package/dist/css/component-css/pds-badge.css +1 -1
- package/dist/css/component-css/pds-banner.css +1 -1
- package/dist/css/component-css/pds-bar-chart.css +1 -0
- package/dist/css/component-css/pds-bottom-sheet.css +1 -0
- package/dist/css/component-css/pds-branch-diff.css +1 -1
- package/dist/css/component-css/pds-breadcrumb.css +1 -1
- package/dist/css/component-css/pds-bulk-action-bar.css +1 -0
- package/dist/css/component-css/pds-button-link.css +1 -1
- package/dist/css/component-css/pds-button-nav.css +1 -1
- package/dist/css/component-css/pds-button.css +46 -14
- package/dist/css/component-css/pds-callout.css +1 -1
- package/dist/css/component-css/pds-card-select.css +2 -0
- package/dist/css/component-css/pds-card.css +1 -1
- package/dist/css/component-css/pds-chart-legend.css +1 -0
- package/dist/css/component-css/pds-chart-wrapper.css +1 -0
- package/dist/css/component-css/pds-checkbox-group.css +1 -1
- package/dist/css/component-css/pds-checkbox.css +1 -1
- package/dist/css/component-css/pds-close-button.css +1 -1
- package/dist/css/component-css/pds-code-block-legacy.css +1 -1
- package/dist/css/component-css/pds-code-block.css +1 -1
- package/dist/css/component-css/pds-combobox-multiselect.css +3 -2
- package/dist/css/component-css/pds-combobox.css +1 -1
- package/dist/css/component-css/pds-compact-empty-state.css +1 -1
- package/dist/css/component-css/pds-comparison-list.css +1 -1
- package/dist/css/component-css/pds-cta-link.css +1 -1
- package/dist/css/component-css/pds-datepicker.css +1 -3
- package/dist/css/component-css/pds-drawer.css +1 -0
- package/dist/css/component-css/pds-dropdown-menu.css +2 -2
- package/dist/css/component-css/pds-dropdown.css +3 -0
- package/dist/css/component-css/pds-expansion-panel-group.css +1 -1
- package/dist/css/component-css/pds-expansion-panel.css +2 -1
- package/dist/css/component-css/pds-feature-panel.css +15 -0
- package/dist/css/component-css/pds-file-diff.css +1 -1
- package/dist/css/component-css/pds-file-upload.css +3 -3
- package/dist/css/component-css/pds-filter-button.css +1 -0
- package/dist/css/component-css/pds-full-screen-overlay.css +1 -0
- package/dist/css/component-css/pds-horizontal-empty-state.css +1 -1
- package/dist/css/component-css/pds-icon-button.css +22 -14
- package/dist/css/component-css/pds-icon-story-only.css +1 -1
- package/dist/css/component-css/pds-icon.css +1 -1
- package/dist/css/component-css/pds-identity-block.css +1 -0
- package/dist/css/component-css/pds-index.css +187 -57
- package/dist/css/component-css/pds-inline-message.css +1 -1
- package/dist/css/component-css/pds-input-group.css +1 -1
- package/dist/css/component-css/pds-input-utilities.css +1 -1
- package/dist/css/component-css/pds-line-chart.css +1 -0
- package/dist/css/component-css/pds-link-new-window.css +1 -1
- package/dist/css/component-css/pds-menu-button.css +7 -1
- package/dist/css/component-css/pds-modal.css +1 -1
- package/dist/css/component-css/pds-nav-menu.css +1 -5
- package/dist/css/component-css/pds-navbar.css +4 -1
- package/dist/css/component-css/pds-pagination-chapter.css +3 -0
- package/dist/css/component-css/pds-pagination-compact.css +1 -0
- package/dist/css/component-css/pds-pagination.css +1 -1
- package/dist/css/component-css/pds-panel-list.css +1 -1
- package/dist/css/component-css/pds-panel-stack.css +1 -0
- package/dist/css/component-css/pds-panel.css +2 -1
- package/dist/css/component-css/pds-pantheon-logo.css +1 -1
- package/dist/css/component-css/pds-payment-icon.css +1 -1
- package/dist/css/component-css/pds-picture.css +1 -1
- package/dist/css/component-css/pds-pie-chart.css +1 -0
- package/dist/css/component-css/pds-platform-icon.css +1 -1
- package/dist/css/component-css/pds-popover.css +1 -1
- package/dist/css/component-css/pds-progress-bar.css +1 -1
- package/dist/css/component-css/pds-progress-ring.css +1 -1
- package/dist/css/component-css/pds-proportion-bar.css +1 -0
- package/dist/css/component-css/pds-radio-group.css +1 -1
- package/dist/css/component-css/pds-result-count.css +1 -0
- package/dist/css/component-css/pds-row-actions-menu.css +2 -0
- package/dist/css/component-css/pds-section-message.css +1 -1
- package/dist/css/component-css/pds-segmented-button.css +2 -1
- package/dist/css/component-css/pds-select-button.css +1 -0
- package/dist/css/component-css/pds-select.css +1 -1
- package/dist/css/component-css/pds-side-nav-global.css +3 -5
- package/dist/css/component-css/pds-side-nav.css +3 -1
- package/dist/css/component-css/pds-site-footer.css +1 -1
- package/dist/css/component-css/pds-site-search.css +1 -0
- package/dist/css/component-css/pds-skeleton.css +1 -1
- package/dist/css/component-css/pds-skiplink.css +1 -1
- package/dist/css/component-css/pds-sortable-list.css +8 -0
- package/dist/css/component-css/pds-spinner.css +1 -1
- package/dist/css/component-css/pds-split-button.css +1 -1
- package/dist/css/component-css/pds-sso-button.css +2 -2
- package/dist/css/component-css/pds-stat-panel.css +1 -0
- package/dist/css/component-css/pds-status-badge.css +1 -1
- package/dist/css/component-css/pds-status-checker.css +1 -0
- package/dist/css/component-css/pds-status-indicator.css +1 -1
- package/dist/css/component-css/pds-step-list.css +1 -0
- package/dist/css/component-css/pds-stepper.css +5 -1
- package/dist/css/component-css/pds-switch.css +6 -11
- package/dist/css/component-css/pds-tab-menu.css +2 -2
- package/dist/css/component-css/pds-table-of-contents.css +1 -1
- package/dist/css/component-css/pds-table.css +7 -1
- package/dist/css/component-css/pds-tabs.css +1 -1
- package/dist/css/component-css/pds-tag.css +1 -1
- package/dist/css/component-css/pds-tags-input.css +1 -1
- package/dist/css/component-css/pds-tally.css +1 -1
- package/dist/css/component-css/pds-text-input.css +1 -1
- package/dist/css/component-css/pds-textarea.css +1 -1
- package/dist/css/component-css/pds-theme-switcher.css +1 -1
- package/dist/css/component-css/pds-timepicker.css +1 -0
- package/dist/css/component-css/pds-toaster.css +1 -1
- package/dist/css/component-css/pds-tooltip.css +1 -1
- package/dist/css/component-css/pds-tree-nav.css +1 -0
- package/dist/css/component-css/pds-user-menu-story-only.css +1 -1
- package/dist/css/component-css/pds-user-menu.css +32 -1
- package/dist/css/component-css/pds-utility-bar.css +1 -0
- package/dist/css/component-css/pds-utility-button.css +3 -1
- package/dist/css/component-css/pds-vertical-empty-state.css +1 -1
- package/dist/css/component-css/pds-vertical-stepper.css +1 -1
- package/dist/css/component-css/pds-video-embed.css +1 -1
- package/dist/css/component-css/pds-widget-panel.css +1 -0
- package/dist/css/component-css/pds-workspace-selector.css +23 -1
- package/dist/css/design-tokens/variables.dark.css +371 -340
- package/dist/css/design-tokens/variables.global.css +10 -19
- package/dist/css/design-tokens/variables.light.css +367 -316
- package/dist/css/design-tokens/variables.typography.css +1 -2
- package/dist/css/layout-css/pds-app-layout.css +3 -2
- package/dist/css/layout-css/pds-docs-layout.css +1 -1
- package/dist/css/layout-css/pds-index.css +3 -9
- package/dist/css/layout-css/pds-sidebar-layout.css +13 -0
- package/dist/css/layout-css/pds-stat-panel-group.css +1 -0
- package/dist/css/layout-css/pds-stepper-layout.css +1 -1
- package/dist/css/layout-css/pds-three-item-layout.css +1 -1
- package/dist/css/layout-css/pds-two-item-layout.css +1 -1
- package/dist/css/pds-components.css +187 -57
- package/dist/css/pds-core.css +3 -2
- package/dist/css/pds-layouts.css +3 -9
- package/dist/index.css +5 -1
- package/dist/index.d.ts +103 -7
- package/dist/index.js +13227 -4807
- package/dist/index.js.map +1 -1
- package/dist/index.source.d.ts +53 -41
- package/dist/layouts/AppLayout/AppLayout.d.ts +85 -10
- package/dist/layouts/DocsLayout/DocsLayout.d.ts +9 -7
- package/dist/layouts/SidebarLayout/SidebarLayout.d.ts +36 -7
- package/dist/layouts/StatPanelGroup/StatPanelGroup.d.ts +32 -0
- package/dist/layouts/StepperLayout/StepperLayout.d.ts +13 -1
- package/dist/layouts/ThreeItemLayout/ThreeItemLayout.d.ts +3 -3
- package/dist/layouts/TwoItemLayout/TwoItemLayout.d.ts +3 -3
- package/dist/libs/components/NavAccordion/NavAccordion.d.ts +27 -0
- package/dist/libs/components/NestedOverlayContext.d.ts +14 -0
- package/dist/libs/components/StatusDot/StatusDot.d.ts +15 -0
- package/dist/libs/components/useOverlayZIndex.d.ts +16 -0
- package/dist/libs/components/utils.d.ts +1 -1
- package/dist/libs/types/custom-types.d.ts +11 -5
- package/dist/libs/types/layout-types.d.ts +5 -1
- package/dist/libs/types/navigation-types.d.ts +17 -1
- package/dist/svg/anglesDown.svg +3 -0
- package/dist/svg/anglesUp.svg +3 -0
- package/dist/svg/arrowDownWideShort.svg +3 -0
- package/dist/svg/arrowUpShortWide.svg +3 -0
- package/dist/svg/barsStaggered.svg +3 -0
- package/dist/svg/bookmark.svg +3 -0
- package/dist/svg/bookmarkSolid.svg +3 -0
- package/dist/svg/box.svg +3 -0
- package/dist/svg/circleExclamationSolid.svg +3 -0
- package/dist/svg/circleHalfStroke.svg +3 -0
- package/dist/svg/circleInfoSolid.svg +3 -0
- package/dist/svg/circleQuestionSolid.svg +3 -0
- package/dist/svg/claude.svg +3 -0
- package/dist/svg/clock.svg +3 -0
- package/dist/svg/collapseToCenter.svg +3 -0
- package/dist/svg/compress.svg +3 -0
- package/dist/svg/diagramVenn.svg +3 -0
- package/dist/svg/floppyDisk.svg +3 -0
- package/dist/svg/grid.svg +2 -2
- package/dist/svg/grid2.svg +3 -0
- package/dist/svg/landmark.svg +3 -0
- package/dist/svg/move.svg +3 -0
- package/dist/svg/octagonExclamation.svg +3 -0
- package/dist/svg/openai.svg +3 -0
- package/dist/svg/pause.svg +3 -0
- package/dist/svg/penPaintbrush.svg +3 -0
- package/dist/svg/sidebar.svg +3 -0
- package/dist/svg/slider.svg +3 -0
- package/dist/svg/squareDashed.svg +3 -0
- package/dist/svg/tableColumns.svg +3 -0
- package/dist/svg/userSolid.svg +3 -0
- package/dist/{layouts → utilities}/FlexContainer/FlexContainer.d.ts +6 -6
- package/dist/utilities/GlobalWrapper/GlobalWrapper.d.ts +35 -0
- package/dist/utilities/auto-grid/AutoGrid.d.ts +48 -0
- package/dist/utilities/context-providers/ThemeContext/ThemeContext.d.ts +113 -0
- package/dist/utilities/grid/Grid.d.ts +58 -0
- package/dist/utilities/grid/GridItem.d.ts +57 -0
- package/dist/utilities/hooks/useDropdown/index.d.ts +1 -0
- package/dist/utilities/hooks/useDropdown/useDropdown.d.ts +148 -0
- package/dist/utilities/hooks/useIsMobile/useIsMobile.d.ts +16 -0
- package/dist/utilities/hooks/useKeyPress/useKeyPress.d.ts +6 -0
- package/dist/utilities/hooks/useKeyboardShortcut/useKeyboardShortcut.d.ts +29 -0
- package/package.json +78 -46
- package/tailwind/README.md +9 -0
- package/tailwind/v3/preset.cjs +20 -0
- package/tailwind/v4/theme.css +19 -0
- package/dist/components/CTASlice/CTASlice.d.ts +0 -43
- package/dist/components/CodeBlock/themes/pdsLight.d.ts +0 -2
- package/dist/components/DashboardStat/DashboardStat.d.ts +0 -28
- package/dist/components/PullQuote/PullQuote.d.ts +0 -34
- package/dist/components/SiteDashboardHeading/SiteDashboardHeading.d.ts +0 -62
- package/dist/components/SocialLinks/SocialLinks.d.ts +0 -23
- package/dist/components/cards/CardHeading/CardHeading.d.ts +0 -31
- package/dist/components/cards/CardSelectGroup/CardSelectGroup.d.ts +0 -60
- package/dist/components/cards/EmptyStateCard/EmptyStateCard.d.ts +0 -36
- package/dist/components/cards/LinksCard/LinksCard.d.ts +0 -29
- package/dist/components/cards/LinksCard/links-card-sample-data.d.ts +0 -2
- package/dist/components/cards/NewSiteCard/NewSiteCard.d.ts +0 -61
- package/dist/components/cards/PaymentCard/PaymentCard.d.ts +0 -47
- package/dist/components/cards/PricingCard/PricingCard.d.ts +0 -95
- package/dist/components/cards/SiteCard/SiteCard.d.ts +0 -50
- package/dist/components/footer/FooterHeading/FooterHeading.d.ts +0 -22
- package/dist/components/footer/FooterLinks/FooterLinks.d.ts +0 -26
- package/dist/components/footer/SiteFooter/SiteFooter.d.ts +0 -34
- package/dist/components/footer/SiteFooter/footer-content.d.ts +0 -1
- package/dist/components/navigation/DashboardNav/DashboardNav.d.ts +0 -35
- package/dist/components/navigation/DashboardNav/DashboardNavItem.d.ts +0 -24
- package/dist/components/navigation/NavMenu/NavMenu.d.ts +0 -33
- package/dist/components/navigation/NavMenu/NavMenuDropdown.d.ts +0 -24
- package/dist/components/navigation/SideNavCompact/SideNavCompact.d.ts +0 -53
- package/dist/components/notifications/NotificationHubIcon/NotificationHubIcon.d.ts +0 -38
- package/dist/components/notifications/NotificationsPopover/NotificationsPopover.d.ts +0 -118
- package/dist/components/tiles/AvatarTileList/AvatarTileList.d.ts +0 -28
- package/dist/components/tiles/Tile/Tile.d.ts +0 -42
- package/dist/components/tiles/TileGrid/TileGrid.d.ts +0 -29
- package/dist/css/component-css/pds-avatar-tile-list.css +0 -1
- package/dist/css/component-css/pds-card-heading.css +0 -1
- package/dist/css/component-css/pds-card-select-group.css +0 -1
- package/dist/css/component-css/pds-cta-slice.css +0 -1
- package/dist/css/component-css/pds-dashboard-nav.css +0 -5
- package/dist/css/component-css/pds-dashboard-search.css +0 -1
- package/dist/css/component-css/pds-dashboard-stat.css +0 -1
- package/dist/css/component-css/pds-empty-state-card.css +0 -1
- package/dist/css/component-css/pds-flow-steps.css +0 -1
- package/dist/css/component-css/pds-footer-heading.css +0 -1
- package/dist/css/component-css/pds-footer-links.css +0 -1
- package/dist/css/component-css/pds-links-card.css +0 -1
- package/dist/css/component-css/pds-new-site-card.css +0 -1
- package/dist/css/component-css/pds-notification-hub-icon.css +0 -1
- package/dist/css/component-css/pds-notifications-popover.css +0 -1
- package/dist/css/component-css/pds-payment-card.css +0 -1
- package/dist/css/component-css/pds-pricing-card-local.css +0 -1
- package/dist/css/component-css/pds-pricing-card.css +0 -1
- package/dist/css/component-css/pds-pull-quote.css +0 -1
- package/dist/css/component-css/pds-refresh-checker.css +0 -1
- package/dist/css/component-css/pds-side-nav-compact.css +0 -1
- package/dist/css/component-css/pds-site-card.css +0 -1
- package/dist/css/component-css/pds-site-dashboard-heading.css +0 -1
- package/dist/css/component-css/pds-social-links.css +0 -1
- package/dist/css/component-css/pds-tile.css +0 -1
- package/dist/css/component-css/pds-tiles-common.css +0 -1
- package/dist/css/layout-css/pds-dashboard-global.css +0 -8
- package/dist/css/layout-css/pds-dashboard-inner.css +0 -1
- package/dist/css/layout-css/pds-flex-container.css +0 -1
- package/dist/layouts/DashboardGlobal/DashboardGlobal.d.ts +0 -57
- package/dist/layouts/DashboardInner/DashboardInner.d.ts +0 -30
- package/dist/layouts/GlobalWrapper/GlobalWrapper.d.ts +0 -19
- package/dist/utilities/context-providers/ResponsiveContext/ResponsiveContext.d.ts +0 -6
- /package/dist/components/{Skiplink → links/Skiplink}/Skiplink.d.ts +0 -0
- /package/dist/components/{Picture → media/Picture}/Picture.d.ts +0 -0
- /package/dist/components/{VideoEmbed → media/VideoEmbed}/VideoEmbed.d.ts +0 -0
- /package/dist/components/{Pagination → pagination/Pagination}/usePagination.d.ts +0 -0
- /package/dist/components/{FlowSteps → steppers/StepList}/example-steps.d.ts +0 -0
- /package/dist/svg/{linkSimple.svg → link.svg} +0 -0
- /package/dist/svg/{linkSimpleSlash.svg → unlink.svg} +0 -0
- /package/dist/{layouts → utilities}/Container/Container.d.ts +0 -0
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
2
|
import './pantheon-logo.css';
|
|
3
|
-
export type PantheonLogoDisplayType = 'full' | 'icon' | 'wordmark'
|
|
3
|
+
export type PantheonLogoDisplayType = 'full' | 'icon' | 'wordmark';
|
|
4
|
+
export type PantheonLogoSize = 's' | 'm' | 'l';
|
|
4
5
|
/**
|
|
5
6
|
* Prop types for PantheonLogo
|
|
6
7
|
*/
|
|
@@ -22,11 +23,11 @@ export interface PantheonLogoProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
22
23
|
*/
|
|
23
24
|
linkContent?: ReactNode;
|
|
24
25
|
/**
|
|
25
|
-
*
|
|
26
|
+
* Size of the logo. The wordmark height is the basis — `s`, `m`, and `l` map to the corresponding typography size tokens.
|
|
26
27
|
*/
|
|
27
|
-
|
|
28
|
+
size?: PantheonLogoSize;
|
|
28
29
|
}
|
|
29
30
|
/**
|
|
30
31
|
* PantheonLogo UI component
|
|
31
32
|
*/
|
|
32
|
-
export declare const PantheonLogo: ({ className, colorType, displayType, linkContent,
|
|
33
|
+
export declare const PantheonLogo: ({ className, colorType, displayType, linkContent, size, ...props }: PantheonLogoProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -58,8 +58,12 @@ export interface PopoverProps extends Omit<ComponentPropsWithoutRef<'div'>, 'con
|
|
|
58
58
|
* The icon to use as the trigger.
|
|
59
59
|
*/
|
|
60
60
|
triggerIcon?: 'circleInfo' | 'circleQuestion';
|
|
61
|
+
/**
|
|
62
|
+
* Size of the trigger icon. Uses PDS Icon sizing.
|
|
63
|
+
*/
|
|
64
|
+
triggerIconSize?: 's' | 'm' | 'l';
|
|
61
65
|
}
|
|
62
66
|
/**
|
|
63
67
|
* Popover UI component
|
|
64
68
|
*/
|
|
65
|
-
export declare const Popover: ({ className, classNameContainer, closeButtonLabel, content, customTrigger, hasCloseButton, offsetValue, onClose, placement, popoverIsOpen, setPopoverIsOpen, title, triggerAccessibleText, triggerIcon, ...props }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
|
|
69
|
+
export declare const Popover: ({ className, classNameContainer, closeButtonLabel, content, customTrigger, hasCloseButton, offsetValue, onClose, placement, popoverIsOpen, setPopoverIsOpen, title, triggerAccessibleText, triggerIcon, triggerIconSize, ...props }: PopoverProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import './result-count.css';
|
|
3
|
+
export interface ResultCountLabelStrings {
|
|
4
|
+
/**
|
|
5
|
+
* Connector shown between the matching and total counts.
|
|
6
|
+
*/
|
|
7
|
+
of?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Leading word shown before the matching count once filtered (e.g.
|
|
10
|
+
* "Showing 4 of 14 sites"). Defaults to "Showing" — pass `null` to omit
|
|
11
|
+
* it and fall back to the bare "4 of 14 sites" form. Only ever appears
|
|
12
|
+
* in the filtered form; the unfiltered total is never prefixed.
|
|
13
|
+
*/
|
|
14
|
+
showing?: string | null;
|
|
15
|
+
/**
|
|
16
|
+
* Plural form of the unit noun, e.g. "sites".
|
|
17
|
+
*/
|
|
18
|
+
unitPlural?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Singular form of the unit noun, e.g. "site".
|
|
21
|
+
*/
|
|
22
|
+
unitSingular?: string;
|
|
23
|
+
}
|
|
24
|
+
export interface ResultCountProps extends ComponentPropsWithoutRef<'div'> {
|
|
25
|
+
/**
|
|
26
|
+
* Additional class names.
|
|
27
|
+
*/
|
|
28
|
+
className?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Number of items matching the current filters. Omit entirely when no
|
|
31
|
+
* filters are active — passing it (even equal to `countTotal`) renders
|
|
32
|
+
* the "matching of total" form instead of the plain total.
|
|
33
|
+
*/
|
|
34
|
+
countMatching?: number;
|
|
35
|
+
/**
|
|
36
|
+
* Total number of items, ignoring any active filters.
|
|
37
|
+
*/
|
|
38
|
+
countTotal: number;
|
|
39
|
+
/**
|
|
40
|
+
* Label strings for the connector word and the singular/plural unit noun.
|
|
41
|
+
*/
|
|
42
|
+
labelStrings?: ResultCountLabelStrings;
|
|
43
|
+
/**
|
|
44
|
+
* BCP 47 locale (e.g. `'en'`, `'fr'`) used to choose between
|
|
45
|
+
* `labelStrings.unitSingular`/`unitPlural` for a given count, via
|
|
46
|
+
* `Intl.PluralRules`. Defaults to the runtime's locale.
|
|
47
|
+
*/
|
|
48
|
+
locale?: string;
|
|
49
|
+
}
|
|
50
|
+
/**
|
|
51
|
+
* ResultCount UI component
|
|
52
|
+
*/
|
|
53
|
+
export declare const ResultCount: ({ className, countMatching, countTotal, labelStrings, locale, ...props }: ResultCountProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
+
import { MenuButton } from '../buttons/MenuButton/MenuButton';
|
|
3
|
+
import './row-actions-menu.css';
|
|
4
|
+
/**
|
|
5
|
+
* Prop types for RowActionsMenu
|
|
6
|
+
*/
|
|
7
|
+
export interface RowActionsMenuProps extends ComponentPropsWithoutRef<'div'> {
|
|
8
|
+
/**
|
|
9
|
+
* Arbitrary leading row content.
|
|
10
|
+
*/
|
|
11
|
+
children: ReactNode;
|
|
12
|
+
/**
|
|
13
|
+
* Additional class names
|
|
14
|
+
*/
|
|
15
|
+
className?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Contextual label for the row's kebab menu, e.g. `Actions for ${item.title}`.
|
|
18
|
+
* Supplied per-row by the consumer — required, since a plain "Actions"
|
|
19
|
+
* label isn't distinguishable between rows for screen reader users.
|
|
20
|
+
*/
|
|
21
|
+
menuAriaLabel: string;
|
|
22
|
+
/**
|
|
23
|
+
* Menu items for the kebab's menu — passed straight through to the
|
|
24
|
+
* underlying `MenuButton`. Use `isCritical`/`criticalLabel` on an item
|
|
25
|
+
* for a destructive action (e.g. "Remove").
|
|
26
|
+
*/
|
|
27
|
+
menuItems: ComponentPropsWithoutRef<typeof MenuButton>['menuItems'];
|
|
28
|
+
/**
|
|
29
|
+
* Where this row is being used, for the hover/active fill style. `dropdown`
|
|
30
|
+
* (default) is an inset rounded pill, matching a floating menu's own items
|
|
31
|
+
* (e.g. nested inside `Dropdown`). `panel` fills edge-to-edge with square
|
|
32
|
+
* corners, matching a flush list inside a panel/widget (e.g. `WidgetPanel`).
|
|
33
|
+
*/
|
|
34
|
+
variant?: 'dropdown' | 'panel';
|
|
35
|
+
}
|
|
36
|
+
/**
|
|
37
|
+
* RowActionsMenu UI component.
|
|
38
|
+
*
|
|
39
|
+
* A generic row primitive: arbitrary leading content plus a trailing kebab
|
|
40
|
+
* button that's visually revealed on hover and keyboard focus, opening a
|
|
41
|
+
* `MenuButton` actions menu. Not specific to any one consumer — meant to be
|
|
42
|
+
* reused anywhere a list needs a per-row actions menu (e.g. bookmarks,
|
|
43
|
+
* recent sites). Safe to nest inside another floating panel (e.g. a
|
|
44
|
+
* `Dropdown`) — see `MenuButton`/`Dropdown`'s Floating UI tree handling.
|
|
45
|
+
*/
|
|
46
|
+
export declare const RowActionsMenu: ({ children, className, menuAriaLabel, menuItems, variant, ...props }: RowActionsMenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
|
|
2
|
+
import { ContainerWidth } from '../../libs/types/custom-types';
|
|
3
|
+
import './site-footer.css';
|
|
4
|
+
type LegalLinkKey = 'privacy' | 'dataSubjectRequest' | 'cookiePolicy' | 'termsOfUse' | 'acceptableUse' | 'accessibilityStatement';
|
|
5
|
+
export interface SiteFooterProps extends ComponentPropsWithoutRef<'footer'> {
|
|
6
|
+
/**
|
|
7
|
+
* HTML element to render. Use 'footer' for standalone usage or 'div' when nested inside another footer landmark.
|
|
8
|
+
*/
|
|
9
|
+
as?: 'footer' | 'div';
|
|
10
|
+
/**
|
|
11
|
+
* Footer content.
|
|
12
|
+
*/
|
|
13
|
+
children?: ReactNode;
|
|
14
|
+
/**
|
|
15
|
+
* Additional class names
|
|
16
|
+
*/
|
|
17
|
+
className?: string;
|
|
18
|
+
/**
|
|
19
|
+
* PDS container width, controlling the footer's max-width and inline padding.
|
|
20
|
+
* Defaults to 'full' (full width, edge-to-edge, no padding) so the containing
|
|
21
|
+
* layout or app provides the gutter; set a constrained width (e.g. 'x-wide')
|
|
22
|
+
* to have the footer constrain and pad itself.
|
|
23
|
+
*/
|
|
24
|
+
containerWidth?: ContainerWidth;
|
|
25
|
+
/**
|
|
26
|
+
* Should the footer have a top border?
|
|
27
|
+
*/
|
|
28
|
+
hasTopBorder?: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* Legal policy links, in display order. Accepts the predefined Pantheon
|
|
31
|
+
* legal link keys and/or custom links or buttons (e.g. a cookie
|
|
32
|
+
* preferences trigger), interspersed in whatever order you need.
|
|
33
|
+
*/
|
|
34
|
+
legalLinks?: Array<LegalLinkKey | ReactElement>;
|
|
35
|
+
/**
|
|
36
|
+
* The background color of the surface this footer is placed on.
|
|
37
|
+
* Use 'secondary' to strengthen the internal divider border when the footer sits on a secondary background.
|
|
38
|
+
*/
|
|
39
|
+
surfaceColor?: 'default' | 'secondary';
|
|
40
|
+
}
|
|
41
|
+
/**
|
|
42
|
+
* SiteFooter UI component
|
|
43
|
+
*/
|
|
44
|
+
export declare const SiteFooter: ({ as: Element, children, className, containerWidth, hasTopBorder, legalLinks, surfaceColor, ...props }: SiteFooterProps) => import("react/jsx-runtime").JSX.Element;
|
|
45
|
+
export {};
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
-
import { SiteOption } from '
|
|
3
|
-
import './
|
|
2
|
+
import { SiteOption } from '../../libs/components/SiteOptionDisplay/SiteOptionDisplay';
|
|
3
|
+
import './site-search.css';
|
|
4
4
|
type LabelStrings = {
|
|
5
5
|
clearButton?: string;
|
|
6
6
|
inputInstructions?: string;
|
|
7
7
|
};
|
|
8
8
|
/**
|
|
9
|
-
* Prop types for
|
|
9
|
+
* Prop types for SiteSearch
|
|
10
10
|
*/
|
|
11
|
-
export interface
|
|
11
|
+
export interface SiteSearchProps extends ComponentPropsWithoutRef<'div'> {
|
|
12
12
|
/**
|
|
13
13
|
* Additional class names
|
|
14
14
|
*/
|
|
@@ -17,11 +17,6 @@ export interface DashboardSearchProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
17
17
|
* Is the search input disabled?
|
|
18
18
|
*/
|
|
19
19
|
disabled?: boolean;
|
|
20
|
-
/**
|
|
21
|
-
* Offset for the starting right position for the search input in rems.
|
|
22
|
-
* @deprecated This prop is no longer used since absolute positioning was removed.
|
|
23
|
-
*/
|
|
24
|
-
horizontalOffset?: number;
|
|
25
20
|
/**
|
|
26
21
|
* ID for the component.
|
|
27
22
|
*/
|
|
@@ -64,7 +59,7 @@ export interface DashboardSearchProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
64
59
|
siteList?: SiteOption[];
|
|
65
60
|
}
|
|
66
61
|
/**
|
|
67
|
-
*
|
|
62
|
+
* SiteSearch UI component
|
|
68
63
|
*/
|
|
69
|
-
export declare const
|
|
64
|
+
export declare const SiteSearch: ({ className, disabled, id, isLoading, label, labelStrings, loadingText, noResultsText, onFocus, onOptionSelect, placeholder, siteList, ...props }: SiteSearchProps) => import("react/jsx-runtime").JSX.Element;
|
|
70
65
|
export {};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { SortableListProps } from './types';
|
|
3
|
+
import './sortable-list.css';
|
|
4
|
+
export interface SortableListHandle {
|
|
5
|
+
/** Reverts the list to the order it was in when drag mode was last enabled. */
|
|
6
|
+
resetToSnapshot: () => void;
|
|
7
|
+
}
|
|
8
|
+
export declare const SortableList: React.ForwardRefExoticComponent<SortableListProps & React.RefAttributes<SortableListHandle>>;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { SortableListColumn, SortableListHeaderProps } from './types';
|
|
2
|
+
import './sortable-list.css';
|
|
3
|
+
interface SortableListHeaderInternalProps {
|
|
4
|
+
columns?: SortableListColumn[];
|
|
5
|
+
}
|
|
6
|
+
export declare const SortableListHeader: ({ children, className, columns, ...props }: SortableListHeaderProps & SortableListHeaderInternalProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export {};
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import type { SortableListColumn, SortableRowProps } from './types';
|
|
2
|
+
import './sortable-list.css';
|
|
3
|
+
interface SortableRowInternalProps {
|
|
4
|
+
columns?: SortableListColumn[];
|
|
5
|
+
depth?: number;
|
|
6
|
+
hasChildren?: boolean;
|
|
7
|
+
isDragActive?: boolean;
|
|
8
|
+
isDragging?: boolean;
|
|
9
|
+
isDropTarget?: boolean;
|
|
10
|
+
isExpanded?: boolean;
|
|
11
|
+
isProjectedParent?: boolean;
|
|
12
|
+
onToggleExpand?: () => void;
|
|
13
|
+
projectedDepthDelta?: number;
|
|
14
|
+
}
|
|
15
|
+
export declare const SortableRow: ({ children, className, columns, depth, hasChildren, id, isDragActive, isDragging: _isDraggingProp, isDropTarget, isExpanded, isLocked, isProjectedParent, onToggleExpand, projectedDepthDelta, ...props }: SortableRowProps & SortableRowInternalProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
export {};
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import type { FlattenedNode, SortableTreeNode } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* Flatten a tree into a list suitable for dnd-kit's SortableContext.
|
|
4
|
+
* Only includes nodes whose ancestors are all expanded.
|
|
5
|
+
*/
|
|
6
|
+
export declare function flattenTree(items: SortableTreeNode[], expandedIds: Set<string>, parentId?: string | null, depth?: number, ancestorIds?: string[]): FlattenedNode[];
|
|
7
|
+
/**
|
|
8
|
+
* Rebuild a tree from a flat list of nodes.
|
|
9
|
+
*/
|
|
10
|
+
export declare function buildTree(flatNodes: FlattenedNode[]): SortableTreeNode[];
|
|
11
|
+
/**
|
|
12
|
+
* Find a node by id in a tree.
|
|
13
|
+
*/
|
|
14
|
+
export declare function findItem(items: SortableTreeNode[], id: string): SortableTreeNode | undefined;
|
|
15
|
+
/**
|
|
16
|
+
* Calculate the projected depth during a drag based on horizontal pointer offset.
|
|
17
|
+
* Returns the clamped depth the item would land at if dropped.
|
|
18
|
+
*/
|
|
19
|
+
export declare function getProjectedDepth(flatNodes: FlattenedNode[], activeId: string, overId: string, dragOffsetX: number, indentSize: number, maxDepth: number, activeNodeDepth?: number): number;
|
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
+
export interface SortableTreeNode {
|
|
3
|
+
[key: string]: unknown;
|
|
4
|
+
children?: SortableTreeNode[];
|
|
5
|
+
id: string;
|
|
6
|
+
}
|
|
7
|
+
export interface FlattenedNode {
|
|
8
|
+
ancestorIds: string[];
|
|
9
|
+
data: SortableTreeNode;
|
|
10
|
+
depth: number;
|
|
11
|
+
hasChildren: boolean;
|
|
12
|
+
id: string;
|
|
13
|
+
index: number;
|
|
14
|
+
isExpanded: boolean;
|
|
15
|
+
parentId: string | null;
|
|
16
|
+
}
|
|
17
|
+
export interface SortableListColumn {
|
|
18
|
+
/**
|
|
19
|
+
* Unique identifier for this column. Used as the slot name in SortableRow.
|
|
20
|
+
*/
|
|
21
|
+
id: string;
|
|
22
|
+
/**
|
|
23
|
+
* Display label for the column header. Also used as the visually-hidden
|
|
24
|
+
* label for screen readers inside each row cell.
|
|
25
|
+
*/
|
|
26
|
+
label: string;
|
|
27
|
+
/**
|
|
28
|
+
* CSS width value for the column (e.g., '1fr', '10rem', '150px').
|
|
29
|
+
*/
|
|
30
|
+
width: string;
|
|
31
|
+
}
|
|
32
|
+
export type ReorderMode = 'always' | 'toggle' | 'disabled';
|
|
33
|
+
export interface SortableRowMeta {
|
|
34
|
+
depth: number;
|
|
35
|
+
hasChildren: boolean;
|
|
36
|
+
index: number;
|
|
37
|
+
isDragging: boolean;
|
|
38
|
+
isExpanded: boolean;
|
|
39
|
+
isLocked: boolean;
|
|
40
|
+
toggleExpand: () => void;
|
|
41
|
+
}
|
|
42
|
+
export interface SortableListProps extends ComponentPropsWithoutRef<'div'> {
|
|
43
|
+
/**
|
|
44
|
+
* Content for the header area. Typically a SortableListHeader.
|
|
45
|
+
*/
|
|
46
|
+
children?: ReactNode;
|
|
47
|
+
/**
|
|
48
|
+
* Additional class names.
|
|
49
|
+
*/
|
|
50
|
+
className?: string;
|
|
51
|
+
/**
|
|
52
|
+
* Column definitions for grid-based layout. Defines widths, labels,
|
|
53
|
+
* and slot names used by both the header and row content areas.
|
|
54
|
+
* When omitted, the row content area uses a plain flex layout.
|
|
55
|
+
*/
|
|
56
|
+
columns?: SortableListColumn[];
|
|
57
|
+
/**
|
|
58
|
+
* Initial tree data (uncontrolled mode).
|
|
59
|
+
*/
|
|
60
|
+
defaultItems?: SortableTreeNode[];
|
|
61
|
+
/**
|
|
62
|
+
* Function to extract a human-readable label from an item for screen reader
|
|
63
|
+
* announcements (e.g. "Picked up Home page. Position 1 of 5."). Defaults to
|
|
64
|
+
* using the item's id.
|
|
65
|
+
*/
|
|
66
|
+
getItemLabel?: (item: SortableTreeNode) => string;
|
|
67
|
+
/**
|
|
68
|
+
* Whether drag is currently enabled. Only relevant when reorderMode='toggle'.
|
|
69
|
+
* Controlled externally (e.g., by a UtilityBar lock/unlock button).
|
|
70
|
+
*/
|
|
71
|
+
isDragEnabled?: boolean;
|
|
72
|
+
/**
|
|
73
|
+
* Function that returns true for items whose position should be fixed.
|
|
74
|
+
* Locked items cannot be dragged and cannot be displaced by other items
|
|
75
|
+
* moving around them. Use this for items that must always remain at the
|
|
76
|
+
* top or bottom of the list (e.g. a Home page that is always first).
|
|
77
|
+
* Does not prevent other items from being nested inside the locked item —
|
|
78
|
+
* use isNestingLocked for that.
|
|
79
|
+
*/
|
|
80
|
+
isItemLocked?: (item: SortableTreeNode) => boolean;
|
|
81
|
+
/**
|
|
82
|
+
* Function that returns true for items that should not accept nested
|
|
83
|
+
* children. Items matching this function can still be moved to a new
|
|
84
|
+
* position; they just cannot be used as a parent during drag-and-drop.
|
|
85
|
+
*/
|
|
86
|
+
isNestingLocked?: (item: SortableTreeNode) => boolean;
|
|
87
|
+
/**
|
|
88
|
+
* Tree-structured data (controlled mode).
|
|
89
|
+
*/
|
|
90
|
+
items?: SortableTreeNode[];
|
|
91
|
+
/**
|
|
92
|
+
* Maximum nesting depth allowed. 0 = flat list, no nesting.
|
|
93
|
+
*/
|
|
94
|
+
maxDepth?: 0 | 1 | 2 | 3 | 4 | 5;
|
|
95
|
+
/**
|
|
96
|
+
* Callback when items are reordered. Receives the new tree structure.
|
|
97
|
+
*/
|
|
98
|
+
onReorder?: (items: SortableTreeNode[]) => void;
|
|
99
|
+
/**
|
|
100
|
+
* Render function for each row. Receives the item data and tree metadata.
|
|
101
|
+
*/
|
|
102
|
+
renderRow: (item: SortableTreeNode, meta: SortableRowMeta) => ReactNode;
|
|
103
|
+
/**
|
|
104
|
+
* Controls drag-and-drop availability.
|
|
105
|
+
* - 'always': drag handles always visible (default).
|
|
106
|
+
* - 'toggle': drag state controlled externally via isDragEnabled prop.
|
|
107
|
+
* - 'disabled': no dragging, no handles, read-only list.
|
|
108
|
+
*/
|
|
109
|
+
reorderMode?: ReorderMode;
|
|
110
|
+
/**
|
|
111
|
+
* Custom screen reader instructions for drag operations.
|
|
112
|
+
*/
|
|
113
|
+
screenReaderInstructions?: string;
|
|
114
|
+
}
|
|
115
|
+
export interface SortableRowProps extends ComponentPropsWithoutRef<'div'> {
|
|
116
|
+
/**
|
|
117
|
+
* Child elements — the consumer-defined row content.
|
|
118
|
+
*/
|
|
119
|
+
children: ReactNode;
|
|
120
|
+
/**
|
|
121
|
+
* Additional class names.
|
|
122
|
+
*/
|
|
123
|
+
className?: string;
|
|
124
|
+
/**
|
|
125
|
+
* Unique identifier for this row. Must match an item id.
|
|
126
|
+
*/
|
|
127
|
+
id: string;
|
|
128
|
+
/**
|
|
129
|
+
* Prevents this row from being dragged or receiving drops.
|
|
130
|
+
*/
|
|
131
|
+
isLocked?: boolean;
|
|
132
|
+
}
|
|
133
|
+
export interface SortableListHeaderProps extends ComponentPropsWithoutRef<'div'> {
|
|
134
|
+
/**
|
|
135
|
+
* Child elements assigned to named slots.
|
|
136
|
+
*/
|
|
137
|
+
children?: ReactNode;
|
|
138
|
+
/**
|
|
139
|
+
* Additional class names.
|
|
140
|
+
*/
|
|
141
|
+
className?: string;
|
|
142
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { FlattenedNode, SortableTreeNode } from './types';
|
|
2
|
+
interface UseSortableTreeOptions {
|
|
3
|
+
defaultItems?: SortableTreeNode[];
|
|
4
|
+
isDragEnabled?: boolean;
|
|
5
|
+
items?: SortableTreeNode[];
|
|
6
|
+
onReorder?: (items: SortableTreeNode[]) => void;
|
|
7
|
+
}
|
|
8
|
+
export declare function useSortableTree({ defaultItems, isDragEnabled, items: controlledItems, onReorder, }: UseSortableTreeOptions): {
|
|
9
|
+
currentItems: SortableTreeNode[];
|
|
10
|
+
expandedIds: Set<string>;
|
|
11
|
+
expandItem: (id: string) => void;
|
|
12
|
+
flatNodes: FlattenedNode[];
|
|
13
|
+
handleReorder: (updatedFlat: FlattenedNode[]) => void;
|
|
14
|
+
resetToSnapshot: () => void;
|
|
15
|
+
sortableIds: string[];
|
|
16
|
+
toggleExpand: (id: string) => void;
|
|
17
|
+
};
|
|
18
|
+
export {};
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import { StatusType } from '../../libs/types/custom-types';
|
|
3
|
+
import { PDSIcon } from '../icons/Icon/Icon';
|
|
4
|
+
import './stat-panel.css';
|
|
5
|
+
/**
|
|
6
|
+
* Color options for the icon, from the toolkit's standard status vocabulary
|
|
7
|
+
* plus `neutral`. Ignored when `icon` is `'spinner'`, which always renders in
|
|
8
|
+
* the default foreground color.
|
|
9
|
+
*/
|
|
10
|
+
export type StatPanelIconColor = StatusType | 'neutral';
|
|
11
|
+
/**
|
|
12
|
+
* Prop types for StatPanel
|
|
13
|
+
*/
|
|
14
|
+
export interface StatPanelProps extends ComponentPropsWithoutRef<'div'> {
|
|
15
|
+
/**
|
|
16
|
+
* Click handler for the optional action. Renders the action only when
|
|
17
|
+
* both `actionLabel` and `actionCallback` are provided.
|
|
18
|
+
*/
|
|
19
|
+
actionCallback?: () => void;
|
|
20
|
+
/**
|
|
21
|
+
* Icon for the optional action button, shown in the upper-right corner.
|
|
22
|
+
* Defaults to the filter icon.
|
|
23
|
+
*/
|
|
24
|
+
actionIcon?: PDSIcon;
|
|
25
|
+
/**
|
|
26
|
+
* Accessible name for the action, also shown as its tooltip.
|
|
27
|
+
*/
|
|
28
|
+
actionLabel?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Additional class names
|
|
31
|
+
*/
|
|
32
|
+
className?: string;
|
|
33
|
+
/**
|
|
34
|
+
* Optional supporting text shown below the stat.
|
|
35
|
+
*/
|
|
36
|
+
description?: string;
|
|
37
|
+
/**
|
|
38
|
+
* Which icon to render alongside the stat. Pass `'spinner'` to render a
|
|
39
|
+
* static (non-animated) version of the toolkit's `Spinner`.
|
|
40
|
+
*/
|
|
41
|
+
icon?: PDSIcon | 'spinner';
|
|
42
|
+
/**
|
|
43
|
+
* Icon color.
|
|
44
|
+
*/
|
|
45
|
+
iconColor?: StatPanelIconColor;
|
|
46
|
+
/**
|
|
47
|
+
* Designates the panel as active, e.g. when the stat it summarizes is
|
|
48
|
+
* driving an applied filter.
|
|
49
|
+
*/
|
|
50
|
+
isActive?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* Shows a skeleton in place of `stat` while its value is still loading.
|
|
53
|
+
*/
|
|
54
|
+
isLoading?: boolean;
|
|
55
|
+
/**
|
|
56
|
+
* The headline value, e.g. "4 sites".
|
|
57
|
+
*/
|
|
58
|
+
stat?: string;
|
|
59
|
+
/**
|
|
60
|
+
* Overline-style label describing the stat. Rendered as plain text (not a
|
|
61
|
+
* heading) — the panel is labeled for assistive tech via `role="group"` +
|
|
62
|
+
* `aria-labelledby` instead, so a grid of panels doesn't add a heading per
|
|
63
|
+
* panel to the page's heading outline.
|
|
64
|
+
*/
|
|
65
|
+
title: string;
|
|
66
|
+
}
|
|
67
|
+
/**
|
|
68
|
+
* StatPanel UI component
|
|
69
|
+
*/
|
|
70
|
+
export declare const StatPanel: ({ actionCallback, actionIcon, actionLabel, className, description, icon, iconColor, isActive, isLoading, stat, title, ...props }: StatPanelProps) => import("react/jsx-runtime").JSX.Element;
|
package/dist/components/{RefreshChecker/RefreshChecker.d.ts → StatusChecker/StatusChecker.d.ts}
RENAMED
|
@@ -1,17 +1,8 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
-
import './
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
export declare enum RefreshCheckerState {
|
|
7
|
-
CHECKED = "checked",
|
|
8
|
-
DEFAULT = "default",
|
|
9
|
-
WORKING = "working"
|
|
10
|
-
}
|
|
11
|
-
/**
|
|
12
|
-
* Prop types for RefreshChecker
|
|
13
|
-
*/
|
|
14
|
-
interface RefreshCheckerProps extends ComponentPropsWithoutRef<'div'> {
|
|
2
|
+
import './status-checker.css';
|
|
3
|
+
export declare const statusCheckerStates: readonly ["default", "working", "checked"];
|
|
4
|
+
export type StatusCheckerState = (typeof statusCheckerStates)[number];
|
|
5
|
+
export interface StatusCheckerProps extends ComponentPropsWithoutRef<'div'> {
|
|
15
6
|
/**
|
|
16
7
|
* Alignment of the component. Default is left.
|
|
17
8
|
*/
|
|
@@ -45,10 +36,6 @@ interface RefreshCheckerProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
45
36
|
/**
|
|
46
37
|
* State of the component
|
|
47
38
|
*/
|
|
48
|
-
state?:
|
|
39
|
+
state?: StatusCheckerState;
|
|
49
40
|
}
|
|
50
|
-
|
|
51
|
-
* RefreshChecker UI component
|
|
52
|
-
*/
|
|
53
|
-
export declare const RefreshChecker: ({ alignment, className, componentWidth, labelStrings, lastChecked, onCheck, state, ...props }: RefreshCheckerProps) => import("react/jsx-runtime").JSX.Element;
|
|
54
|
-
export {};
|
|
41
|
+
export declare const StatusChecker: ({ alignment, className, componentWidth, labelStrings, lastChecked, onCheck, state, ...props }: StatusCheckerProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ComponentPropsWithoutRef } from 'react';
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
2
|
import { StatusType } from '../../libs/types/custom-types';
|
|
3
3
|
import './status-indicator.css';
|
|
4
4
|
export interface StatusIndicatorProps extends ComponentPropsWithoutRef<'div'> {
|
|
@@ -11,9 +11,12 @@ export interface StatusIndicatorProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
11
11
|
*/
|
|
12
12
|
label: string;
|
|
13
13
|
/**
|
|
14
|
-
*
|
|
14
|
+
* Optionally makes the status indicator a link. Pass a fully-formed,
|
|
15
|
+
* router-agnostic link element (e.g. an anchor or your router's link
|
|
16
|
+
* component); the indicator's dot and label render as its children, so the
|
|
17
|
+
* whole indicator becomes clickable.
|
|
15
18
|
*/
|
|
16
|
-
|
|
19
|
+
linkContent?: ReactNode;
|
|
17
20
|
/**
|
|
18
21
|
* Sets status type
|
|
19
22
|
*/
|
|
@@ -22,4 +25,4 @@ export interface StatusIndicatorProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
22
25
|
/**
|
|
23
26
|
* StatusIndicator UI component
|
|
24
27
|
*/
|
|
25
|
-
export declare const StatusIndicator: ({ className, label,
|
|
28
|
+
export declare const StatusIndicator: ({ className, label, linkContent, type, ...props }: StatusIndicatorProps) => import("react/jsx-runtime").JSX.Element;
|