@porsche-design-system/components-react 4.0.0-beta.1 → 4.0.0-beta.3
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/CHANGELOG.md +377 -7
- package/cjs/lib/components/button-pure.wrapper.cjs +3 -3
- package/cjs/lib/components/display.wrapper.cjs +1 -0
- package/cjs/lib/components/flag.wrapper.cjs +1 -1
- package/cjs/lib/components/heading.wrapper.cjs +3 -3
- package/cjs/lib/components/icon.wrapper.cjs +1 -1
- package/cjs/lib/components/link-pure.wrapper.cjs +3 -3
- package/cjs/lib/components/scroller.wrapper.cjs +3 -3
- package/cjs/lib/components/spinner.wrapper.cjs +3 -3
- package/cjs/lib/components/table.wrapper.cjs +3 -3
- package/cjs/lib/components/tabs-bar.wrapper.cjs +3 -3
- package/cjs/lib/components/tabs.wrapper.cjs +3 -3
- package/cjs/lib/components/text.wrapper.cjs +1 -1
- package/esm/lib/components/accordion.wrapper.d.ts +8 -8
- package/esm/lib/components/button-pure.wrapper.d.ts +15 -7
- package/esm/lib/components/button-pure.wrapper.mjs +3 -3
- package/esm/lib/components/button-tile.wrapper.d.ts +2 -2
- package/esm/lib/components/button.wrapper.d.ts +6 -6
- package/esm/lib/components/carousel.wrapper.d.ts +10 -10
- package/esm/lib/components/checkbox.wrapper.d.ts +6 -6
- package/esm/lib/components/crest.wrapper.d.ts +6 -6
- package/esm/lib/components/display.wrapper.d.ts +1 -0
- package/esm/lib/components/display.wrapper.mjs +1 -0
- package/esm/lib/components/drilldown-link.wrapper.d.ts +8 -8
- package/esm/lib/components/drilldown.wrapper.d.ts +8 -8
- package/esm/lib/components/fieldset.wrapper.d.ts +6 -6
- package/esm/lib/components/flag.wrapper.d.ts +5 -5
- package/esm/lib/components/flag.wrapper.mjs +1 -1
- package/esm/lib/components/flyout.wrapper.d.ts +2 -2
- package/esm/lib/components/heading.wrapper.d.ts +19 -11
- package/esm/lib/components/heading.wrapper.mjs +3 -3
- package/esm/lib/components/icon.wrapper.d.ts +7 -7
- package/esm/lib/components/icon.wrapper.mjs +1 -1
- package/esm/lib/components/input-date.wrapper.d.ts +12 -12
- package/esm/lib/components/input-email.wrapper.d.ts +8 -8
- package/esm/lib/components/input-month.wrapper.d.ts +12 -12
- package/esm/lib/components/input-number.wrapper.d.ts +8 -8
- package/esm/lib/components/input-password.wrapper.d.ts +6 -6
- package/esm/lib/components/input-search.wrapper.d.ts +6 -6
- package/esm/lib/components/input-tel.wrapper.d.ts +6 -6
- package/esm/lib/components/input-text.wrapper.d.ts +6 -6
- package/esm/lib/components/input-time.wrapper.d.ts +14 -14
- package/esm/lib/components/input-url.wrapper.d.ts +16 -16
- package/esm/lib/components/input-week.wrapper.d.ts +14 -14
- package/esm/lib/components/link-pure.wrapper.d.ts +23 -15
- package/esm/lib/components/link-pure.wrapper.mjs +3 -3
- package/esm/lib/components/link-tile-product.wrapper.d.ts +8 -8
- package/esm/lib/components/link-tile.wrapper.d.ts +8 -8
- package/esm/lib/components/link.wrapper.d.ts +14 -14
- package/esm/lib/components/modal.wrapper.d.ts +2 -2
- package/esm/lib/components/model-signature.wrapper.d.ts +2 -2
- package/esm/lib/components/multi-select.wrapper.d.ts +10 -10
- package/esm/lib/components/pin-code.wrapper.d.ts +8 -8
- package/esm/lib/components/popover.wrapper.d.ts +6 -6
- package/esm/lib/components/radio-group-option.wrapper.d.ts +2 -2
- package/esm/lib/components/radio-group.wrapper.d.ts +8 -8
- package/esm/lib/components/scroller.wrapper.d.ts +20 -4
- package/esm/lib/components/scroller.wrapper.mjs +3 -3
- package/esm/lib/components/segmented-control-item.wrapper.d.ts +4 -4
- package/esm/lib/components/segmented-control.wrapper.d.ts +4 -4
- package/esm/lib/components/select.wrapper.d.ts +10 -10
- package/esm/lib/components/sheet.wrapper.d.ts +2 -2
- package/esm/lib/components/spinner.wrapper.d.ts +13 -5
- package/esm/lib/components/spinner.wrapper.mjs +3 -3
- package/esm/lib/components/switch.wrapper.d.ts +6 -6
- package/esm/lib/components/table-cell.wrapper.d.ts +2 -2
- package/esm/lib/components/table-head-cell.wrapper.d.ts +4 -4
- package/esm/lib/components/table.wrapper.d.ts +10 -2
- package/esm/lib/components/table.wrapper.mjs +3 -3
- package/esm/lib/components/tabs-bar.wrapper.d.ts +21 -5
- package/esm/lib/components/tabs-bar.wrapper.mjs +3 -3
- package/esm/lib/components/tabs.wrapper.d.ts +21 -5
- package/esm/lib/components/tabs.wrapper.mjs +3 -3
- package/esm/lib/components/tag-dismissible.wrapper.d.ts +6 -6
- package/esm/lib/components/tag.wrapper.d.ts +2 -2
- package/esm/lib/components/text.wrapper.d.ts +12 -12
- package/esm/lib/components/text.wrapper.mjs +1 -1
- package/esm/lib/components/textarea.wrapper.d.ts +6 -6
- package/esm/lib/components/wordmark.wrapper.d.ts +8 -8
- package/esm/lib/types.d.ts +356 -157
- package/global-styles/cn/index.css +3 -7
- package/global-styles/index.css +3 -7
- package/global-styles/variables.css +3 -7
- package/package.json +6 -2
- package/ssr/cjs/components/dist/styles/esm/styles-entry.cjs +641 -533
- package/ssr/cjs/components/dist/utils/esm/utils-entry.cjs +20 -19
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/button-pure.wrapper.cjs +4 -4
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/display.wrapper.cjs +1 -0
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/flag.wrapper.cjs +1 -1
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/heading.wrapper.cjs +4 -4
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/icon.wrapper.cjs +1 -1
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/link-pure.wrapper.cjs +4 -4
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/scroller.wrapper.cjs +4 -4
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/spinner.wrapper.cjs +4 -4
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/table.wrapper.cjs +4 -4
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/tabs-bar.wrapper.cjs +4 -4
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/tabs.wrapper.cjs +4 -4
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/components/text.wrapper.cjs +1 -1
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-pure.cjs +3 -2
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/carousel.cjs +2 -2
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/checkbox.cjs +1 -1
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/display.cjs +2 -0
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/drilldown-item.cjs +2 -2
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/flyout.cjs +1 -1
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/heading.cjs +1 -1
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/input-base.cjs +1 -1
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-pure.cjs +1 -1
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/radio-group-option.cjs +1 -1
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/radio-group.cjs +1 -1
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/scroller.cjs +8 -12
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-option.cjs +1 -1
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/spinner.cjs +2 -2
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/stepper-horizontal.cjs +3 -2
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/switch.cjs +1 -1
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table.cjs +1 -1
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs-bar.cjs +8 -8
- package/ssr/cjs/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs.cjs +3 -2
- package/ssr/esm/components/dist/styles/esm/styles-entry.mjs +641 -533
- package/ssr/esm/components/dist/utils/esm/utils-entry.mjs +21 -18
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/button-pure.wrapper.mjs +4 -4
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/display.wrapper.mjs +1 -0
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/flag.wrapper.mjs +1 -1
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/heading.wrapper.mjs +4 -4
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/icon.wrapper.mjs +1 -1
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/link-pure.wrapper.mjs +4 -4
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/scroller.wrapper.mjs +4 -4
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/spinner.wrapper.mjs +4 -4
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/table.wrapper.mjs +4 -4
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/tabs-bar.wrapper.mjs +4 -4
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/tabs.wrapper.mjs +4 -4
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/components/text.wrapper.mjs +1 -1
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/button-pure.mjs +3 -2
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/carousel.mjs +2 -2
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/checkbox.mjs +1 -1
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/display.mjs +2 -0
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/drilldown-item.mjs +2 -2
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/flyout.mjs +1 -1
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/heading.mjs +1 -1
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/input-base.mjs +1 -1
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/link-pure.mjs +1 -1
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/radio-group-option.mjs +1 -1
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/radio-group.mjs +1 -1
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/scroller.mjs +9 -13
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/select-option.mjs +1 -1
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/spinner.mjs +2 -2
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/stepper-horizontal.mjs +3 -2
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/switch.mjs +1 -1
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/table.mjs +1 -1
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs-bar.mjs +8 -8
- package/ssr/esm/components-react/projects/react-ssr-wrapper/src/lib/dsr-components/tabs.mjs +3 -2
- package/ssr/esm/lib/components/accordion.wrapper.d.ts +8 -8
- package/ssr/esm/lib/components/button-pure.wrapper.d.ts +15 -7
- package/ssr/esm/lib/components/button-tile.wrapper.d.ts +2 -2
- package/ssr/esm/lib/components/button.wrapper.d.ts +6 -6
- package/ssr/esm/lib/components/carousel.wrapper.d.ts +10 -10
- package/ssr/esm/lib/components/checkbox.wrapper.d.ts +6 -6
- package/ssr/esm/lib/components/crest.wrapper.d.ts +6 -6
- package/ssr/esm/lib/components/display.wrapper.d.ts +1 -0
- package/ssr/esm/lib/components/drilldown-link.wrapper.d.ts +8 -8
- package/ssr/esm/lib/components/drilldown.wrapper.d.ts +8 -8
- package/ssr/esm/lib/components/fieldset.wrapper.d.ts +6 -6
- package/ssr/esm/lib/components/flag.wrapper.d.ts +5 -5
- package/ssr/esm/lib/components/flyout.wrapper.d.ts +2 -2
- package/ssr/esm/lib/components/heading.wrapper.d.ts +19 -11
- package/ssr/esm/lib/components/icon.wrapper.d.ts +7 -7
- package/ssr/esm/lib/components/input-date.wrapper.d.ts +12 -12
- package/ssr/esm/lib/components/input-email.wrapper.d.ts +8 -8
- package/ssr/esm/lib/components/input-month.wrapper.d.ts +12 -12
- package/ssr/esm/lib/components/input-number.wrapper.d.ts +8 -8
- package/ssr/esm/lib/components/input-password.wrapper.d.ts +6 -6
- package/ssr/esm/lib/components/input-search.wrapper.d.ts +6 -6
- package/ssr/esm/lib/components/input-tel.wrapper.d.ts +6 -6
- package/ssr/esm/lib/components/input-text.wrapper.d.ts +6 -6
- package/ssr/esm/lib/components/input-time.wrapper.d.ts +14 -14
- package/ssr/esm/lib/components/input-url.wrapper.d.ts +16 -16
- package/ssr/esm/lib/components/input-week.wrapper.d.ts +14 -14
- package/ssr/esm/lib/components/link-pure.wrapper.d.ts +23 -15
- package/ssr/esm/lib/components/link-tile-product.wrapper.d.ts +8 -8
- package/ssr/esm/lib/components/link-tile.wrapper.d.ts +8 -8
- package/ssr/esm/lib/components/link.wrapper.d.ts +14 -14
- package/ssr/esm/lib/components/modal.wrapper.d.ts +2 -2
- package/ssr/esm/lib/components/model-signature.wrapper.d.ts +2 -2
- package/ssr/esm/lib/components/multi-select.wrapper.d.ts +10 -10
- package/ssr/esm/lib/components/pin-code.wrapper.d.ts +8 -8
- package/ssr/esm/lib/components/popover.wrapper.d.ts +6 -6
- package/ssr/esm/lib/components/radio-group-option.wrapper.d.ts +2 -2
- package/ssr/esm/lib/components/radio-group.wrapper.d.ts +8 -8
- package/ssr/esm/lib/components/scroller.wrapper.d.ts +20 -4
- package/ssr/esm/lib/components/segmented-control-item.wrapper.d.ts +4 -4
- package/ssr/esm/lib/components/segmented-control.wrapper.d.ts +4 -4
- package/ssr/esm/lib/components/select.wrapper.d.ts +10 -10
- package/ssr/esm/lib/components/sheet.wrapper.d.ts +2 -2
- package/ssr/esm/lib/components/spinner.wrapper.d.ts +13 -5
- package/ssr/esm/lib/components/switch.wrapper.d.ts +6 -6
- package/ssr/esm/lib/components/table-cell.wrapper.d.ts +2 -2
- package/ssr/esm/lib/components/table-head-cell.wrapper.d.ts +4 -4
- package/ssr/esm/lib/components/table.wrapper.d.ts +10 -2
- package/ssr/esm/lib/components/tabs-bar.wrapper.d.ts +21 -5
- package/ssr/esm/lib/components/tabs.wrapper.d.ts +21 -5
- package/ssr/esm/lib/components/tag-dismissible.wrapper.d.ts +6 -6
- package/ssr/esm/lib/components/tag.wrapper.d.ts +2 -2
- package/ssr/esm/lib/components/text.wrapper.d.ts +12 -12
- package/ssr/esm/lib/components/textarea.wrapper.d.ts +6 -6
- package/ssr/esm/lib/components/wordmark.wrapper.d.ts +8 -8
- package/ssr/esm/lib/dsr-components/carousel.d.ts +2 -2
- package/ssr/esm/lib/dsr-components/display.d.ts +2 -0
- package/ssr/esm/lib/dsr-components/drilldown-item.d.ts +2 -2
- package/ssr/esm/lib/dsr-components/flyout.d.ts +1 -1
- package/ssr/esm/lib/dsr-components/scroller.d.ts +5 -3
- package/ssr/esm/lib/dsr-components/stepper-horizontal.d.ts +3 -2
- package/ssr/esm/lib/dsr-components/tabs-bar.d.ts +6 -6
- package/ssr/esm/lib/dsr-components/tabs.d.ts +2 -1
- package/ssr/esm/lib/types.d.ts +356 -157
- package/tailwindcss/index.css +19 -4
|
@@ -1,22 +1,30 @@
|
|
|
1
1
|
import type { BaseProps } from '../../BaseProps';
|
|
2
|
-
import type { SelectedAriaAttributes, SpinnerAriaAttribute, BreakpointCustomizable, SpinnerSize } from '../types';
|
|
2
|
+
import type { SelectedAriaAttributes, SpinnerAriaAttribute, SpinnerColor, BreakpointCustomizable, SpinnerSize } from '../types';
|
|
3
3
|
export type PSpinnerProps = BaseProps & {
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
5
|
+
* Sets ARIA attributes.
|
|
6
6
|
*/
|
|
7
7
|
aria?: SelectedAriaAttributes<SpinnerAriaAttribute>;
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* Basic color variations.
|
|
10
|
+
*/
|
|
11
|
+
color?: SpinnerColor;
|
|
12
|
+
/**
|
|
13
|
+
* Defines the size of the spinner, aligned with the typographic scale used by components such as p-icon, p-flag, p-text, and p-heading. When set to `inherit`, the size is derived from a custom font-size defined on a parent element, calculated against the global line-height (based on `ex`-unit) to remain visually consistent with other typographic-scale-based components.
|
|
10
14
|
*/
|
|
11
15
|
size?: BreakpointCustomizable<SpinnerSize>;
|
|
12
16
|
};
|
|
13
17
|
export declare const PSpinner: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
|
|
14
18
|
/**
|
|
15
|
-
*
|
|
19
|
+
* Sets ARIA attributes.
|
|
16
20
|
*/
|
|
17
21
|
aria?: SelectedAriaAttributes<SpinnerAriaAttribute>;
|
|
18
22
|
/**
|
|
19
|
-
*
|
|
23
|
+
* Basic color variations.
|
|
24
|
+
*/
|
|
25
|
+
color?: SpinnerColor;
|
|
26
|
+
/**
|
|
27
|
+
* Defines the size of the spinner, aligned with the typographic scale used by components such as p-icon, p-flag, p-text, and p-heading. When set to `inherit`, the size is derived from a custom font-size defined on a parent element, calculated against the global line-height (based on `ex`-unit) to remain visually consistent with other typographic-scale-based components.
|
|
20
28
|
*/
|
|
21
29
|
size?: BreakpointCustomizable<SpinnerSize>;
|
|
22
30
|
} & import("react").RefAttributes<HTMLElement>>;
|
|
@@ -4,13 +4,13 @@ import { forwardRef, useRef } from 'react';
|
|
|
4
4
|
import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
|
|
5
5
|
import { syncRef } from '../../utils.mjs';
|
|
6
6
|
|
|
7
|
-
const PSpinner = /*#__PURE__*/ forwardRef(({ aria, size = '
|
|
7
|
+
const PSpinner = /*#__PURE__*/ forwardRef(({ aria, color = 'primary', size = 'sm', className, ...rest }, ref) => {
|
|
8
8
|
const elementRef = useRef(undefined);
|
|
9
9
|
const WebComponentTag = usePrefix('p-spinner');
|
|
10
|
-
const propsToSync = [aria, size];
|
|
10
|
+
const propsToSync = [aria, color, size];
|
|
11
11
|
useBrowserLayoutEffect(() => {
|
|
12
12
|
const { current } = elementRef;
|
|
13
|
-
['aria', 'size'].forEach((propName, i) => (current[propName] = propsToSync[i]));
|
|
13
|
+
['aria', 'color', 'size'].forEach((propName, i) => (current[propName] = propsToSync[i]));
|
|
14
14
|
}, propsToSync);
|
|
15
15
|
const props = {
|
|
16
16
|
...rest,
|
|
@@ -10,7 +10,7 @@ export type PSwitchProps = BaseProps & {
|
|
|
10
10
|
*/
|
|
11
11
|
checked?: boolean;
|
|
12
12
|
/**
|
|
13
|
-
* Displays
|
|
13
|
+
* Displays the switch in compact mode.
|
|
14
14
|
*/
|
|
15
15
|
compact?: boolean;
|
|
16
16
|
/**
|
|
@@ -18,7 +18,7 @@ export type PSwitchProps = BaseProps & {
|
|
|
18
18
|
*/
|
|
19
19
|
disabled?: boolean;
|
|
20
20
|
/**
|
|
21
|
-
*
|
|
21
|
+
* Shows or hides the label. For better accessibility, it is recommended to show the label.
|
|
22
22
|
*/
|
|
23
23
|
hideLabel?: BreakpointCustomizable<boolean>;
|
|
24
24
|
/**
|
|
@@ -26,7 +26,7 @@ export type PSwitchProps = BaseProps & {
|
|
|
26
26
|
*/
|
|
27
27
|
loading?: boolean;
|
|
28
28
|
/**
|
|
29
|
-
* Emitted when checked
|
|
29
|
+
* Emitted when the checked state changes.
|
|
30
30
|
*/
|
|
31
31
|
onUpdate?: (event: CustomEvent<SwitchUpdateEventDetail>) => void;
|
|
32
32
|
/**
|
|
@@ -44,7 +44,7 @@ export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<imp
|
|
|
44
44
|
*/
|
|
45
45
|
checked?: boolean;
|
|
46
46
|
/**
|
|
47
|
-
* Displays
|
|
47
|
+
* Displays the switch in compact mode.
|
|
48
48
|
*/
|
|
49
49
|
compact?: boolean;
|
|
50
50
|
/**
|
|
@@ -52,7 +52,7 @@ export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<imp
|
|
|
52
52
|
*/
|
|
53
53
|
disabled?: boolean;
|
|
54
54
|
/**
|
|
55
|
-
*
|
|
55
|
+
* Shows or hides the label. For better accessibility, it is recommended to show the label.
|
|
56
56
|
*/
|
|
57
57
|
hideLabel?: BreakpointCustomizable<boolean>;
|
|
58
58
|
/**
|
|
@@ -60,7 +60,7 @@ export declare const PSwitch: import("react").ForwardRefExoticComponent<Omit<imp
|
|
|
60
60
|
*/
|
|
61
61
|
loading?: boolean;
|
|
62
62
|
/**
|
|
63
|
-
* Emitted when checked
|
|
63
|
+
* Emitted when the checked state changes.
|
|
64
64
|
*/
|
|
65
65
|
onUpdate?: (event: CustomEvent<SwitchUpdateEventDetail>) => void;
|
|
66
66
|
/**
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import type { BaseProps } from '../../BaseProps';
|
|
2
2
|
export type PTableCellProps = BaseProps & {
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
4
|
+
* Allows slotted text to wrap onto multiple lines instead of being forced onto a single line.
|
|
5
5
|
*/
|
|
6
6
|
multiline?: boolean;
|
|
7
7
|
};
|
|
8
8
|
export declare const PTableCell: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
|
|
9
9
|
/**
|
|
10
|
-
*
|
|
10
|
+
* Allows slotted text to wrap onto multiple lines instead of being forced onto a single line.
|
|
11
11
|
*/
|
|
12
12
|
multiline?: boolean;
|
|
13
13
|
} & {
|
|
@@ -2,11 +2,11 @@ import type { BaseProps } from '../../BaseProps';
|
|
|
2
2
|
import type { TableHeadCellSort } from '../types';
|
|
3
3
|
export type PTableHeadCellProps = BaseProps & {
|
|
4
4
|
/**
|
|
5
|
-
* Hides the label but
|
|
5
|
+
* Hides the label but keeps it accessible for screen readers. This property only takes effect when the `sort` prop is not set.
|
|
6
6
|
*/
|
|
7
7
|
hideLabel?: boolean;
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* Allows slotted text to wrap onto multiple lines instead of being forced onto a single line.
|
|
10
10
|
*/
|
|
11
11
|
multiline?: boolean;
|
|
12
12
|
/**
|
|
@@ -16,11 +16,11 @@ export type PTableHeadCellProps = BaseProps & {
|
|
|
16
16
|
};
|
|
17
17
|
export declare const PTableHeadCell: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
|
|
18
18
|
/**
|
|
19
|
-
* Hides the label but
|
|
19
|
+
* Hides the label but keeps it accessible for screen readers. This property only takes effect when the `sort` prop is not set.
|
|
20
20
|
*/
|
|
21
21
|
hideLabel?: boolean;
|
|
22
22
|
/**
|
|
23
|
-
*
|
|
23
|
+
* Allows slotted text to wrap onto multiple lines instead of being forced onto a single line.
|
|
24
24
|
*/
|
|
25
25
|
multiline?: boolean;
|
|
26
26
|
/**
|
|
@@ -6,7 +6,7 @@ export type PTableProps = BaseProps & {
|
|
|
6
6
|
*/
|
|
7
7
|
caption?: string;
|
|
8
8
|
/**
|
|
9
|
-
* Displays
|
|
9
|
+
* Displays with reduced spacing and smaller padding for a more condensed layout.
|
|
10
10
|
*/
|
|
11
11
|
compact?: boolean;
|
|
12
12
|
/**
|
|
@@ -17,6 +17,10 @@ export type PTableProps = BaseProps & {
|
|
|
17
17
|
* Emitted when sorting is changed.
|
|
18
18
|
*/
|
|
19
19
|
onUpdate?: (event: CustomEvent<TableUpdateEventDetail>) => void;
|
|
20
|
+
/**
|
|
21
|
+
* @experimental Makes the scroll indicator sticky at the top or bottom while scrolling depending on the scroll direction.
|
|
22
|
+
*/
|
|
23
|
+
sticky?: boolean;
|
|
20
24
|
};
|
|
21
25
|
export declare const PTable: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
|
|
22
26
|
/**
|
|
@@ -24,7 +28,7 @@ export declare const PTable: import("react").ForwardRefExoticComponent<Omit<impo
|
|
|
24
28
|
*/
|
|
25
29
|
caption?: string;
|
|
26
30
|
/**
|
|
27
|
-
* Displays
|
|
31
|
+
* Displays with reduced spacing and smaller padding for a more condensed layout.
|
|
28
32
|
*/
|
|
29
33
|
compact?: boolean;
|
|
30
34
|
/**
|
|
@@ -35,6 +39,10 @@ export declare const PTable: import("react").ForwardRefExoticComponent<Omit<impo
|
|
|
35
39
|
* Emitted when sorting is changed.
|
|
36
40
|
*/
|
|
37
41
|
onUpdate?: (event: CustomEvent<TableUpdateEventDetail>) => void;
|
|
42
|
+
/**
|
|
43
|
+
* @experimental Makes the scroll indicator sticky at the top or bottom while scrolling depending on the scroll direction.
|
|
44
|
+
*/
|
|
45
|
+
sticky?: boolean;
|
|
38
46
|
} & {
|
|
39
47
|
children?: import("react").ReactNode | undefined;
|
|
40
48
|
} & import("react").RefAttributes<HTMLElement>>;
|
|
@@ -4,14 +4,14 @@ import { forwardRef, useRef } from 'react';
|
|
|
4
4
|
import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
|
|
5
5
|
import { syncRef } from '../../utils.mjs';
|
|
6
6
|
|
|
7
|
-
const PTable = /*#__PURE__*/ forwardRef(({ caption, compact = false, layout = 'auto', onUpdate, className, ...rest }, ref) => {
|
|
7
|
+
const PTable = /*#__PURE__*/ forwardRef(({ caption, compact = false, layout = 'auto', onUpdate, sticky = false, className, ...rest }, ref) => {
|
|
8
8
|
const elementRef = useRef(undefined);
|
|
9
9
|
useEventCallback(elementRef, 'update', onUpdate);
|
|
10
10
|
const WebComponentTag = usePrefix('p-table');
|
|
11
|
-
const propsToSync = [caption, compact, layout];
|
|
11
|
+
const propsToSync = [caption, compact, layout, sticky];
|
|
12
12
|
useBrowserLayoutEffect(() => {
|
|
13
13
|
const { current } = elementRef;
|
|
14
|
-
['caption', 'compact', 'layout'].forEach((propName, i) => (current[propName] = propsToSync[i]));
|
|
14
|
+
['caption', 'compact', 'layout', 'sticky'].forEach((propName, i) => (current[propName] = propsToSync[i]));
|
|
15
15
|
}, propsToSync);
|
|
16
16
|
const props = {
|
|
17
17
|
...rest,
|
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
import type { BaseProps } from '../../BaseProps';
|
|
2
|
-
import type { TabsBarUpdateEventDetail, BreakpointCustomizable, TabsBarSize, TabsBarWeight } from '../types';
|
|
2
|
+
import type { TabsBarBackground, TabsBarUpdateEventDetail, BreakpointCustomizable, TabsBarSize, TabsBarWeight } from '../types';
|
|
3
3
|
export type PTabsBarProps = BaseProps & {
|
|
4
4
|
/**
|
|
5
|
-
* Defines which tab
|
|
5
|
+
* Defines which tab is shown as selected (zero-based numbering), or `undefined` if none should be selected.
|
|
6
6
|
*/
|
|
7
7
|
activeTabIndex?: number | undefined;
|
|
8
|
+
/**
|
|
9
|
+
* Defines the background color. Use `frosted` only on images, videos or gradients.
|
|
10
|
+
*/
|
|
11
|
+
background?: TabsBarBackground;
|
|
12
|
+
/**
|
|
13
|
+
* Displays with reduced spacing and smaller padding for a more condensed layout.
|
|
14
|
+
*/
|
|
15
|
+
compact?: boolean;
|
|
8
16
|
/**
|
|
9
17
|
* Emitted when active tab is changed.
|
|
10
18
|
*/
|
|
@@ -14,15 +22,23 @@ export type PTabsBarProps = BaseProps & {
|
|
|
14
22
|
*/
|
|
15
23
|
size?: BreakpointCustomizable<TabsBarSize>;
|
|
16
24
|
/**
|
|
17
|
-
*
|
|
25
|
+
* @deprecated Will be removed in the next major release. Has no effect anymore.
|
|
18
26
|
*/
|
|
19
27
|
weight?: TabsBarWeight;
|
|
20
28
|
};
|
|
21
29
|
export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
|
|
22
30
|
/**
|
|
23
|
-
* Defines which tab
|
|
31
|
+
* Defines which tab is shown as selected (zero-based numbering), or `undefined` if none should be selected.
|
|
24
32
|
*/
|
|
25
33
|
activeTabIndex?: number | undefined;
|
|
34
|
+
/**
|
|
35
|
+
* Defines the background color. Use `frosted` only on images, videos or gradients.
|
|
36
|
+
*/
|
|
37
|
+
background?: TabsBarBackground;
|
|
38
|
+
/**
|
|
39
|
+
* Displays with reduced spacing and smaller padding for a more condensed layout.
|
|
40
|
+
*/
|
|
41
|
+
compact?: boolean;
|
|
26
42
|
/**
|
|
27
43
|
* Emitted when active tab is changed.
|
|
28
44
|
*/
|
|
@@ -32,7 +48,7 @@ export declare const PTabsBar: import("react").ForwardRefExoticComponent<Omit<im
|
|
|
32
48
|
*/
|
|
33
49
|
size?: BreakpointCustomizable<TabsBarSize>;
|
|
34
50
|
/**
|
|
35
|
-
*
|
|
51
|
+
* @deprecated Will be removed in the next major release. Has no effect anymore.
|
|
36
52
|
*/
|
|
37
53
|
weight?: TabsBarWeight;
|
|
38
54
|
} & {
|
|
@@ -4,14 +4,14 @@ import { forwardRef, useRef } from 'react';
|
|
|
4
4
|
import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
|
|
5
5
|
import { syncRef } from '../../utils.mjs';
|
|
6
6
|
|
|
7
|
-
const PTabsBar = /*#__PURE__*/ forwardRef(({ activeTabIndex, onUpdate, size = 'small', weight = 'regular', className, ...rest }, ref) => {
|
|
7
|
+
const PTabsBar = /*#__PURE__*/ forwardRef(({ activeTabIndex, background = 'none', compact, onUpdate, size = 'small', weight = 'regular', className, ...rest }, ref) => {
|
|
8
8
|
const elementRef = useRef(undefined);
|
|
9
9
|
useEventCallback(elementRef, 'update', onUpdate);
|
|
10
10
|
const WebComponentTag = usePrefix('p-tabs-bar');
|
|
11
|
-
const propsToSync = [activeTabIndex, size, weight];
|
|
11
|
+
const propsToSync = [activeTabIndex, background, compact, size, weight];
|
|
12
12
|
useBrowserLayoutEffect(() => {
|
|
13
13
|
const { current } = elementRef;
|
|
14
|
-
['activeTabIndex', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
|
|
14
|
+
['activeTabIndex', 'background', 'compact', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
|
|
15
15
|
}, propsToSync);
|
|
16
16
|
const props = {
|
|
17
17
|
...rest,
|
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
import type { BaseProps } from '../../BaseProps';
|
|
2
|
-
import type { TabsUpdateEventDetail, BreakpointCustomizable, TabsSize, TabsWeight } from '../types';
|
|
2
|
+
import type { TabsBackground, TabsUpdateEventDetail, BreakpointCustomizable, TabsSize, TabsWeight } from '../types';
|
|
3
3
|
export type PTabsProps = BaseProps & {
|
|
4
4
|
/**
|
|
5
|
-
* Defines which tab
|
|
5
|
+
* Defines which tab is shown as selected (zero-based numbering).
|
|
6
6
|
*/
|
|
7
7
|
activeTabIndex?: number;
|
|
8
|
+
/**
|
|
9
|
+
* Defines the background color. Use `frosted` only on images, videos or gradients.
|
|
10
|
+
*/
|
|
11
|
+
background?: TabsBackground;
|
|
12
|
+
/**
|
|
13
|
+
* Displays with reduced spacing and smaller padding for a more condensed layout.
|
|
14
|
+
*/
|
|
15
|
+
compact?: boolean;
|
|
8
16
|
/**
|
|
9
17
|
* Emitted when active tab is changed.
|
|
10
18
|
*/
|
|
@@ -14,15 +22,23 @@ export type PTabsProps = BaseProps & {
|
|
|
14
22
|
*/
|
|
15
23
|
size?: BreakpointCustomizable<TabsSize>;
|
|
16
24
|
/**
|
|
17
|
-
*
|
|
25
|
+
* @deprecated Will be removed in the next major release. Has no effect anymore.
|
|
18
26
|
*/
|
|
19
27
|
weight?: TabsWeight;
|
|
20
28
|
};
|
|
21
29
|
export declare const PTabs: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
|
|
22
30
|
/**
|
|
23
|
-
* Defines which tab
|
|
31
|
+
* Defines which tab is shown as selected (zero-based numbering).
|
|
24
32
|
*/
|
|
25
33
|
activeTabIndex?: number;
|
|
34
|
+
/**
|
|
35
|
+
* Defines the background color. Use `frosted` only on images, videos or gradients.
|
|
36
|
+
*/
|
|
37
|
+
background?: TabsBackground;
|
|
38
|
+
/**
|
|
39
|
+
* Displays with reduced spacing and smaller padding for a more condensed layout.
|
|
40
|
+
*/
|
|
41
|
+
compact?: boolean;
|
|
26
42
|
/**
|
|
27
43
|
* Emitted when active tab is changed.
|
|
28
44
|
*/
|
|
@@ -32,7 +48,7 @@ export declare const PTabs: import("react").ForwardRefExoticComponent<Omit<impor
|
|
|
32
48
|
*/
|
|
33
49
|
size?: BreakpointCustomizable<TabsSize>;
|
|
34
50
|
/**
|
|
35
|
-
*
|
|
51
|
+
* @deprecated Will be removed in the next major release. Has no effect anymore.
|
|
36
52
|
*/
|
|
37
53
|
weight?: TabsWeight;
|
|
38
54
|
} & {
|
|
@@ -4,14 +4,14 @@ import { forwardRef, useRef } from 'react';
|
|
|
4
4
|
import { useEventCallback, usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
|
|
5
5
|
import { syncRef } from '../../utils.mjs';
|
|
6
6
|
|
|
7
|
-
const PTabs = /*#__PURE__*/ forwardRef(({ activeTabIndex = 0, onUpdate, size = 'small', weight = 'regular', className, ...rest }, ref) => {
|
|
7
|
+
const PTabs = /*#__PURE__*/ forwardRef(({ activeTabIndex = 0, background = 'none', compact, onUpdate, size = 'small', weight = 'regular', className, ...rest }, ref) => {
|
|
8
8
|
const elementRef = useRef(undefined);
|
|
9
9
|
useEventCallback(elementRef, 'update', onUpdate);
|
|
10
10
|
const WebComponentTag = usePrefix('p-tabs');
|
|
11
|
-
const propsToSync = [activeTabIndex, size, weight];
|
|
11
|
+
const propsToSync = [activeTabIndex, background, compact, size, weight];
|
|
12
12
|
useBrowserLayoutEffect(() => {
|
|
13
13
|
const { current } = elementRef;
|
|
14
|
-
['activeTabIndex', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
|
|
14
|
+
['activeTabIndex', 'background', 'compact', 'size', 'weight'].forEach((propName, i) => (current[propName] = propsToSync[i]));
|
|
15
15
|
}, propsToSync);
|
|
16
16
|
const props = {
|
|
17
17
|
...rest,
|
|
@@ -2,29 +2,29 @@ import type { BaseProps } from '../../BaseProps';
|
|
|
2
2
|
import type { SelectedAriaAttributes, TagDismissibleAriaAttribute } from '../types';
|
|
3
3
|
export type PTagDismissibleProps = BaseProps & {
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
5
|
+
* Sets ARIA attributes.
|
|
6
6
|
*/
|
|
7
7
|
aria?: SelectedAriaAttributes<TagDismissibleAriaAttribute>;
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* Displays the dismissible tag in compact mode.
|
|
10
10
|
*/
|
|
11
11
|
compact?: boolean;
|
|
12
12
|
/**
|
|
13
|
-
*
|
|
13
|
+
* Text content for a user-facing label.
|
|
14
14
|
*/
|
|
15
15
|
label?: string;
|
|
16
16
|
};
|
|
17
17
|
export declare const PTagDismissible: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
|
|
18
18
|
/**
|
|
19
|
-
*
|
|
19
|
+
* Sets ARIA attributes.
|
|
20
20
|
*/
|
|
21
21
|
aria?: SelectedAriaAttributes<TagDismissibleAriaAttribute>;
|
|
22
22
|
/**
|
|
23
|
-
*
|
|
23
|
+
* Displays the dismissible tag in compact mode.
|
|
24
24
|
*/
|
|
25
25
|
compact?: boolean;
|
|
26
26
|
/**
|
|
27
|
-
*
|
|
27
|
+
* Text content for a user-facing label.
|
|
28
28
|
*/
|
|
29
29
|
label?: string;
|
|
30
30
|
} & {
|
|
@@ -2,7 +2,7 @@ import type { BaseProps } from '../../BaseProps';
|
|
|
2
2
|
import type { TagIcon, TagVariant } from '../types';
|
|
3
3
|
export type PTagProps = BaseProps & {
|
|
4
4
|
/**
|
|
5
|
-
* Displays
|
|
5
|
+
* Displays the tag in compact mode.
|
|
6
6
|
*/
|
|
7
7
|
compact?: boolean;
|
|
8
8
|
/**
|
|
@@ -20,7 +20,7 @@ export type PTagProps = BaseProps & {
|
|
|
20
20
|
};
|
|
21
21
|
export declare const PTag: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
|
|
22
22
|
/**
|
|
23
|
-
* Displays
|
|
23
|
+
* Displays the tag in compact mode.
|
|
24
24
|
*/
|
|
25
25
|
compact?: boolean;
|
|
26
26
|
/**
|
|
@@ -2,53 +2,53 @@ import type { BaseProps } from '../../BaseProps';
|
|
|
2
2
|
import type { TextAlign, TextColor, BreakpointCustomizable, TextSize, TextTag, TextWeight } from '../types';
|
|
3
3
|
export type PTextProps = BaseProps & {
|
|
4
4
|
/**
|
|
5
|
-
* Text alignment of the
|
|
5
|
+
* Text alignment of the text.
|
|
6
6
|
*/
|
|
7
7
|
align?: TextAlign;
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* Text color of the text. Use 'primary' for default, 'contrast-high' / 'contrast-medium' for alternative emphasis, 'success' / 'warning' / 'error' / 'info' for status messages, or 'inherit' to adopt the parent's color.
|
|
10
10
|
*/
|
|
11
11
|
color?: TextColor;
|
|
12
12
|
/**
|
|
13
|
-
* Adds an ellipsis to a single line of text if it overflows.
|
|
13
|
+
* Adds an ellipsis to a single line of text if it overflows the container width.
|
|
14
14
|
*/
|
|
15
15
|
ellipsis?: boolean;
|
|
16
16
|
/**
|
|
17
|
-
* Size of the text. Also defines the size for specific breakpoints, like {base: "
|
|
17
|
+
* Size of the text. Also defines the size for specific breakpoints, like {base: "sm", l: "md"}.
|
|
18
18
|
*/
|
|
19
19
|
size?: BreakpointCustomizable<TextSize>;
|
|
20
20
|
/**
|
|
21
|
-
* Sets
|
|
21
|
+
* Sets the HTML tag of the rendered element to ensure correct semantic meaning (e.g. 'p' for paragraphs, 'blockquote' for quotes).
|
|
22
22
|
*/
|
|
23
23
|
tag?: TextTag;
|
|
24
24
|
/**
|
|
25
|
-
* The weight of the text.
|
|
25
|
+
* The font weight of the text.
|
|
26
26
|
*/
|
|
27
27
|
weight?: TextWeight;
|
|
28
28
|
};
|
|
29
29
|
export declare const PText: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
|
|
30
30
|
/**
|
|
31
|
-
* Text alignment of the
|
|
31
|
+
* Text alignment of the text.
|
|
32
32
|
*/
|
|
33
33
|
align?: TextAlign;
|
|
34
34
|
/**
|
|
35
|
-
*
|
|
35
|
+
* Text color of the text. Use 'primary' for default, 'contrast-high' / 'contrast-medium' for alternative emphasis, 'success' / 'warning' / 'error' / 'info' for status messages, or 'inherit' to adopt the parent's color.
|
|
36
36
|
*/
|
|
37
37
|
color?: TextColor;
|
|
38
38
|
/**
|
|
39
|
-
* Adds an ellipsis to a single line of text if it overflows.
|
|
39
|
+
* Adds an ellipsis to a single line of text if it overflows the container width.
|
|
40
40
|
*/
|
|
41
41
|
ellipsis?: boolean;
|
|
42
42
|
/**
|
|
43
|
-
* Size of the text. Also defines the size for specific breakpoints, like {base: "
|
|
43
|
+
* Size of the text. Also defines the size for specific breakpoints, like {base: "sm", l: "md"}.
|
|
44
44
|
*/
|
|
45
45
|
size?: BreakpointCustomizable<TextSize>;
|
|
46
46
|
/**
|
|
47
|
-
* Sets
|
|
47
|
+
* Sets the HTML tag of the rendered element to ensure correct semantic meaning (e.g. 'p' for paragraphs, 'blockquote' for quotes).
|
|
48
48
|
*/
|
|
49
49
|
tag?: TextTag;
|
|
50
50
|
/**
|
|
51
|
-
* The weight of the text.
|
|
51
|
+
* The font weight of the text.
|
|
52
52
|
*/
|
|
53
53
|
weight?: TextWeight;
|
|
54
54
|
} & {
|
|
@@ -4,7 +4,7 @@ import { forwardRef, useRef } from 'react';
|
|
|
4
4
|
import { usePrefix, useBrowserLayoutEffect, useMergedClass } from '../../hooks.mjs';
|
|
5
5
|
import { syncRef } from '../../utils.mjs';
|
|
6
6
|
|
|
7
|
-
const PText = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = '
|
|
7
|
+
const PText = /*#__PURE__*/ forwardRef(({ align = 'start', color = 'primary', ellipsis = false, size = 'sm', tag = 'p', weight = 'normal', className, ...rest }, ref) => {
|
|
8
8
|
const elementRef = useRef(undefined);
|
|
9
9
|
const WebComponentTag = usePrefix('p-text');
|
|
10
10
|
const propsToSync = [align, color, ellipsis, size, tag, weight];
|
|
@@ -6,7 +6,7 @@ export type PTextareaProps = BaseProps & {
|
|
|
6
6
|
*/
|
|
7
7
|
autoComplete?: string;
|
|
8
8
|
/**
|
|
9
|
-
*
|
|
9
|
+
* Displays the textarea in compact mode.
|
|
10
10
|
*/
|
|
11
11
|
compact?: boolean;
|
|
12
12
|
/**
|
|
@@ -18,7 +18,7 @@ export type PTextareaProps = BaseProps & {
|
|
|
18
18
|
*/
|
|
19
19
|
description?: string;
|
|
20
20
|
/**
|
|
21
|
-
*
|
|
21
|
+
* Disables the textarea. The value will not be submitted with the form.
|
|
22
22
|
*/
|
|
23
23
|
disabled?: boolean;
|
|
24
24
|
/**
|
|
@@ -26,7 +26,7 @@ export type PTextareaProps = BaseProps & {
|
|
|
26
26
|
*/
|
|
27
27
|
form?: string;
|
|
28
28
|
/**
|
|
29
|
-
*
|
|
29
|
+
* Shows or hides the label. For better accessibility, it is recommended to show the label.
|
|
30
30
|
*/
|
|
31
31
|
hideLabel?: BreakpointCustomizable<boolean>;
|
|
32
32
|
/**
|
|
@@ -104,7 +104,7 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<Omit<i
|
|
|
104
104
|
*/
|
|
105
105
|
autoComplete?: string;
|
|
106
106
|
/**
|
|
107
|
-
*
|
|
107
|
+
* Displays the textarea in compact mode.
|
|
108
108
|
*/
|
|
109
109
|
compact?: boolean;
|
|
110
110
|
/**
|
|
@@ -116,7 +116,7 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<Omit<i
|
|
|
116
116
|
*/
|
|
117
117
|
description?: string;
|
|
118
118
|
/**
|
|
119
|
-
*
|
|
119
|
+
* Disables the textarea. The value will not be submitted with the form.
|
|
120
120
|
*/
|
|
121
121
|
disabled?: boolean;
|
|
122
122
|
/**
|
|
@@ -124,7 +124,7 @@ export declare const PTextarea: import("react").ForwardRefExoticComponent<Omit<i
|
|
|
124
124
|
*/
|
|
125
125
|
form?: string;
|
|
126
126
|
/**
|
|
127
|
-
*
|
|
127
|
+
* Shows or hides the label. For better accessibility, it is recommended to show the label.
|
|
128
128
|
*/
|
|
129
129
|
hideLabel?: BreakpointCustomizable<boolean>;
|
|
130
130
|
/**
|
|
@@ -2,37 +2,37 @@ import type { BaseProps } from '../../BaseProps';
|
|
|
2
2
|
import type { SelectedAriaAttributes, WordmarkAriaAttribute, WordmarkSize, WordmarkTarget } from '../types';
|
|
3
3
|
export type PWordmarkProps = BaseProps & {
|
|
4
4
|
/**
|
|
5
|
-
*
|
|
5
|
+
* Sets ARIA attributes.
|
|
6
6
|
*/
|
|
7
7
|
aria?: SelectedAriaAttributes<WordmarkAriaAttribute>;
|
|
8
8
|
/**
|
|
9
|
-
* When
|
|
9
|
+
* When `href` is provided, the component renders as an `<a>` element.
|
|
10
10
|
*/
|
|
11
11
|
href?: string;
|
|
12
12
|
/**
|
|
13
|
-
*
|
|
13
|
+
* Controls the size of the wordmark.
|
|
14
14
|
*/
|
|
15
15
|
size?: WordmarkSize;
|
|
16
16
|
/**
|
|
17
|
-
*
|
|
17
|
+
* Specifies where to open the linked document.
|
|
18
18
|
*/
|
|
19
19
|
target?: WordmarkTarget;
|
|
20
20
|
};
|
|
21
21
|
export declare const PWordmark: import("react").ForwardRefExoticComponent<Omit<import("react").DOMAttributes<{}>, "onChange" | "onInput" | "onToggle"> & Pick<import("react").HTMLAttributes<{}>, "suppressHydrationWarning" | "autoFocus" | "className" | "dir" | "hidden" | "id" | "inert" | "lang" | "slot" | "style" | "tabIndex" | "title" | "translate" | "role"> & {
|
|
22
22
|
/**
|
|
23
|
-
*
|
|
23
|
+
* Sets ARIA attributes.
|
|
24
24
|
*/
|
|
25
25
|
aria?: SelectedAriaAttributes<WordmarkAriaAttribute>;
|
|
26
26
|
/**
|
|
27
|
-
* When
|
|
27
|
+
* When `href` is provided, the component renders as an `<a>` element.
|
|
28
28
|
*/
|
|
29
29
|
href?: string;
|
|
30
30
|
/**
|
|
31
|
-
*
|
|
31
|
+
* Controls the size of the wordmark.
|
|
32
32
|
*/
|
|
33
33
|
size?: WordmarkSize;
|
|
34
34
|
/**
|
|
35
|
-
*
|
|
35
|
+
* Specifies where to open the linked document.
|
|
36
36
|
*/
|
|
37
37
|
target?: WordmarkTarget;
|
|
38
38
|
} & import("react").RefAttributes<HTMLElement>>;
|