@pantheon-systems/pds-toolkit-react 2.0.0-alpha.7 → 2.0.0-alpha.71
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 +192 -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/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/{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 +290 -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 +1 -1
- 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 +4 -4
- package/dist/components/buttons/FilterButton/FilterButton.d.ts +92 -0
- package/dist/components/buttons/IconButton/IconButton.d.ts +12 -0
- package/dist/components/buttons/MenuButton/MenuButton.d.ts +24 -17
- package/dist/components/buttons/SSOButton/SSOButton.d.ts +9 -1
- package/dist/components/buttons/SegmentedButton/SegmentedButton.d.ts +44 -8
- 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/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 +212 -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 +1 -1
- 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 +20 -5
- package/dist/components/navigation/WorkspaceSelector/WorkspaceSelector.d.ts +2 -16
- package/dist/components/navigation/navigation-utilities.d.ts +12 -0
- 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/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 +2 -2
- 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 +62 -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/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/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-branch-diff.css +1 -1
- package/dist/css/component-css/pds-breadcrumb.css +1 -1
- 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 +45 -13
- 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 +2 -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-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 +5 -3
- 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 +152 -45
- 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-section-message.css +1 -1
- package/dist/css/component-css/pds-segmented-button.css +2 -1
- 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-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 +3 -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 +5 -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-workspace-selector.css +26 -1
- package/dist/css/design-tokens/variables.dark.css +385 -338
- package/dist/css/design-tokens/variables.global.css +10 -18
- package/dist/css/design-tokens/variables.light.css +376 -309
- 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 +5 -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 +152 -45
- 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 +95 -7
- package/dist/index.js +12738 -4787
- package/dist/index.js.map +1 -1
- package/dist/index.source.d.ts +44 -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 +16 -6
- 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/StatusDot/StatusDot.d.ts +15 -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 +4 -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/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/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 +138 -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 +83 -47
- package/tailwind/README.md +220 -0
- package/tailwind/TESTING.md +457 -0
- package/tailwind/v3/preset.cjs +258 -0
- package/tailwind/v4/theme.css +230 -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
|
-
import React, { ChangeEvent, ComponentPropsWithoutRef,
|
|
1
|
+
import React, { ChangeEvent, ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
2
|
import { ValidationStatus } from '../../../libs/types/input-types';
|
|
3
3
|
import './combobox.css';
|
|
4
|
+
export type ComboboxSize = 's' | 'm';
|
|
4
5
|
type LabelStrings = {
|
|
5
6
|
clearButton?: string;
|
|
6
7
|
inputInstructions?: string;
|
|
@@ -14,10 +15,15 @@ export type ComboboxOption = {
|
|
|
14
15
|
searchIndex?: string[];
|
|
15
16
|
value: string;
|
|
16
17
|
};
|
|
18
|
+
export type ComboboxOptionGroup = {
|
|
19
|
+
groupLabel: string;
|
|
20
|
+
options: ComboboxOption[];
|
|
21
|
+
};
|
|
22
|
+
export type ComboboxOptionsType = (ComboboxOption | ComboboxOptionGroup)[];
|
|
17
23
|
/**
|
|
18
24
|
* Prop types for Combobox
|
|
19
25
|
*/
|
|
20
|
-
export interface ComboboxProps extends ComponentPropsWithoutRef<'div'> {
|
|
26
|
+
export interface ComboboxProps extends Omit<ComponentPropsWithoutRef<'div'>, 'onFocus' | 'onBlur'> {
|
|
21
27
|
/**
|
|
22
28
|
* Additional class names
|
|
23
29
|
*/
|
|
@@ -51,7 +57,7 @@ export interface ComboboxProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
51
57
|
*/
|
|
52
58
|
id: string;
|
|
53
59
|
/**
|
|
54
|
-
*
|
|
60
|
+
* Width of the input field in pixels. When omitted, the input fills its container.
|
|
55
61
|
*/
|
|
56
62
|
inputWidth?: number;
|
|
57
63
|
/**
|
|
@@ -79,9 +85,9 @@ export interface ComboboxProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
79
85
|
*/
|
|
80
86
|
noResultsText?: string;
|
|
81
87
|
/**
|
|
82
|
-
* onBlur event handler.
|
|
88
|
+
* onBlur event handler to provide the current value of the input.
|
|
83
89
|
*/
|
|
84
|
-
onBlur?: (
|
|
90
|
+
onBlur?: (currentValue: string) => void;
|
|
85
91
|
/**
|
|
86
92
|
* onChange event handler.
|
|
87
93
|
*/
|
|
@@ -91,9 +97,9 @@ export interface ComboboxProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
91
97
|
*/
|
|
92
98
|
onClear?: () => void;
|
|
93
99
|
/**
|
|
94
|
-
* onFocus event handler.
|
|
100
|
+
* onFocus event handler to provide the current value of the input.
|
|
95
101
|
*/
|
|
96
|
-
onFocus?: (
|
|
102
|
+
onFocus?: (currentValue: string) => void;
|
|
97
103
|
/**
|
|
98
104
|
* Callback when an option is selected. Returns the selected option object.
|
|
99
105
|
*/
|
|
@@ -119,6 +125,10 @@ export interface ComboboxProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
119
125
|
* When true, clicking or focusing the input will show all available options before typing.
|
|
120
126
|
*/
|
|
121
127
|
showUnfilteredOptions?: boolean;
|
|
128
|
+
/**
|
|
129
|
+
* Size of the combobox field.
|
|
130
|
+
*/
|
|
131
|
+
size?: ComboboxSize;
|
|
122
132
|
/**
|
|
123
133
|
* Optional tooltip text to display additional information.
|
|
124
134
|
*/
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
2
|
import './combobox-multiselect.css';
|
|
3
|
+
export type ComboboxMultiselectSize = 's' | 'm';
|
|
3
4
|
type LabelStrings = {
|
|
4
5
|
aiBadgeLabel?: string;
|
|
5
6
|
aiPanelButton?: string;
|
|
@@ -16,7 +17,7 @@ export interface OptionProps {
|
|
|
16
17
|
id: string;
|
|
17
18
|
label: string;
|
|
18
19
|
}
|
|
19
|
-
interface
|
|
20
|
+
interface AiSuggestionsPanel {
|
|
20
21
|
content?: ReactNode;
|
|
21
22
|
disableRefresh?: boolean;
|
|
22
23
|
isFetching?: boolean;
|
|
@@ -30,9 +31,9 @@ type DivProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange'>;
|
|
|
30
31
|
*/
|
|
31
32
|
export interface ComboboxMultiselectProps extends DivProps {
|
|
32
33
|
/**
|
|
33
|
-
*
|
|
34
|
+
* AI suggestions panel configuration. When provided, shows a sparkle button that opens a floating suggestions panel.
|
|
34
35
|
*/
|
|
35
|
-
|
|
36
|
+
aiSuggestions?: AiSuggestionsPanel;
|
|
36
37
|
/**
|
|
37
38
|
* Additional class names
|
|
38
39
|
*/
|
|
@@ -50,7 +51,7 @@ export interface ComboboxMultiselectProps extends DivProps {
|
|
|
50
51
|
*/
|
|
51
52
|
initialSelectedItems?: OptionProps[];
|
|
52
53
|
/**
|
|
53
|
-
*
|
|
54
|
+
* Width of the input field in pixels. When omitted, the input fills its container.
|
|
54
55
|
*/
|
|
55
56
|
inputWidth?: number;
|
|
56
57
|
/**
|
|
@@ -97,9 +98,13 @@ export interface ComboboxMultiselectProps extends DivProps {
|
|
|
97
98
|
* Should the label be visible? If false, it will render for screen readers only.
|
|
98
99
|
*/
|
|
99
100
|
showLabel?: boolean;
|
|
101
|
+
/**
|
|
102
|
+
* Size of the combobox multiselect field.
|
|
103
|
+
*/
|
|
104
|
+
size?: ComboboxMultiselectSize;
|
|
100
105
|
}
|
|
101
106
|
/**
|
|
102
107
|
* ComboboxMultiselect UI component
|
|
103
108
|
*/
|
|
104
|
-
export declare const ComboboxMultiselect: ({
|
|
109
|
+
export declare const ComboboxMultiselect: ({ aiSuggestions, className, disabled, id, initialSelectedItems, inputWidth, isLoading, label, labelStrings, loadingText, noResultsText, onChange, options, placeholder, required, showAllTags, showLabel, size, ...props }: ComboboxMultiselectProps) => import("react/jsx-runtime").JSX.Element;
|
|
105
110
|
export {};
|
|
@@ -1,31 +1,111 @@
|
|
|
1
|
-
import { HTMLAttributes } from 'react';
|
|
1
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import { Locale } from 'date-fns';
|
|
3
|
-
import {
|
|
4
|
-
import 'react-day-picker/dist/style.css';
|
|
3
|
+
import { ValidationStatus } from '../../../libs/types/input-types';
|
|
5
4
|
import './datepicker.css';
|
|
6
|
-
|
|
5
|
+
/**
|
|
6
|
+
* A date range, as plain native `Date` objects. Replaces `react-day-picker`'s
|
|
7
|
+
* `DateRange` type (which consumers previously imported directly from
|
|
8
|
+
* `react-day-picker`) now that Datepicker's calendar core is built on
|
|
9
|
+
* react-aria instead. See guides/DATEPICKER-CONSUMER-MIGRATION.md.
|
|
10
|
+
*/
|
|
11
|
+
export interface DateRange {
|
|
12
|
+
from?: Date;
|
|
13
|
+
to?: Date;
|
|
14
|
+
}
|
|
15
|
+
export type PresetType = 'today' | 'current-week' | 'current-month' | 'last-week' | 'last-month';
|
|
7
16
|
export interface CustomPresetConfig {
|
|
8
17
|
custom?: () => DateRange;
|
|
9
18
|
days?: number;
|
|
19
|
+
hours?: number;
|
|
10
20
|
label: string;
|
|
21
|
+
minutes?: number;
|
|
22
|
+
/**
|
|
23
|
+
* Whether this preset's own `label` (e.g. "Last 15 min") should replace the
|
|
24
|
+
* trigger's computed date/time text while this preset is active. Defaults
|
|
25
|
+
* to `true` for sub-day presets (`hours`/`minutes` set, no `days`/`type`)
|
|
26
|
+
* and `false` otherwise — rolling sub-day windows read better as their own
|
|
27
|
+
* label than as a precise, already-stale-by-the-time-you-read-it
|
|
28
|
+
* timestamp. Set explicitly to override the default either way.
|
|
29
|
+
*/
|
|
30
|
+
showLabelInTrigger?: boolean;
|
|
11
31
|
type?: PresetType;
|
|
12
32
|
}
|
|
33
|
+
/**
|
|
34
|
+
* Options for `getPresetDateRange`. Both are optional and additive — omitting
|
|
35
|
+
* them preserves the function's original behavior (browser-local time zone,
|
|
36
|
+
* Sunday-first weeks).
|
|
37
|
+
*/
|
|
38
|
+
export interface GetPresetDateRangeOptions {
|
|
39
|
+
/**
|
|
40
|
+
* BCP-47 locale, used only for `current-week`/`last-week`'s week-start day
|
|
41
|
+
* (e.g. Monday-first in most of Europe vs. Sunday-first in the US).
|
|
42
|
+
* Defaults to `'en-US'` (Sunday-first), matching this function's original,
|
|
43
|
+
* locale-unaware behavior.
|
|
44
|
+
*/
|
|
45
|
+
locale?: string;
|
|
46
|
+
/**
|
|
47
|
+
* IANA time zone identifier. Determines which calendar day/week/month
|
|
48
|
+
* "today" resolves to for `days`/`type` presets — irrelevant for
|
|
49
|
+
* `hours`/`minutes` presets, which are absolute-time offsets from the
|
|
50
|
+
* current instant, not calendar-day boundaries. Defaults to the browser's
|
|
51
|
+
* local time zone.
|
|
52
|
+
*/
|
|
53
|
+
timeZone?: string;
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* Converts a preset config to a DateRange. Use this alongside an external
|
|
57
|
+
* SegmentedButton, Select, or other control to compose preset date pickers.
|
|
58
|
+
*/
|
|
59
|
+
export declare const getPresetDateRange: (preset: CustomPresetConfig, options?: GetPresetDateRangeOptions) => DateRange;
|
|
13
60
|
export interface DatepickerTranslationStrings {
|
|
14
61
|
clearButton?: string;
|
|
62
|
+
customPresetLabel?: string;
|
|
15
63
|
doneButton?: string;
|
|
64
|
+
endTimeLabel?: string;
|
|
65
|
+
localTimeZoneLabel?: string;
|
|
66
|
+
nextMonthLabel?: string;
|
|
16
67
|
noDateRangeSelected?: string;
|
|
17
68
|
noDateSelected?: string;
|
|
18
69
|
pleaseSelectEndDate?: string;
|
|
70
|
+
presetsGroupLabel?: string;
|
|
71
|
+
previousMonthLabel?: string;
|
|
19
72
|
selectedDate?: string;
|
|
20
73
|
selectedDateRange?: string;
|
|
21
74
|
selectedStartDate?: string;
|
|
75
|
+
startTimeLabel?: string;
|
|
76
|
+
timeLabel?: string;
|
|
77
|
+
timeZoneSwitcherLabel?: string;
|
|
22
78
|
to?: string;
|
|
79
|
+
todayButton?: string;
|
|
80
|
+
utcTimeZoneLabel?: string;
|
|
23
81
|
}
|
|
24
82
|
/**
|
|
25
83
|
* Prop types for Datepicker.
|
|
26
84
|
*/
|
|
27
85
|
type DatepickerHTMLProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'>;
|
|
28
|
-
|
|
86
|
+
interface DatepickerSharedProps extends DatepickerHTMLProps {
|
|
87
|
+
/**
|
|
88
|
+
* Whether the `presets` list includes its "Custom" entry (the one that
|
|
89
|
+
* hands date selection over to the calendar). Has no effect unless
|
|
90
|
+
* `presets` is also set. Defaults to `true`. Set to `false` to offer the
|
|
91
|
+
* fixed presets *only* — a consumer that wants a rolling-window picker
|
|
92
|
+
* with no arbitrary-range escape hatch (e.g. a launch that only supports
|
|
93
|
+
* 24h/7d/30d windows). Pair with `showPresetCalendar={false}` for a
|
|
94
|
+
* popover that is nothing but the preset list; on its own it just removes
|
|
95
|
+
* the entry, leaving the always-visible calendar alongside the list.
|
|
96
|
+
*/
|
|
97
|
+
allowCustomRange?: boolean;
|
|
98
|
+
/**
|
|
99
|
+
* Whether range mode may select a span of days at all. Defaults to
|
|
100
|
+
* `true` — react-aria's two-click anchor-then-commit gesture. Set to
|
|
101
|
+
* `false` where a multi-day span would be meaningless or unsupported:
|
|
102
|
+
* a single click then selects that day as its own start and end, with no
|
|
103
|
+
* second click needed. The emitted value stays a `DateRange` (with
|
|
104
|
+
* `showTime`, the whole day: 00:00 through 23:59), so it keeps composing
|
|
105
|
+
* with `presets`, whose entries still compute multi-day ranges of their
|
|
106
|
+
* own. Has no effect in single mode, which already selects one date.
|
|
107
|
+
*/
|
|
108
|
+
allowDateRangeSelection?: boolean;
|
|
29
109
|
/**
|
|
30
110
|
* Additional class names.
|
|
31
111
|
*/
|
|
@@ -35,15 +115,19 @@ export interface DatepickerProps extends DatepickerHTMLProps {
|
|
|
35
115
|
*/
|
|
36
116
|
disabled?: boolean;
|
|
37
117
|
/**
|
|
38
|
-
*
|
|
118
|
+
* Optional note rendered at the bottom of the calendar dropdown, below the
|
|
119
|
+
* `showTime` field(s) when present (otherwise directly below the calendar
|
|
120
|
+
* grid(s)) and above the footer actions. Accepts any `ReactNode` — e.g. an
|
|
121
|
+
* "Available window: [start] – [end]" constraint hint — this component
|
|
122
|
+
* doesn't prescribe what goes there.
|
|
39
123
|
*/
|
|
40
|
-
|
|
124
|
+
footerNote?: ReactNode;
|
|
41
125
|
/**
|
|
42
126
|
* Input ID.
|
|
43
127
|
*/
|
|
44
128
|
id: string;
|
|
45
129
|
/**
|
|
46
|
-
*
|
|
130
|
+
* Width of the input field in pixels. When omitted, the input fills its container.
|
|
47
131
|
* Numbers below 160 will display at 160px.
|
|
48
132
|
* Leave blank for width: 100%.
|
|
49
133
|
*/
|
|
@@ -57,15 +141,33 @@ export interface DatepickerProps extends DatepickerHTMLProps {
|
|
|
57
141
|
*/
|
|
58
142
|
locale?: Locale;
|
|
59
143
|
/**
|
|
60
|
-
*
|
|
144
|
+
* Maximum selectable date.
|
|
145
|
+
*/
|
|
146
|
+
maxDate?: Date;
|
|
147
|
+
/**
|
|
148
|
+
* Helper text displayed below the input.
|
|
149
|
+
*/
|
|
150
|
+
message?: string | ReactNode;
|
|
151
|
+
/**
|
|
152
|
+
* Minimum selectable date.
|
|
61
153
|
*/
|
|
62
|
-
|
|
154
|
+
minDate?: Date;
|
|
63
155
|
/**
|
|
64
156
|
* Placeholder text for the trigger button.
|
|
65
157
|
*/
|
|
66
158
|
placeholder?: string;
|
|
67
159
|
/**
|
|
68
|
-
*
|
|
160
|
+
* Renders a preset list (each computed via `getPresetDateRange`) in a
|
|
161
|
+
* dedicated column to the left of the calendar, with a "Custom" entry
|
|
162
|
+
* below it for picking dates directly from the calendar. The calendar
|
|
163
|
+
* itself is always shown alongside the list, never hidden/collapsed.
|
|
164
|
+
* Selecting a preset drives the calendar's own selection; picking a date
|
|
165
|
+
* directly from the calendar (or editing a `showTime` field) marks
|
|
166
|
+
* "Custom" as active. Only meaningful in range mode (`mode="range"`) —
|
|
167
|
+
* every preset computes a `DateRange`. This is purely additive: the
|
|
168
|
+
* existing external-composition pattern (`getPresetDateRange` +
|
|
169
|
+
* `CustomPresetConfig` wired to an external `SegmentedButton`/`Select`)
|
|
170
|
+
* keeps working unchanged whether or not this prop is used.
|
|
69
171
|
*/
|
|
70
172
|
presets?: CustomPresetConfig[];
|
|
71
173
|
/**
|
|
@@ -76,6 +178,53 @@ export interface DatepickerProps extends DatepickerHTMLProps {
|
|
|
76
178
|
* Should the label be visible? If false, it will render for screen readers only.
|
|
77
179
|
*/
|
|
78
180
|
showLabel?: boolean;
|
|
181
|
+
/**
|
|
182
|
+
* Whether the calendar (and, when `showTime` is on, the time fields) is
|
|
183
|
+
* shown alongside the `presets` list from the start, or only once "Custom"
|
|
184
|
+
* is clicked. Has no effect unless `presets` is also set. Defaults to
|
|
185
|
+
* `true` — the calendar is always visible, matching this component's
|
|
186
|
+
* original `presets` behavior. Set to `false` for a compact, list-only
|
|
187
|
+
* popover (e.g. a log viewer's rolling-window picker) that expands to
|
|
188
|
+
* reveal the calendar only when the viewer picks "Custom" — once
|
|
189
|
+
* expanded, it stays expanded for the rest of that popover session (even
|
|
190
|
+
* if the viewer clicks back to a different preset afterward); it only
|
|
191
|
+
* collapses again the next time the popover is freshly opened.
|
|
192
|
+
*/
|
|
193
|
+
showPresetCalendar?: boolean;
|
|
194
|
+
/**
|
|
195
|
+
* Embeds Timepicker field(s) in the calendar dropdown (one in single mode,
|
|
196
|
+
* start/end in range mode) — the selected time-of-day is baked directly
|
|
197
|
+
* into the emitted `value`'s own `Date`(s); `value`/`onChange` stay plain
|
|
198
|
+
* `Date`/`DateRange`, no shape change.
|
|
199
|
+
*/
|
|
200
|
+
showTime?: boolean;
|
|
201
|
+
/**
|
|
202
|
+
* Renders an inline-labeled "UTC" / "Local" `SegmentedButton` below the
|
|
203
|
+
* embedded time field(s) that lets the viewer swap which zone the
|
|
204
|
+
* displayed (and subsequently entered) time-of-day is shown in. "Local" is
|
|
205
|
+
* whatever `timeZone` resolves to (the configured zone, not necessarily
|
|
206
|
+
* the browser's own). Only the *displayed/emitted time-of-day* changes
|
|
207
|
+
* when toggled — the selected calendar day never moves, even though, for
|
|
208
|
+
* a time near midnight, converting to a different zone can technically
|
|
209
|
+
* land in the neighboring day; this is an accepted, documented
|
|
210
|
+
* simplification rather than a full zoned re-derivation of the selected
|
|
211
|
+
* date. Has no effect unless `showTime` is also true.
|
|
212
|
+
*/
|
|
213
|
+
showTimeZoneSwitcher?: boolean;
|
|
214
|
+
/**
|
|
215
|
+
* IANA time zone identifier (e.g. "America/Los_Angeles", "UTC") used to
|
|
216
|
+
* combine the selected date with `showTime`'s entered time-of-day into a
|
|
217
|
+
* correct absolute instant. Passed straight through to each embedded
|
|
218
|
+
* `Timepicker`'s own `timeZone` prop as well. Defaults to the browser's
|
|
219
|
+
* local time zone. Also acts as the "Local" side of
|
|
220
|
+
* `showTimeZoneSwitcher`, when enabled. Independently of `showTime`, this
|
|
221
|
+
* is the zone every selected day is resolved in — the day the calendar
|
|
222
|
+
* highlights, the date the trigger renders, what "today" means, and the
|
|
223
|
+
* screen-reader announcements — so a picker pinned to another zone shows
|
|
224
|
+
* the day the viewer actually picked rather than whichever day that
|
|
225
|
+
* instant happens to fall on locally.
|
|
226
|
+
*/
|
|
227
|
+
timeZone?: string;
|
|
79
228
|
/**
|
|
80
229
|
* Optional tooltip text to display additional information.
|
|
81
230
|
*/
|
|
@@ -85,12 +234,66 @@ export interface DatepickerProps extends DatepickerHTMLProps {
|
|
|
85
234
|
*/
|
|
86
235
|
translationStrings?: DatepickerTranslationStrings;
|
|
87
236
|
/**
|
|
88
|
-
*
|
|
237
|
+
* Validation message that takes priority over `message` when set.
|
|
238
|
+
*/
|
|
239
|
+
validationMessage?: string;
|
|
240
|
+
/**
|
|
241
|
+
* Validation status. Controls error/success styling and message display.
|
|
89
242
|
*/
|
|
90
|
-
|
|
243
|
+
validationStatus?: ValidationStatus;
|
|
244
|
+
/**
|
|
245
|
+
* Number of months shown side by side in range mode. Defaults to `2`.
|
|
246
|
+
* Fixed for the lifetime of a given `Datepicker` instance — it does not
|
|
247
|
+
* auto-adjust based on the selected range or active preset, matching the
|
|
248
|
+
* static layout shown in Figma's own "Edge logs" recipe (a one-month
|
|
249
|
+
* range+time+presets picker for short windows, since its calendar grid
|
|
250
|
+
* never needs to show more than a single month at once). Has no effect
|
|
251
|
+
* in single mode, which always shows one month.
|
|
252
|
+
*/
|
|
253
|
+
visibleMonths?: 1 | 2;
|
|
91
254
|
}
|
|
255
|
+
export interface SingleDatepickerProps extends DatepickerSharedProps {
|
|
256
|
+
/**
|
|
257
|
+
* Single-date selection (the default) — omit `mode` entirely, or set it
|
|
258
|
+
* explicitly to `'single'`.
|
|
259
|
+
*/
|
|
260
|
+
mode?: 'single';
|
|
261
|
+
/**
|
|
262
|
+
* onChange handler.
|
|
263
|
+
*/
|
|
264
|
+
onChange?: (value: Date | undefined) => void;
|
|
265
|
+
/**
|
|
266
|
+
* Selected date.
|
|
267
|
+
*/
|
|
268
|
+
value?: Date;
|
|
269
|
+
}
|
|
270
|
+
export interface RangeDatepickerProps extends DatepickerSharedProps {
|
|
271
|
+
/**
|
|
272
|
+
* Date-range selection: the calendar shows two months side-by-side and
|
|
273
|
+
* the selected span is visually highlighted.
|
|
274
|
+
*/
|
|
275
|
+
mode: 'range';
|
|
276
|
+
/**
|
|
277
|
+
* onChange handler.
|
|
278
|
+
*/
|
|
279
|
+
onChange?: (value: DateRange | undefined) => void;
|
|
280
|
+
/**
|
|
281
|
+
* Selected date range.
|
|
282
|
+
*/
|
|
283
|
+
value?: DateRange;
|
|
284
|
+
}
|
|
285
|
+
/**
|
|
286
|
+
* `mode` is a discriminated union rather than a `hasDateRange` boolean —
|
|
287
|
+
* `value`/`onChange` narrow to the correct shape for the given mode at the
|
|
288
|
+
* type level, instead of relying on a boolean the compiler can't actually
|
|
289
|
+
* tie to the value's shape (which required internal `as DateRange`/`as Date`
|
|
290
|
+
* casts throughout). `mode` is optional and defaults to `'single'`, so
|
|
291
|
+
* existing single-date consumers (the common case) need no changes — only
|
|
292
|
+
* `hasDateRange` → `mode="range"` for range consumers.
|
|
293
|
+
*/
|
|
294
|
+
export type DatepickerProps = SingleDatepickerProps | RangeDatepickerProps;
|
|
92
295
|
/**
|
|
93
296
|
* Datepicker UI component.
|
|
94
297
|
*/
|
|
95
|
-
export declare const Datepicker: ({ className, disabled,
|
|
298
|
+
export declare const Datepicker: ({ allowCustomRange, allowDateRangeSelection, className, disabled, footerNote, id, inputWidth, label, locale, maxDate, message, minDate, mode, onChange, placeholder, presets, required, showLabel, showPresetCalendar, showTime, showTimeZoneSwitcher, timeZone, tooltipText, translationStrings: translationStringsProp, validationMessage, validationStatus, value, visibleMonths, ...props }: DatepickerProps) => import("react/jsx-runtime").JSX.Element;
|
|
96
299
|
export {};
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
2
|
import { ValidationStatus } from '../../../libs/types/input-types';
|
|
3
3
|
import './file-upload.css';
|
|
4
|
+
export type FileUploadSize = 's' | 'm';
|
|
4
5
|
type LabelStrings = {
|
|
5
6
|
chooseFile: string;
|
|
6
7
|
clearButton: string;
|
|
@@ -38,7 +39,7 @@ export interface FileUploadProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
38
39
|
*/
|
|
39
40
|
inputProps?: ComponentPropsWithoutRef<'input'>;
|
|
40
41
|
/**
|
|
41
|
-
*
|
|
42
|
+
* Width of the input field in pixels. When omitted, the input fills its container.
|
|
42
43
|
*/
|
|
43
44
|
inputWidth?: number;
|
|
44
45
|
/**
|
|
@@ -73,6 +74,10 @@ export interface FileUploadProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
73
74
|
* Should the label be visible? If false, it will render for screen readers only.
|
|
74
75
|
*/
|
|
75
76
|
showLabel?: boolean;
|
|
77
|
+
/**
|
|
78
|
+
* Size of the input field.
|
|
79
|
+
*/
|
|
80
|
+
size?: FileUploadSize;
|
|
76
81
|
/**
|
|
77
82
|
* Optional tooltip text to display additional information.
|
|
78
83
|
*/
|
|
@@ -44,13 +44,21 @@ export interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
44
44
|
*/
|
|
45
45
|
id: string;
|
|
46
46
|
/**
|
|
47
|
-
*
|
|
47
|
+
* Width of the input field in pixels. When omitted, the input fills its container.
|
|
48
48
|
*/
|
|
49
49
|
inputWidth?: number;
|
|
50
50
|
/**
|
|
51
51
|
* Label for the radio group
|
|
52
52
|
*/
|
|
53
53
|
label: string;
|
|
54
|
+
/**
|
|
55
|
+
* Visual treatment of the legend. `'default'` matches other form field
|
|
56
|
+
* labels — use it when this group is one of several inputs on a form.
|
|
57
|
+
* `'heading'` is semibold with more room below it, for cases where the
|
|
58
|
+
* group reads as its own section label (e.g. a filter panel's category
|
|
59
|
+
* groups) rather than a form field among others.
|
|
60
|
+
*/
|
|
61
|
+
labelVariant?: 'default' | 'heading';
|
|
54
62
|
/**
|
|
55
63
|
* Input message
|
|
56
64
|
*/
|
|
@@ -101,4 +109,4 @@ export interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
101
109
|
/**
|
|
102
110
|
* RadioGroup UI component
|
|
103
111
|
*/
|
|
104
|
-
export declare const RadioGroup: ({ className, defaultValue, disabled, fieldsetProps, id, inputWidth, label, message, onBlur, onChange, onValueChange, options, required, showLabel, tooltipText, validationMessage, validationStatus, value, ...props }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
|
|
112
|
+
export declare const RadioGroup: ({ className, defaultValue, disabled, fieldsetProps, id, inputWidth, label, labelVariant, message, onBlur, onChange, onValueChange, options, required, showLabel, tooltipText, validationMessage, validationStatus, value, ...props }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -3,6 +3,7 @@ import { ValidationStatus } from '../../../libs/types/input-types';
|
|
|
3
3
|
import { PDSIcon } from '../../icons/Icon/Icon';
|
|
4
4
|
import './select.css';
|
|
5
5
|
export type SelectIconType = PDSIcon | 'google' | 'microsoft';
|
|
6
|
+
export type SelectSize = 's' | 'm';
|
|
6
7
|
type LabelStrings = {
|
|
7
8
|
selectOptionText: string;
|
|
8
9
|
triggerButton: string;
|
|
@@ -69,7 +70,7 @@ export interface SelectProps {
|
|
|
69
70
|
*/
|
|
70
71
|
id: string;
|
|
71
72
|
/**
|
|
72
|
-
*
|
|
73
|
+
* Width of the input field in pixels. When omitted, the input fills its container.
|
|
73
74
|
*/
|
|
74
75
|
inputWidth?: number;
|
|
75
76
|
/**
|
|
@@ -108,6 +109,14 @@ export interface SelectProps {
|
|
|
108
109
|
* Should the label be visible? If false, it will render for screen readers only.
|
|
109
110
|
*/
|
|
110
111
|
showLabel?: boolean;
|
|
112
|
+
/**
|
|
113
|
+
* Should the selected option show a checkmark icon in the dropdown list? Defaults to true.
|
|
114
|
+
*/
|
|
115
|
+
showSelectedIcon?: boolean;
|
|
116
|
+
/**
|
|
117
|
+
* Size of the select field.
|
|
118
|
+
*/
|
|
119
|
+
size?: SelectSize;
|
|
111
120
|
/**
|
|
112
121
|
* Optional tooltip text to display additional information.
|
|
113
122
|
*/
|
|
@@ -132,5 +141,5 @@ export declare const SelectOptionGroup: ({ children, label, }: SelectOptionGroup
|
|
|
132
141
|
/**
|
|
133
142
|
* Select UI component
|
|
134
143
|
*/
|
|
135
|
-
export declare const Select: ({ autoWidth, className, defaultValue, disabled, icon, id, inputWidth, label, labelStrings, message, onBlur, onFocus, onOptionSelect, options, required, showLabel, tooltipText, validationMessage, validationStatus, value, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
|
|
144
|
+
export declare const Select: ({ autoWidth, className, defaultValue, disabled, icon, id, inputWidth, label, labelStrings, message, onBlur, onFocus, onOptionSelect, options, required, showLabel, showSelectedIcon, size, tooltipText, validationMessage, validationStatus, value, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
|
|
136
145
|
export {};
|
|
@@ -29,7 +29,7 @@ export interface SwitchProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
29
29
|
*/
|
|
30
30
|
inputProps?: ComponentPropsWithoutRef<'input'>;
|
|
31
31
|
/**
|
|
32
|
-
*
|
|
32
|
+
* Width of the input field in pixels. When omitted, the input fills its container.
|
|
33
33
|
*/
|
|
34
34
|
inputWidth?: number;
|
|
35
35
|
/**
|
|
@@ -41,7 +41,7 @@ export interface SwitchProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
41
41
|
*/
|
|
42
42
|
message?: string | ReactNode;
|
|
43
43
|
/**
|
|
44
|
-
* Status text for when switch is off.
|
|
44
|
+
* Status text for when the switch is off. Visual only (not announced to screen readers, which rely on `role="switch"`).
|
|
45
45
|
*/
|
|
46
46
|
offLabel?: string;
|
|
47
47
|
/**
|
|
@@ -49,7 +49,7 @@ export interface SwitchProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
49
49
|
*/
|
|
50
50
|
onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
51
51
|
/**
|
|
52
|
-
* Status text for when switch is on.
|
|
52
|
+
* Status text for when the switch is on. Visual only (not announced to screen readers, which rely on `role="switch"`).
|
|
53
53
|
*/
|
|
54
54
|
onLabel?: string;
|
|
55
55
|
/**
|
|
@@ -61,11 +61,11 @@ export interface SwitchProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
61
61
|
*/
|
|
62
62
|
showLabel?: boolean;
|
|
63
63
|
/**
|
|
64
|
-
* Show
|
|
64
|
+
* Show the on/off status label next to the switch. Visual only; state is always available to screen readers via `role="switch"`.
|
|
65
65
|
*/
|
|
66
66
|
showStatusLabel?: boolean;
|
|
67
67
|
/**
|
|
68
|
-
* Determines the placement of the
|
|
68
|
+
* Determines the placement of the status label relative to the switch. Default set to `right`.
|
|
69
69
|
*/
|
|
70
70
|
statusLabelPlacement?: 'right' | 'left';
|
|
71
71
|
/**
|
|
@@ -15,6 +15,7 @@ export type TagType = {
|
|
|
15
15
|
id: string;
|
|
16
16
|
value: string;
|
|
17
17
|
};
|
|
18
|
+
export type TagsInputSize = 's' | 'm';
|
|
18
19
|
type DivProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange'>;
|
|
19
20
|
/**
|
|
20
21
|
* Prop types for TagsInput
|
|
@@ -41,7 +42,7 @@ export interface TagsInputProps extends DivProps {
|
|
|
41
42
|
*/
|
|
42
43
|
inputMinHeight?: number;
|
|
43
44
|
/**
|
|
44
|
-
*
|
|
45
|
+
* Width of the input field in pixels. When omitted, the input fills its container.
|
|
45
46
|
*/
|
|
46
47
|
inputWidth?: number;
|
|
47
48
|
/**
|
|
@@ -72,6 +73,10 @@ export interface TagsInputProps extends DivProps {
|
|
|
72
73
|
* Should the label be visible? If false, it will render for screen readers only.
|
|
73
74
|
*/
|
|
74
75
|
showLabel?: boolean;
|
|
76
|
+
/**
|
|
77
|
+
* Size of the input.
|
|
78
|
+
*/
|
|
79
|
+
size?: TagsInputSize;
|
|
75
80
|
/**
|
|
76
81
|
* Tags array. The component is controlled and requires managing state externally.
|
|
77
82
|
*/
|
|
@@ -9,7 +9,7 @@ type LabelStrings = {
|
|
|
9
9
|
visibilityToggleHide: string;
|
|
10
10
|
visibilityToggleShow: string;
|
|
11
11
|
};
|
|
12
|
-
type HtmlInputTypes = 'text' | 'number' | 'email' | 'password' | 'tel' | 'url' | 'search';
|
|
12
|
+
type HtmlInputTypes = 'text' | 'number' | 'email' | 'password' | 'tel' | 'time' | 'url' | 'search';
|
|
13
13
|
/**
|
|
14
14
|
* Prop types for TextInput
|
|
15
15
|
*/
|
|
@@ -56,7 +56,7 @@ export interface TextInputProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
56
56
|
*/
|
|
57
57
|
inputProps?: ComponentPropsWithoutRef<'input'>;
|
|
58
58
|
/**
|
|
59
|
-
*
|
|
59
|
+
* Width of the input field in pixels. When omitted, the input fills its container.
|
|
60
60
|
*/
|
|
61
61
|
inputWidth?: number;
|
|
62
62
|
/**
|
|
@@ -110,7 +110,7 @@ export interface TextInputProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
110
110
|
/**
|
|
111
111
|
* Input size.
|
|
112
112
|
*/
|
|
113
|
-
size?: 's' | 'm'
|
|
113
|
+
size?: 's' | 'm';
|
|
114
114
|
/**
|
|
115
115
|
* Optional tooltip text to display additional information.
|
|
116
116
|
*/
|
|
@@ -120,7 +120,7 @@ export interface TextInputProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
120
120
|
*/
|
|
121
121
|
translationStrings?: LabelStrings;
|
|
122
122
|
/**
|
|
123
|
-
* Type of input field to use.
|
|
123
|
+
* Type of input field to use. For `time`, prefer the Timepicker component when possible — it offers segmented entry, 12/24-hour display, and timezone support. Use TextInput's native `time` type only as a lightweight fallback where that complexity isn't warranted; note it renders with browser-native time picker UI that isn't fully styleable to match PDS.
|
|
124
124
|
*/
|
|
125
125
|
type?: HtmlInputTypes;
|
|
126
126
|
/**
|
|
@@ -31,7 +31,7 @@ export interface TextareaProps {
|
|
|
31
31
|
*/
|
|
32
32
|
id: string;
|
|
33
33
|
/**
|
|
34
|
-
*
|
|
34
|
+
* Width of the input field in pixels. When omitted, the input fills its container.
|
|
35
35
|
*/
|
|
36
36
|
inputWidth?: number;
|
|
37
37
|
/**
|
|
@@ -82,7 +82,7 @@ export interface TextareaProps {
|
|
|
82
82
|
/**
|
|
83
83
|
* Input size.
|
|
84
84
|
*/
|
|
85
|
-
size?: 's' | 'm'
|
|
85
|
+
size?: 's' | 'm';
|
|
86
86
|
/**
|
|
87
87
|
* Additional props for the `<textarea>` element.
|
|
88
88
|
*/
|