@pantheon-systems/pds-toolkit-react 1.0.0-dev.9999 → 1.0.0
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/README.md +1 -1
- package/_dist/components/Avatar/Avatar.d.ts +6 -6
- package/_dist/components/BranchDiff/BranchDiff.d.ts +10 -10
- package/_dist/components/CTALink/CTALink.d.ts +6 -6
- package/_dist/components/CTASlice/CTASlice.d.ts +7 -7
- package/_dist/components/Callout/Callout.d.ts +9 -8
- package/_dist/components/Callout/sample-callout-content.d.ts +1 -2
- package/_dist/components/CodeBlock/CodeBlock.d.ts +6 -6
- package/_dist/components/ComparisonList/ComparisonList.d.ts +7 -7
- package/_dist/components/DashboardStat/DashboardStat.d.ts +11 -11
- package/_dist/components/FileDiff/FileDiff.d.ts +11 -11
- package/_dist/components/FlowSteps/FlowSteps.d.ts +10 -10
- package/_dist/components/FlowSteps/example-steps.d.ts +3 -4
- package/_dist/components/LinkNewWindow/LinkNewWindow.d.ts +6 -6
- package/_dist/components/Modal/Modal.d.ts +6 -6
- package/_dist/components/Pagination/Pagination.d.ts +8 -8
- package/_dist/components/PantheonLogo/PantheonLogo.d.ts +6 -6
- package/_dist/components/PantheonLogo/pantheon-logo-data.d.ts +3 -4
- package/_dist/components/Picture/Picture.d.ts +15 -15
- package/_dist/components/Popover/Popover.d.ts +22 -23
- package/_dist/components/PullQuote/PullQuote.d.ts +7 -7
- package/_dist/components/RefreshChecker/RefreshChecker.d.ts +10 -10
- package/_dist/components/SiteDashboardHeading/SiteDashboardHeading.d.ts +17 -12
- package/_dist/components/Skiplink/Skiplink.d.ts +6 -6
- package/_dist/components/SocialLinks/SocialLinks.d.ts +8 -8
- package/_dist/components/StatusIndicator/StatusIndicator.d.ts +8 -7
- package/_dist/components/Table/Table.d.ts +9 -9
- package/_dist/components/TableOfContents/TableOfContents.d.ts +9 -9
- package/_dist/components/Tabs/Tabs.d.ts +15 -15
- package/_dist/components/Tag/Tag.d.ts +8 -8
- package/_dist/components/ThemeSwitcher/ThemeSwitcher.d.ts +9 -9
- package/_dist/components/Tooltip/Tooltip.d.ts +7 -7
- package/_dist/components/VideoEmbed/VideoEmbed.d.ts +6 -6
- package/_dist/components/badges/IndicatorBadge/IndicatorBadge.d.ts +7 -7
- package/_dist/components/badges/StatusBadge/StatusBadge.d.ts +8 -7
- package/_dist/components/badges/Tally/Tally.d.ts +8 -8
- package/_dist/components/buttons/Button/Button.d.ts +11 -10
- package/_dist/components/buttons/ButtonLink/ButtonLink.d.ts +8 -8
- package/_dist/components/buttons/ClipboardButton/ClipboardButton.d.ts +6 -6
- package/_dist/components/buttons/CloseButton/CloseButton.d.ts +6 -6
- package/_dist/components/buttons/IconButton/IconButton.d.ts +12 -11
- package/_dist/components/buttons/MenuButton/MenuButton.d.ts +11 -11
- package/_dist/components/buttons/SegmentedButton/SegmentedButton.d.ts +13 -14
- package/_dist/components/buttons/SplitButton/SplitButton.d.ts +9 -9
- package/_dist/components/buttons/SplitButton/split-button-sample-data.d.ts +1 -2
- package/_dist/components/buttons/UtilityButton/UtilityButton.d.ts +25 -11
- package/_dist/components/cards/Card/Card.d.ts +7 -7
- package/_dist/components/cards/CardHeading/CardHeading.d.ts +6 -7
- package/_dist/components/cards/CardSelectGroup/CardSelectGroup.d.ts +10 -10
- package/_dist/components/cards/EmptyStateCard/EmptyStateCard.d.ts +7 -7
- package/_dist/components/cards/LinksCard/LinksCard.d.ts +7 -7
- package/_dist/components/cards/NewSiteCard/NewSiteCard.d.ts +12 -12
- package/_dist/components/cards/PaymentCard/PaymentCard.d.ts +16 -16
- package/_dist/components/cards/PricingCard/PricingCard.d.ts +22 -22
- package/_dist/components/cards/SiteCard/SiteCard.d.ts +13 -8
- package/_dist/components/empty-states/CompactEmptyState/CompactEmptyState.d.ts +9 -9
- package/_dist/components/empty-states/HorizontalEmptyState/HorizontalEmptyState.d.ts +27 -27
- package/_dist/components/empty-states/VerticalEmptyState/VerticalEmptyState.d.ts +15 -15
- package/_dist/components/footer/FooterHeading/FooterHeading.d.ts +7 -7
- package/_dist/components/footer/FooterLinks/FooterLinks.d.ts +7 -7
- package/_dist/components/footer/SiteFooter/SiteFooter.d.ts +11 -11
- package/_dist/components/footer/SiteFooter/footer-content.d.ts +1 -2
- package/_dist/components/icons/Icon/Icon.d.ts +19 -8
- package/_dist/components/icons/PaymentIcon/PaymentIcon.d.ts +6 -6
- package/_dist/components/icons/PaymentIcon/svgData.d.ts +5 -6
- package/_dist/components/icons/PlatformIcon/PlatformIcon.d.ts +3 -3
- package/_dist/components/inputs/Checkbox/Checkbox.d.ts +7 -7
- package/_dist/components/inputs/CheckboxFieldset/CheckboxFieldset.d.ts +9 -9
- package/_dist/components/inputs/CheckboxGroup/CheckboxGroup.d.ts +8 -8
- package/_dist/components/inputs/Combobox/Combobox.d.ts +22 -17
- package/_dist/components/inputs/ComboboxMultiselect/ComboboxMultiselect.d.ts +12 -12
- package/_dist/components/inputs/Datepicker/Datepicker.d.ts +96 -0
- package/_dist/components/inputs/FileUpload/FileUpload.d.ts +6 -6
- package/_dist/components/inputs/InputGroup/InputGroup.d.ts +2 -2
- package/_dist/components/inputs/RadioGroup/RadioGroup.d.ts +13 -13
- package/_dist/components/inputs/Select/Select.d.ts +23 -14
- package/_dist/components/inputs/Select/select-sample-data.d.ts +6 -0
- package/_dist/components/inputs/Switch/Switch.d.ts +9 -7
- package/_dist/components/inputs/TextInput/TextInput.d.ts +9 -9
- package/_dist/components/inputs/Textarea/Textarea.d.ts +14 -13
- package/_dist/components/inputs/input-utilities.d.ts +35 -35
- package/_dist/components/loading-indicators/Skeleton/Skeleton.d.ts +7 -7
- package/_dist/components/loading-indicators/Spinner/Spinner.d.ts +6 -6
- package/_dist/components/navigation/Breadcrumb/Breadcrumb.d.ts +6 -6
- package/_dist/components/navigation/ButtonNav/ButtonNav.d.ts +7 -7
- package/_dist/components/navigation/DashboardNav/DashboardNav.d.ts +6 -6
- package/_dist/components/navigation/DashboardNav/DashboardNavItem.d.ts +5 -6
- package/_dist/components/navigation/DashboardSearch/DashboardSearch.d.ts +10 -10
- package/_dist/components/navigation/DashboardSearch/SiteOptionDisplay.d.ts +7 -7
- package/_dist/components/navigation/DropdownMenu/DropdownMenu.d.ts +7 -7
- package/_dist/components/navigation/NavMenu/NavMenu.d.ts +8 -18
- package/_dist/components/navigation/NavMenu/NavMenuDropdown.d.ts +4 -4
- package/_dist/components/navigation/Navbar/Navbar.d.ts +8 -8
- package/_dist/components/navigation/SideNav/SideNav.d.ts +7 -7
- package/_dist/components/navigation/SideNavCompact/SideNavCompact.d.ts +7 -7
- package/_dist/components/navigation/SideNavGlobal/SideNavGlobal.d.ts +6 -6
- package/_dist/components/navigation/SideNavGlobal/SideNavGlobalItem.d.ts +5 -6
- package/_dist/components/navigation/TabMenu/TabMenu.d.ts +10 -10
- package/_dist/components/navigation/TabMenu/TabMenuDropdown.d.ts +4 -5
- package/_dist/components/navigation/UserMenu/UserMenu.d.ts +7 -7
- package/_dist/components/navigation/WorkspaceSelector/WorkspaceSelector.d.ts +24 -10
- package/_dist/components/navigation/navigation-utilities.d.ts +3 -3
- package/_dist/components/notifications/Banner/Banner.d.ts +11 -9
- package/_dist/components/notifications/InlineMessage/InlineMessage.d.ts +8 -7
- package/_dist/components/notifications/SectionMessage/SectionMessage.d.ts +9 -8
- package/_dist/components/notifications/Toaster/Toast.d.ts +6 -6
- package/_dist/components/notifications/Toaster/Toaster.d.ts +6 -6
- package/_dist/components/notifications/Toaster/useToast.d.ts +3 -3
- package/_dist/components/panels/ExpansionPanel/ExpansionPanel.d.ts +6 -6
- package/_dist/components/panels/ExpansionPanelGroup/ExpansionPanelGroup.d.ts +6 -6
- package/_dist/components/panels/Panel/Panel.d.ts +16 -9
- package/_dist/components/panels/PanelList/PanelList.d.ts +8 -4
- package/_dist/components/panels/PanelList/PanelRow.d.ts +6 -6
- package/_dist/components/progress-indicators/ProgressBar/ProgressBar.d.ts +8 -7
- package/_dist/components/progress-indicators/ProgressRing/ProgressRing.d.ts +6 -6
- package/_dist/components/steppers/Stepper/Stepper.d.ts +7 -7
- package/_dist/components/steppers/VerticalStepper/VerticalStep.d.ts +7 -7
- package/_dist/components/steppers/VerticalStepper/VerticalStepper.d.ts +6 -6
- package/_dist/components/steppers/VerticalStepper/vertical-stepper-sample-data.d.ts +3 -4
- package/_dist/components/tiles/AvatarTileList/AvatarTileList.d.ts +9 -9
- package/_dist/components/tiles/Tile/Tile.d.ts +7 -7
- package/_dist/components/tiles/TileGrid/TileGrid.d.ts +8 -8
- package/_dist/css/component-css/pds-avatar.css +1 -1
- package/_dist/css/component-css/pds-button.css +1 -1
- package/_dist/css/component-css/pds-checkbox.css +1 -1
- package/_dist/css/component-css/pds-code-block.css +1 -1
- package/_dist/css/component-css/pds-combobox-multiselect.css +1 -1
- package/_dist/css/component-css/pds-combobox.css +1 -1
- package/_dist/css/component-css/pds-dashboard-nav.css +1 -1
- package/_dist/css/component-css/pds-datepicker.css +3 -0
- package/_dist/css/component-css/pds-index.css +34 -16
- package/_dist/css/component-css/pds-indicator-badge.css +5 -3
- package/_dist/css/component-css/pds-input-utilities.css +1 -1
- package/_dist/css/component-css/pds-menu-button.css +1 -2
- package/_dist/css/component-css/pds-navbar.css +1 -1
- package/_dist/css/component-css/pds-panel-list.css +1 -1
- package/_dist/css/component-css/pds-pantheon-logo.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-radio-group.css +1 -1
- package/_dist/css/component-css/pds-section-message.css +1 -1
- package/_dist/css/component-css/pds-segmented-button.css +1 -1
- package/_dist/css/component-css/pds-select.css +1 -1
- package/_dist/css/component-css/pds-side-nav-compact.css +1 -1
- package/_dist/css/component-css/pds-side-nav-global.css +1 -1
- package/_dist/css/component-css/pds-side-nav.css +1 -2
- package/_dist/css/component-css/pds-site-card.css +1 -1
- package/_dist/css/component-css/pds-site-dashboard-heading.css +1 -1
- package/_dist/css/component-css/pds-switch.css +17 -1
- package/_dist/css/component-css/pds-tab-menu.css +1 -1
- package/_dist/css/component-css/pds-table.css +1 -1
- package/_dist/css/component-css/pds-tabs.css +1 -1
- package/_dist/css/component-css/pds-utility-button.css +1 -1
- package/_dist/css/component-css/pds-workspace-selector.css +1 -1
- package/_dist/css/design-tokens/pds-design-tokens-dark-mode.css +7 -0
- package/_dist/css/design-tokens/pds-design-tokens-light-mode.css +7 -0
- package/_dist/css/pds-components.css +34 -16
- package/_dist/css/pds-core.css +2 -2
- package/_dist/css/pds-layouts.css +1 -1
- package/_dist/index.css +1 -1
- package/_dist/index.d.ts +4 -2
- package/_dist/index.js +8372 -8581
- package/_dist/index.js.map +1 -1
- package/_dist/layouts/AppLayout/AppLayout.d.ts +7 -7
- package/_dist/layouts/Container/Container.d.ts +7 -7
- package/_dist/layouts/DashboardGlobal/DashboardGlobal.d.ts +13 -13
- package/_dist/layouts/DashboardInner/DashboardInner.d.ts +8 -7
- package/_dist/layouts/DocsLayout/DocsLayout.d.ts +7 -7
- package/_dist/layouts/FlexContainer/FlexContainer.d.ts +11 -11
- package/_dist/layouts/GlobalWrapper/GlobalWrapper.d.ts +3 -3
- package/_dist/layouts/SidebarLayout/SidebarLayout.d.ts +9 -8
- package/_dist/layouts/StepperLayout/StepperLayout.d.ts +2 -2
- package/_dist/layouts/ThreeItemLayout/ThreeItemLayout.d.ts +7 -7
- package/_dist/layouts/TwoItemLayout/TwoItemLayout.d.ts +7 -7
- package/_dist/libs/components/sb-docs-toc-layout.d.ts +2 -2
- package/_dist/libs/components/utility-components.d.ts +4 -4
- package/_dist/libs/types/custom-types.d.ts +46 -10
- package/_dist/{components/navigation → libs/types}/navigation-types.d.ts +15 -7
- package/_dist/mocks/data/navigation-items.d.ts +58 -147
- package/_dist/mocks/markup/dashboard-main-content.d.ts +3 -4
- package/_dist/mocks/markup/dashboard-navigation.d.ts +3 -4
- package/_dist/mocks/markup/inputs.d.ts +1 -2
- package/_dist/mocks/markup/modal.d.ts +1 -2
- package/_dist/mocks/markup/panel-row-content.d.ts +5 -6
- package/_dist/utilities/color/color-preview-swatches.d.ts +3 -4
- package/_dist/utilities/context-providers/OverlayContext/OverlayContext.d.ts +12 -0
- package/_dist/utilities/context-providers/ResponsiveContext/ResponsiveContext.d.ts +1 -1
- package/_dist/vars/animation.d.ts +2 -2
- package/package.json +50 -43
- /package/_dist/{components/inputs → libs/types}/input-types.d.ts +0 -0
- /package/_dist/{layouts → libs/types}/layout-types.d.ts +0 -0
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
2
2
|
import './payment-icon.css';
|
|
3
3
|
type PaymentType = 'visa' | 'mastercard' | 'amex' | 'discover' | 'generic';
|
|
4
4
|
/**
|
|
5
5
|
* Prop types for PaymentIcon
|
|
6
6
|
*/
|
|
7
7
|
export interface PaymentIconProps extends ComponentPropsWithoutRef<'div'> {
|
|
8
|
-
/**
|
|
9
|
-
* The type of payment icon to display.
|
|
10
|
-
*/
|
|
11
|
-
paymentType: PaymentType;
|
|
12
8
|
/**
|
|
13
9
|
* Additional class names
|
|
14
10
|
*/
|
|
15
11
|
className?: string;
|
|
12
|
+
/**
|
|
13
|
+
* The type of payment icon to display.
|
|
14
|
+
*/
|
|
15
|
+
paymentType: PaymentType;
|
|
16
16
|
}
|
|
17
17
|
/**
|
|
18
18
|
* PaymentIcon UI component
|
|
19
19
|
*/
|
|
20
|
-
export declare const PaymentIcon: ({
|
|
20
|
+
export declare const PaymentIcon: ({ className, paymentType, ...props }: PaymentIconProps) => import("react/jsx-runtime").JSX.Element;
|
|
21
21
|
export {};
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
export declare const svgData: {
|
|
3
|
-
amex:
|
|
4
|
-
discover:
|
|
5
|
-
generic:
|
|
6
|
-
mastercard:
|
|
7
|
-
visa:
|
|
2
|
+
amex: import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
discover: import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
generic: import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
mastercard: import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
visa: import("react/jsx-runtime").JSX.Element;
|
|
8
7
|
};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
2
2
|
import './platform-icon.css';
|
|
3
3
|
type PlatformType = 'drupal' | 'drupal7' | 'front-end-sites' | 'gatsby' | 'gatsby-wp' | 'import-custom' | 'next' | 'next-drupal' | 'next-wp' | 'wordpress';
|
|
4
4
|
interface PlatformIconProps extends ComponentPropsWithoutRef<'div'> {
|
|
5
|
-
platformType: PlatformType;
|
|
6
5
|
className?: string;
|
|
6
|
+
platformType: PlatformType;
|
|
7
7
|
}
|
|
8
8
|
/**
|
|
9
9
|
* PlatformIcon UI component
|
|
10
10
|
*/
|
|
11
|
-
export declare const PlatformIcon: ({
|
|
11
|
+
export declare const PlatformIcon: ({ className, platformType, ...props }: PlatformIconProps) => import("react/jsx-runtime").JSX.Element;
|
|
12
12
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import React, {
|
|
2
|
-
import { ValidationStatus } from '
|
|
1
|
+
import React, { ChangeEvent, ComponentPropsWithoutRef, FocusEvent, ReactNode } from 'react';
|
|
2
|
+
import { ValidationStatus } from '../../../libs/types/input-types';
|
|
3
3
|
import './checkbox.css';
|
|
4
4
|
/**
|
|
5
5
|
* Prop types for Checkbox
|
|
@@ -9,6 +9,10 @@ export interface CheckboxProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
9
9
|
* Checked state of the input. Used to set the checked status of the input field when controlled. Cannot be used in conjunction with the `defaultChecked` prop.
|
|
10
10
|
*/
|
|
11
11
|
checked?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Additional class names
|
|
14
|
+
*/
|
|
15
|
+
className?: string;
|
|
12
16
|
/**
|
|
13
17
|
* Default checked state. Setting this prop automatically makes the input uncontrolled. Cannot be used with the checked prop.
|
|
14
18
|
*/
|
|
@@ -30,7 +34,7 @@ export interface CheckboxProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
30
34
|
*/
|
|
31
35
|
inputProps?: ComponentPropsWithoutRef<'input'>;
|
|
32
36
|
/**
|
|
33
|
-
*
|
|
37
|
+
* Max-width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
|
|
34
38
|
*/
|
|
35
39
|
inputWidth?: number;
|
|
36
40
|
/**
|
|
@@ -85,10 +89,6 @@ export interface CheckboxProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
85
89
|
* Value attribute of the checkbox.
|
|
86
90
|
*/
|
|
87
91
|
value?: string;
|
|
88
|
-
/**
|
|
89
|
-
* Additional class names
|
|
90
|
-
*/
|
|
91
|
-
className?: string;
|
|
92
92
|
}
|
|
93
93
|
/**
|
|
94
94
|
* Checkbox UI component
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { ValidationStatus } from '
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
+
import { ValidationStatus } from '../../../libs/types/input-types';
|
|
3
3
|
import '../CheckboxGroup/checkbox-group.css';
|
|
4
4
|
/**
|
|
5
5
|
* Prop types for CheckboxFieldset
|
|
@@ -8,7 +8,11 @@ export interface CheckboxGroupWrapperProps extends ComponentPropsWithoutRef<'div
|
|
|
8
8
|
/**
|
|
9
9
|
* Individual checkboxes to be rendered within the group.
|
|
10
10
|
*/
|
|
11
|
-
children:
|
|
11
|
+
children: ReactNode;
|
|
12
|
+
/**
|
|
13
|
+
* Additional class names
|
|
14
|
+
*/
|
|
15
|
+
className?: string;
|
|
12
16
|
/**
|
|
13
17
|
* Is the field disabled?
|
|
14
18
|
*/
|
|
@@ -22,7 +26,7 @@ export interface CheckboxGroupWrapperProps extends ComponentPropsWithoutRef<'div
|
|
|
22
26
|
*/
|
|
23
27
|
id: string;
|
|
24
28
|
/**
|
|
25
|
-
*
|
|
29
|
+
* Max-width of the field. Accepts a number in pixels. Leave blank for width: 100%.
|
|
26
30
|
*/
|
|
27
31
|
inputWidth?: number;
|
|
28
32
|
/**
|
|
@@ -53,12 +57,8 @@ export interface CheckboxGroupWrapperProps extends ComponentPropsWithoutRef<'div
|
|
|
53
57
|
* Validation status of the input field.
|
|
54
58
|
*/
|
|
55
59
|
validationStatus?: ValidationStatus;
|
|
56
|
-
/**
|
|
57
|
-
* Additional class names
|
|
58
|
-
*/
|
|
59
|
-
className?: string;
|
|
60
60
|
}
|
|
61
61
|
/**
|
|
62
62
|
* CheckboxFieldset UI component
|
|
63
63
|
*/
|
|
64
|
-
export declare const CheckboxFieldset: ({ children, disabled, fieldsetProps, id, inputWidth, label, message, required, showLabel, tooltipText, validationMessage, validationStatus,
|
|
64
|
+
export declare const CheckboxFieldset: ({ children, className, disabled, fieldsetProps, id, inputWidth, label, message, required, showLabel, tooltipText, validationMessage, validationStatus, ...props }: CheckboxGroupWrapperProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { ValidationStatus } from '
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
+
import { ValidationStatus } from '../../../libs/types/input-types';
|
|
3
3
|
import './checkbox-group.css';
|
|
4
4
|
export type CheckboxOption = {
|
|
5
5
|
checked?: boolean;
|
|
@@ -13,6 +13,10 @@ export type CheckboxOption = {
|
|
|
13
13
|
* Prop types for CheckboxGroup
|
|
14
14
|
*/
|
|
15
15
|
export interface CheckboxGroupProps extends ComponentPropsWithoutRef<'div'> {
|
|
16
|
+
/**
|
|
17
|
+
* Additional class names
|
|
18
|
+
*/
|
|
19
|
+
className?: string;
|
|
16
20
|
/**
|
|
17
21
|
* Is the field disabled?
|
|
18
22
|
*/
|
|
@@ -26,7 +30,7 @@ export interface CheckboxGroupProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
26
30
|
*/
|
|
27
31
|
id: string;
|
|
28
32
|
/**
|
|
29
|
-
*
|
|
33
|
+
* Max-width of the field. Accepts a number in pixels. Leave blank for width: 100%.
|
|
30
34
|
*/
|
|
31
35
|
inputWidth?: number;
|
|
32
36
|
/**
|
|
@@ -69,12 +73,8 @@ export interface CheckboxGroupProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
69
73
|
* Validation status of the input field.
|
|
70
74
|
*/
|
|
71
75
|
validationStatus?: ValidationStatus;
|
|
72
|
-
/**
|
|
73
|
-
* Additional class names
|
|
74
|
-
*/
|
|
75
|
-
className?: string;
|
|
76
76
|
}
|
|
77
77
|
/**
|
|
78
78
|
* CheckboxGroup UI component
|
|
79
79
|
*/
|
|
80
|
-
export declare const CheckboxGroup: ({ disabled, fieldsetProps, id, inputWidth, label, message, onGroupBlur, onValueChange, options, required, showLabel, tooltipText, validationMessage, validationStatus,
|
|
80
|
+
export declare const CheckboxGroup: ({ className, disabled, fieldsetProps, id, inputWidth, label, message, onGroupBlur, onValueChange, options, required, showLabel, tooltipText, validationMessage, validationStatus, ...props }: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { ChangeEvent, ComponentPropsWithoutRef, FocusEvent, ReactNode } from 'react';
|
|
2
|
-
import { ValidationStatus } from '
|
|
2
|
+
import { ValidationStatus } from '../../../libs/types/input-types';
|
|
3
3
|
import './combobox.css';
|
|
4
4
|
type LabelStrings = {
|
|
5
5
|
clearButton?: string;
|
|
@@ -8,16 +8,20 @@ type LabelStrings = {
|
|
|
8
8
|
triggerButton?: string;
|
|
9
9
|
};
|
|
10
10
|
export type ComboboxOption = {
|
|
11
|
+
[otherOptions: string]: unknown;
|
|
11
12
|
label: string;
|
|
12
13
|
optionDisplay?: ReactNode;
|
|
13
14
|
searchIndex?: string[];
|
|
14
15
|
value: string;
|
|
15
|
-
[otherOptions: string]: unknown;
|
|
16
16
|
};
|
|
17
17
|
/**
|
|
18
18
|
* Prop types for Combobox
|
|
19
19
|
*/
|
|
20
20
|
export interface ComboboxProps extends ComponentPropsWithoutRef<'div'> {
|
|
21
|
+
/**
|
|
22
|
+
* Additional class names
|
|
23
|
+
*/
|
|
24
|
+
className?: string;
|
|
21
25
|
/**
|
|
22
26
|
* Optional default value for the field.
|
|
23
27
|
*/
|
|
@@ -47,17 +51,13 @@ export interface ComboboxProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
47
51
|
*/
|
|
48
52
|
id: string;
|
|
49
53
|
/**
|
|
50
|
-
*
|
|
54
|
+
* Max-width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
|
|
51
55
|
*/
|
|
52
56
|
inputWidth?: number;
|
|
53
57
|
/**
|
|
54
58
|
* Are the options in the process of being loaded?
|
|
55
59
|
*/
|
|
56
60
|
isLoading?: boolean;
|
|
57
|
-
/**
|
|
58
|
-
* Text to display when options are still loading.
|
|
59
|
-
*/
|
|
60
|
-
loadingText?: string;
|
|
61
61
|
/**
|
|
62
62
|
* Field label.
|
|
63
63
|
*/
|
|
@@ -66,6 +66,10 @@ export interface ComboboxProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
66
66
|
* Translation strings for various labels or other visually-hidden text.
|
|
67
67
|
*/
|
|
68
68
|
labelStrings?: LabelStrings;
|
|
69
|
+
/**
|
|
70
|
+
* Text to display when options are still loading.
|
|
71
|
+
*/
|
|
72
|
+
loadingText?: string;
|
|
69
73
|
/**
|
|
70
74
|
* Message or description used to help clarify the usage of the input.
|
|
71
75
|
*/
|
|
@@ -74,14 +78,14 @@ export interface ComboboxProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
74
78
|
* Text to display when there are no results.
|
|
75
79
|
*/
|
|
76
80
|
noResultsText?: string;
|
|
77
|
-
/**
|
|
78
|
-
* onChange event handler.
|
|
79
|
-
*/
|
|
80
|
-
onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
81
81
|
/**
|
|
82
82
|
* onBlur event handler.
|
|
83
83
|
*/
|
|
84
84
|
onBlur?: (e: FocusEvent<HTMLInputElement>) => void;
|
|
85
|
+
/**
|
|
86
|
+
* onChange event handler.
|
|
87
|
+
*/
|
|
88
|
+
onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
85
89
|
/**
|
|
86
90
|
* Callback when the input is cleared.
|
|
87
91
|
*/
|
|
@@ -111,13 +115,14 @@ export interface ComboboxProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
111
115
|
*/
|
|
112
116
|
showLabel?: boolean;
|
|
113
117
|
/**
|
|
114
|
-
*
|
|
118
|
+
* Should all options be displayed before any input is entered?
|
|
119
|
+
* When true, clicking or focusing the input will show all available options before typing.
|
|
115
120
|
*/
|
|
116
|
-
|
|
121
|
+
showUnfilteredOptions?: boolean;
|
|
117
122
|
/**
|
|
118
|
-
*
|
|
123
|
+
* Optional tooltip text to display additional information.
|
|
119
124
|
*/
|
|
120
|
-
|
|
125
|
+
tooltipText?: string | null;
|
|
121
126
|
/**
|
|
122
127
|
* Validation message for the input field based on the validation status.
|
|
123
128
|
*/
|
|
@@ -127,9 +132,9 @@ export interface ComboboxProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
127
132
|
*/
|
|
128
133
|
validationStatus?: ValidationStatus;
|
|
129
134
|
/**
|
|
130
|
-
*
|
|
135
|
+
* Value attribute of input
|
|
131
136
|
*/
|
|
132
|
-
|
|
137
|
+
value?: string;
|
|
133
138
|
}
|
|
134
139
|
/**
|
|
135
140
|
* Combobox UI component
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
2
2
|
import './combobox-multiselect.css';
|
|
3
3
|
type LabelStrings = {
|
|
4
4
|
inputInstructions?: string;
|
|
@@ -6,14 +6,18 @@ type LabelStrings = {
|
|
|
6
6
|
};
|
|
7
7
|
interface OptionProps {
|
|
8
8
|
id: string;
|
|
9
|
-
label: string;
|
|
10
9
|
isAlreadySelected?: boolean;
|
|
10
|
+
label: string;
|
|
11
11
|
}
|
|
12
12
|
type DivProps = Omit<ComponentPropsWithoutRef<'div'>, 'onChange'>;
|
|
13
13
|
/**
|
|
14
14
|
* Prop types for ComboboxMultiselect
|
|
15
15
|
*/
|
|
16
16
|
export interface ComboboxMultiselectProps extends DivProps {
|
|
17
|
+
/**
|
|
18
|
+
* Additional class names
|
|
19
|
+
*/
|
|
20
|
+
className?: string;
|
|
17
21
|
/**
|
|
18
22
|
* Is the field disabled?
|
|
19
23
|
*/
|
|
@@ -27,17 +31,13 @@ export interface ComboboxMultiselectProps extends DivProps {
|
|
|
27
31
|
*/
|
|
28
32
|
initialSelectedItems?: OptionProps[];
|
|
29
33
|
/**
|
|
30
|
-
*
|
|
34
|
+
* Max-width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
|
|
31
35
|
*/
|
|
32
36
|
inputWidth?: number;
|
|
33
37
|
/**
|
|
34
38
|
* Are the options in the process of being loaded?
|
|
35
39
|
*/
|
|
36
40
|
isLoading?: boolean;
|
|
37
|
-
/**
|
|
38
|
-
* Text to display when options are still loading.
|
|
39
|
-
*/
|
|
40
|
-
loadingText?: string;
|
|
41
41
|
/**
|
|
42
42
|
* Label for the combobox multiselect
|
|
43
43
|
*/
|
|
@@ -46,6 +46,10 @@ export interface ComboboxMultiselectProps extends DivProps {
|
|
|
46
46
|
* Translation strings for various labels or other visually-hidden text.
|
|
47
47
|
*/
|
|
48
48
|
labelStrings?: LabelStrings;
|
|
49
|
+
/**
|
|
50
|
+
* Text to display when options are still loading.
|
|
51
|
+
*/
|
|
52
|
+
loadingText?: string;
|
|
49
53
|
/**
|
|
50
54
|
* Text to display when there are no results.
|
|
51
55
|
*/
|
|
@@ -70,14 +74,10 @@ export interface ComboboxMultiselectProps extends DivProps {
|
|
|
70
74
|
* Should the label be visible? If false, it will render for screen readers only.
|
|
71
75
|
*/
|
|
72
76
|
showLabel?: boolean;
|
|
73
|
-
/**
|
|
74
|
-
* Additional class names
|
|
75
|
-
*/
|
|
76
|
-
className?: string;
|
|
77
77
|
}
|
|
78
78
|
export declare const getFilteredOptions: (options: OptionProps[], selectedItems: OptionProps[], inputValue: string) => OptionProps[];
|
|
79
79
|
/**
|
|
80
80
|
* ComboboxMultiselect UI component
|
|
81
81
|
*/
|
|
82
|
-
export declare const ComboboxMultiselect: ({ disabled, id, initialSelectedItems, inputWidth, isLoading, label, labelStrings, loadingText, noResultsText, onChange, options, placeholder, required, showLabel,
|
|
82
|
+
export declare const ComboboxMultiselect: ({ className, disabled, id, initialSelectedItems, inputWidth, isLoading, label, labelStrings, loadingText, noResultsText, onChange, options, placeholder, required, showLabel, ...props }: ComboboxMultiselectProps) => import("react/jsx-runtime").JSX.Element;
|
|
83
83
|
export {};
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import { HTMLAttributes } from 'react';
|
|
2
|
+
import { Locale } from 'date-fns';
|
|
3
|
+
import { DateRange } from 'react-day-picker';
|
|
4
|
+
import 'react-day-picker/dist/style.css';
|
|
5
|
+
import './datepicker.css';
|
|
6
|
+
type PresetType = 'today' | 'current-week' | 'current-month' | 'last-week' | 'last-month';
|
|
7
|
+
export interface CustomPresetConfig {
|
|
8
|
+
custom?: () => DateRange;
|
|
9
|
+
days?: number;
|
|
10
|
+
label: string;
|
|
11
|
+
type?: PresetType;
|
|
12
|
+
}
|
|
13
|
+
export interface DatepickerTranslationStrings {
|
|
14
|
+
clearButton?: string;
|
|
15
|
+
doneButton?: string;
|
|
16
|
+
noDateRangeSelected?: string;
|
|
17
|
+
noDateSelected?: string;
|
|
18
|
+
pleaseSelectEndDate?: string;
|
|
19
|
+
selectedDate?: string;
|
|
20
|
+
selectedDateRange?: string;
|
|
21
|
+
selectedStartDate?: string;
|
|
22
|
+
to?: string;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* Prop types for Datepicker.
|
|
26
|
+
*/
|
|
27
|
+
type DatepickerHTMLProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'>;
|
|
28
|
+
export interface DatepickerProps extends DatepickerHTMLProps {
|
|
29
|
+
/**
|
|
30
|
+
* Additional class names.
|
|
31
|
+
*/
|
|
32
|
+
className?: string;
|
|
33
|
+
/**
|
|
34
|
+
* Is the field disabled?
|
|
35
|
+
*/
|
|
36
|
+
disabled?: boolean;
|
|
37
|
+
/**
|
|
38
|
+
* Has date range selection. If false, single date selection is used.
|
|
39
|
+
*/
|
|
40
|
+
hasDateRange?: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* Input ID.
|
|
43
|
+
*/
|
|
44
|
+
id: string;
|
|
45
|
+
/**
|
|
46
|
+
* Max-width of the input field. Accepts a number in pixels.
|
|
47
|
+
* Numbers below 160 will display at 160px.
|
|
48
|
+
* Leave blank for width: 100%.
|
|
49
|
+
*/
|
|
50
|
+
inputWidth?: number;
|
|
51
|
+
/**
|
|
52
|
+
* Input label.
|
|
53
|
+
*/
|
|
54
|
+
label: string;
|
|
55
|
+
/**
|
|
56
|
+
* Locale from date-fns for internationalization.
|
|
57
|
+
*/
|
|
58
|
+
locale?: Locale;
|
|
59
|
+
/**
|
|
60
|
+
* onChange handler
|
|
61
|
+
*/
|
|
62
|
+
onChange?: (value: DateRange | Date | undefined) => void;
|
|
63
|
+
/**
|
|
64
|
+
* Placeholder text for the trigger button.
|
|
65
|
+
*/
|
|
66
|
+
placeholder?: string;
|
|
67
|
+
/**
|
|
68
|
+
* Optional preset date ranges (only available when hasDateRange is true).
|
|
69
|
+
*/
|
|
70
|
+
presets?: CustomPresetConfig[];
|
|
71
|
+
/**
|
|
72
|
+
* Is this field required?
|
|
73
|
+
*/
|
|
74
|
+
required?: boolean;
|
|
75
|
+
/**
|
|
76
|
+
* Should the label be visible? If false, it will render for screen readers only.
|
|
77
|
+
*/
|
|
78
|
+
showLabel?: boolean;
|
|
79
|
+
/**
|
|
80
|
+
* Optional tooltip text to display additional information.
|
|
81
|
+
*/
|
|
82
|
+
tooltipText?: string | null;
|
|
83
|
+
/**
|
|
84
|
+
* Translation strings for labels.
|
|
85
|
+
*/
|
|
86
|
+
translationStrings?: DatepickerTranslationStrings;
|
|
87
|
+
/**
|
|
88
|
+
* Selected date or date range.
|
|
89
|
+
*/
|
|
90
|
+
value?: DateRange | Date;
|
|
91
|
+
}
|
|
92
|
+
/**
|
|
93
|
+
* Datepicker UI component.
|
|
94
|
+
*/
|
|
95
|
+
export declare const Datepicker: ({ className, disabled, hasDateRange, id, inputWidth, label, locale, onChange, placeholder, presets, required, showLabel, tooltipText, translationStrings, value, ...props }: DatepickerProps) => import("react/jsx-runtime").JSX.Element;
|
|
96
|
+
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React, { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
|
-
import { ValidationStatus } from '
|
|
2
|
+
import { ValidationStatus } from '../../../libs/types/input-types';
|
|
3
3
|
import './file-upload.css';
|
|
4
4
|
type LabelStrings = {
|
|
5
5
|
chooseFile: string;
|
|
@@ -13,6 +13,10 @@ export interface FileUploadProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
13
13
|
* File types the input should accept. Leave null for all file types.
|
|
14
14
|
*/
|
|
15
15
|
accept?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Additional class names
|
|
18
|
+
*/
|
|
19
|
+
className?: string;
|
|
16
20
|
/**
|
|
17
21
|
* Default value for the input field as a string that represents the path to a file.
|
|
18
22
|
*/
|
|
@@ -34,7 +38,7 @@ export interface FileUploadProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
34
38
|
*/
|
|
35
39
|
inputProps?: ComponentPropsWithoutRef<'input'>;
|
|
36
40
|
/**
|
|
37
|
-
*
|
|
41
|
+
* Max-width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
|
|
38
42
|
*/
|
|
39
43
|
inputWidth?: number;
|
|
40
44
|
/**
|
|
@@ -81,10 +85,6 @@ export interface FileUploadProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
81
85
|
* Validation status of the input field.
|
|
82
86
|
*/
|
|
83
87
|
validationStatus?: ValidationStatus;
|
|
84
|
-
/**
|
|
85
|
-
* Additional class names
|
|
86
|
-
*/
|
|
87
|
-
className?: string;
|
|
88
88
|
}
|
|
89
89
|
/**
|
|
90
90
|
* FileUpload UI component
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { ComponentPropsWithoutRef, ReactNode } from 'react';
|
|
2
2
|
import './input-group.css';
|
|
3
3
|
/**
|
|
4
4
|
* Prop types for InputGroup
|
|
@@ -16,4 +16,4 @@ export interface InputGroupProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
16
16
|
/**
|
|
17
17
|
* InputGroup UI component
|
|
18
18
|
*/
|
|
19
|
-
export declare const InputGroup: ({ children, className, ...props }: InputGroupProps) =>
|
|
19
|
+
export declare const InputGroup: ({ children, className, ...props }: InputGroupProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { ValidationStatus } from '
|
|
1
|
+
import { ChangeEvent, ComponentPropsWithoutRef, FocusEvent, ReactNode } from 'react';
|
|
2
|
+
import { ValidationStatus } from '../../../libs/types/input-types';
|
|
3
3
|
import './radio-group.css';
|
|
4
4
|
export interface RadioOption {
|
|
5
5
|
/**
|
|
@@ -23,24 +23,28 @@ export interface RadioOption {
|
|
|
23
23
|
}
|
|
24
24
|
export interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {
|
|
25
25
|
/**
|
|
26
|
-
*
|
|
26
|
+
* Additional class names
|
|
27
27
|
*/
|
|
28
|
-
|
|
28
|
+
className?: string;
|
|
29
29
|
/**
|
|
30
|
-
*
|
|
30
|
+
* Optional default value
|
|
31
31
|
*/
|
|
32
|
-
|
|
32
|
+
defaultValue?: string;
|
|
33
33
|
/**
|
|
34
34
|
* is the radio group disabled
|
|
35
35
|
* @default false
|
|
36
36
|
*/
|
|
37
37
|
disabled?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Additional props for the `<fieldset>` element.
|
|
40
|
+
*/
|
|
41
|
+
fieldsetProps?: ComponentPropsWithoutRef<'fieldset'>;
|
|
38
42
|
/**
|
|
39
43
|
* Unique ID for the radio group
|
|
40
44
|
*/
|
|
41
45
|
id: string;
|
|
42
46
|
/**
|
|
43
|
-
*
|
|
47
|
+
* Max-width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
|
|
44
48
|
*/
|
|
45
49
|
inputWidth?: number;
|
|
46
50
|
/**
|
|
@@ -54,7 +58,7 @@ export interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
54
58
|
/**
|
|
55
59
|
* Callback function that will return the updated value from the instance when it changes.
|
|
56
60
|
*/
|
|
57
|
-
onBlur?: (event:
|
|
61
|
+
onBlur?: (event: FocusEvent<HTMLDivElement>) => void;
|
|
58
62
|
/**
|
|
59
63
|
* onChange event handler. Controlled inputs should use this to manage the input value. Uncontrolled inputs will manage their own state, but may still use this to access the event object.
|
|
60
64
|
*/
|
|
@@ -93,12 +97,8 @@ export interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
93
97
|
* Value of the radio group. Used to set the value of the field when controlled. Cannot be used in conjunction with the `defaultValue` prop.
|
|
94
98
|
*/
|
|
95
99
|
value?: string;
|
|
96
|
-
/**
|
|
97
|
-
* Additional class names
|
|
98
|
-
*/
|
|
99
|
-
className?: string;
|
|
100
100
|
}
|
|
101
101
|
/**
|
|
102
102
|
* RadioGroup UI component
|
|
103
103
|
*/
|
|
104
|
-
export declare const RadioGroup: ({ defaultValue, disabled, fieldsetProps, id, inputWidth, label, message, onBlur, onChange, onValueChange, options, required, showLabel, tooltipText, validationMessage, validationStatus, value,
|
|
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;
|
|
@@ -1,11 +1,20 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { ValidationStatus } from '
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { ValidationStatus } from '../../../libs/types/input-types';
|
|
3
|
+
import { PDSIcon } from '../../icons/Icon/Icon';
|
|
3
4
|
import './select.css';
|
|
4
5
|
type LabelStrings = {
|
|
5
6
|
selectOptionText: string;
|
|
6
7
|
triggerButton: string;
|
|
7
8
|
};
|
|
8
9
|
export type SelectOptionType = {
|
|
10
|
+
/**
|
|
11
|
+
* Option disabled.
|
|
12
|
+
*/
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* Optional icon to display before the option label.
|
|
16
|
+
*/
|
|
17
|
+
icon?: PDSIcon;
|
|
9
18
|
/**
|
|
10
19
|
* Option label.
|
|
11
20
|
*/
|
|
@@ -14,10 +23,6 @@ export type SelectOptionType = {
|
|
|
14
23
|
* Option value.
|
|
15
24
|
*/
|
|
16
25
|
value: string;
|
|
17
|
-
/**
|
|
18
|
-
* Option disabled.
|
|
19
|
-
*/
|
|
20
|
-
disabled?: boolean;
|
|
21
26
|
};
|
|
22
27
|
export type SelectOptionGroupType = {
|
|
23
28
|
/**
|
|
@@ -31,13 +36,17 @@ export type SelectOptionGroupType = {
|
|
|
31
36
|
};
|
|
32
37
|
export type SelectOptionsType = (SelectOptionType | SelectOptionGroupType)[];
|
|
33
38
|
interface SelectOptionGroupProps {
|
|
34
|
-
label: string;
|
|
35
39
|
children: ReactNode;
|
|
40
|
+
label: string;
|
|
36
41
|
}
|
|
37
42
|
/**
|
|
38
43
|
* Prop types for Select
|
|
39
44
|
*/
|
|
40
45
|
export interface SelectProps {
|
|
46
|
+
/**
|
|
47
|
+
* Additional class names
|
|
48
|
+
*/
|
|
49
|
+
className?: string;
|
|
41
50
|
/**
|
|
42
51
|
* Optional default value for the field. Must match the value of one of the options. Cannot be used in conjunction with the `value` prop.
|
|
43
52
|
*/
|
|
@@ -46,12 +55,16 @@ export interface SelectProps {
|
|
|
46
55
|
* Is the field disabled?
|
|
47
56
|
*/
|
|
48
57
|
disabled?: boolean;
|
|
58
|
+
/**
|
|
59
|
+
* Optional icon to display before the placeholder text (selectOptionText). Only shows when no value is selected.
|
|
60
|
+
*/
|
|
61
|
+
icon?: PDSIcon;
|
|
49
62
|
/**
|
|
50
63
|
* Input ID.
|
|
51
64
|
*/
|
|
52
65
|
id: string;
|
|
53
66
|
/**
|
|
54
|
-
*
|
|
67
|
+
* Max-width of the input field. Accepts a number in pixels. Leave blank for width: 100%.
|
|
55
68
|
*/
|
|
56
69
|
inputWidth?: number;
|
|
57
70
|
/**
|
|
@@ -106,17 +119,13 @@ export interface SelectProps {
|
|
|
106
119
|
* Value of the field. Must match the value of one of the options. Used to set the value of the field when controlled. Cannot be used in conjunction with the `defaultValue` prop.
|
|
107
120
|
*/
|
|
108
121
|
value?: string;
|
|
109
|
-
/**
|
|
110
|
-
* Additional class names
|
|
111
|
-
*/
|
|
112
|
-
className?: string;
|
|
113
122
|
}
|
|
114
123
|
/**
|
|
115
124
|
* SelectOptionGroup component
|
|
116
125
|
*/
|
|
117
|
-
export declare const SelectOptionGroup: ({
|
|
126
|
+
export declare const SelectOptionGroup: ({ children, label, }: SelectOptionGroupProps) => import("react/jsx-runtime").JSX.Element;
|
|
118
127
|
/**
|
|
119
128
|
* Select UI component
|
|
120
129
|
*/
|
|
121
|
-
export declare const Select: ({ defaultValue, disabled, id, inputWidth, label, labelStrings, message, onBlur, onFocus, onOptionSelect, options, required, showLabel, tooltipText, validationMessage, validationStatus, value,
|
|
130
|
+
export declare const Select: ({ 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;
|
|
122
131
|
export {};
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { SelectOptionsType, SelectOptionType } from './Select';
|
|
2
|
+
export declare const githubAccountOptions: SelectOptionType[];
|
|
3
|
+
export declare const userRoleOptions: SelectOptionType[];
|
|
4
|
+
export declare const validationExampleOptions: SelectOptionType[];
|
|
5
|
+
export declare const sampleSelectOptionsWithGroups: SelectOptionsType;
|
|
6
|
+
export declare const sampleSelectOptions: SelectOptionType[];
|