carbon-react 106.6.6 → 106.6.9
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/esm/__internal__/utils/argTypes/specialCharacters.d.ts +36 -0
- package/esm/__internal__/utils/argTypes/specialCharacters.js +36 -0
- package/esm/components/accordion/accordion-group/accordion-group.component.d.ts +9 -23
- package/esm/components/accordion/accordion-group/accordion-group.component.js +222 -25
- package/esm/components/accordion/accordion.component.d.ts +44 -2
- package/esm/components/accordion/accordion.component.js +648 -68
- package/esm/components/accordion/accordion.style.d.ts +45 -9
- package/esm/components/accordion/index.d.ts +4 -2
- package/esm/components/decimal/decimal.component.js +12 -10
- package/esm/components/menu/menu-item/menu-item.style.js +6 -3
- package/esm/components/multi-action-button/index.d.ts +2 -1
- package/esm/components/multi-action-button/multi-action-button.component.d.ts +9 -52
- package/esm/components/multi-action-button/multi-action-button.component.js +471 -67
- package/esm/components/multi-action-button/multi-action-button.config.d.ts +3 -3
- package/esm/components/multi-action-button/multi-action-button.style.d.ts +10 -2
- package/esm/components/multi-action-button/multi-action-button.style.js +4 -7
- package/esm/components/portal/portal.js +0 -5
- package/esm/components/portrait/portrait-initials.component.js +1 -2
- package/esm/components/tile-select/__internal__/accordion/accordion.style.d.ts +2 -2
- package/esm/components/tooltip/tooltip.component.d.ts +3 -0
- package/esm/style/utils/filter-out-styled-system-spacing-props.d.ts +1 -1
- package/esm/style/utils/filter-out-styled-system-spacing-props.js +1 -1
- package/lib/__internal__/utils/argTypes/specialCharacters.d.ts +36 -0
- package/lib/__internal__/utils/argTypes/specialCharacters.js +46 -0
- package/lib/components/accordion/accordion-group/accordion-group.component.d.ts +9 -23
- package/lib/components/accordion/accordion-group/accordion-group.component.js +225 -29
- package/lib/components/accordion/accordion.component.d.ts +44 -2
- package/lib/components/accordion/accordion.component.js +649 -70
- package/lib/components/accordion/accordion.style.d.ts +45 -9
- package/lib/components/accordion/index.d.ts +4 -2
- package/lib/components/decimal/decimal.component.js +12 -10
- package/lib/components/menu/menu-item/menu-item.style.js +6 -3
- package/lib/components/multi-action-button/index.d.ts +2 -1
- package/lib/components/multi-action-button/multi-action-button.component.d.ts +9 -52
- package/lib/components/multi-action-button/multi-action-button.component.js +471 -70
- package/lib/components/multi-action-button/multi-action-button.config.d.ts +3 -3
- package/lib/components/multi-action-button/multi-action-button.style.d.ts +10 -2
- package/lib/components/multi-action-button/multi-action-button.style.js +4 -7
- package/lib/components/portal/portal.js +0 -6
- package/lib/components/portrait/portrait-initials.component.js +1 -5
- package/lib/components/tile-select/__internal__/accordion/accordion.style.d.ts +2 -2
- package/lib/components/tooltip/tooltip.component.d.ts +3 -0
- package/lib/style/utils/filter-out-styled-system-spacing-props.d.ts +1 -1
- package/lib/style/utils/filter-out-styled-system-spacing-props.js +1 -1
- package/package.json +2 -1
- package/esm/__internal__/utils/helpers/browser/index.d.ts +0 -15
- package/esm/__internal__/utils/helpers/browser/index.js +0 -33
- package/esm/components/accordion/accordion-group/accordion-group.d.ts +0 -17
- package/esm/components/accordion/accordion.d.ts +0 -54
- package/esm/components/action-popover/action-popover-test.stories.js +0 -76
- package/esm/components/button-bar/button-bar-test.stories.js +0 -122
- package/esm/components/draggable/draggable-test.stories.js +0 -48
- package/esm/components/duelling-picklist/duelling-picklist-test.stories.js +0 -539
- package/esm/components/menu/menu-test.stories.js +0 -109
- package/esm/components/multi-action-button/multi-action-button.d.ts +0 -10
- package/esm/components/profile/profile-test.stories.js +0 -55
- package/esm/components/progress-tracker/progress-tracker-test.stories.js +0 -63
- package/esm/components/select/simple-select/simple-select-test.stories.js +0 -193
- package/esm/components/show-edit-pod/show-edit-pod-test.stories.js +0 -143
- package/esm/components/textarea/textarea-test.stories.js +0 -154
- package/lib/__internal__/utils/helpers/browser/index.d.ts +0 -15
- package/lib/__internal__/utils/helpers/browser/index.js +0 -40
- package/lib/__internal__/utils/helpers/browser/package.json +0 -6
- package/lib/components/accordion/accordion-group/accordion-group.d.ts +0 -17
- package/lib/components/accordion/accordion.d.ts +0 -54
- package/lib/components/action-popover/action-popover-test.stories.js +0 -95
- package/lib/components/button-bar/button-bar-test.stories.js +0 -145
- package/lib/components/draggable/draggable-test.stories.js +0 -66
- package/lib/components/duelling-picklist/duelling-picklist-test.stories.js +0 -573
- package/lib/components/menu/menu-test.stories.js +0 -132
- package/lib/components/multi-action-button/multi-action-button.d.ts +0 -10
- package/lib/components/profile/profile-test.stories.js +0 -75
- package/lib/components/progress-tracker/progress-tracker-test.stories.js +0 -79
- package/lib/components/select/simple-select/simple-select-test.stories.js +0 -206
- package/lib/components/show-edit-pod/show-edit-pod-test.stories.js +0 -165
- package/lib/components/textarea/textarea-test.stories.js +0 -173
|
@@ -1,10 +1,46 @@
|
|
|
1
|
-
export const StyledAccordionGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
|
-
export const StyledAccordionContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
|
-
export const StyledAccordionHeadingsContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
4
|
-
export const StyledAccordionSubTitle: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
5
|
-
export const StyledAccordionTitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
6
|
-
export const StyledAccordionTitle: import("styled-components").StyledComponent<"h3", any, {}, never>;
|
|
7
|
-
export const StyledAccordionIcon: import("styled-components").StyledComponent<typeof Icon, any, {}, never>;
|
|
8
|
-
export const StyledAccordionContent: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
9
|
-
export const StyledAccordionContentContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
10
1
|
import Icon from "../icon";
|
|
2
|
+
declare const StyledAccordionGroup: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
3
|
+
export interface StyledAccordionContainerProps {
|
|
4
|
+
/** Toggles left and right borders */
|
|
5
|
+
borders?: "default" | "full" | "none";
|
|
6
|
+
/** Renders the accordion heading in the style of a tertiary button */
|
|
7
|
+
buttonHeading?: boolean;
|
|
8
|
+
/** Sets background as white or transparent */
|
|
9
|
+
scheme?: "white" | "transparent";
|
|
10
|
+
/** Sets accordion width */
|
|
11
|
+
width?: string;
|
|
12
|
+
}
|
|
13
|
+
declare const StyledAccordionContainer: import("styled-components").StyledComponent<"div", any, StyledAccordionContainerProps, never>;
|
|
14
|
+
interface StyledAccordionTitleProps {
|
|
15
|
+
size?: "large" | "small";
|
|
16
|
+
}
|
|
17
|
+
declare const StyledAccordionTitle: import("styled-components").StyledComponent<"h3", any, StyledAccordionTitleProps, never>;
|
|
18
|
+
declare const StyledAccordionSubTitle: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
19
|
+
interface StyledAccordionIconProps {
|
|
20
|
+
isExpanded?: boolean;
|
|
21
|
+
iconAlign?: "left" | "right";
|
|
22
|
+
}
|
|
23
|
+
declare const StyledAccordionIcon: import("styled-components").StyledComponent<typeof Icon, any, StyledAccordionIconProps, never>;
|
|
24
|
+
interface StyledAccordionHeadingsContainerProps {
|
|
25
|
+
buttonHeading?: boolean;
|
|
26
|
+
hasValidationIcon?: boolean;
|
|
27
|
+
}
|
|
28
|
+
declare const StyledAccordionHeadingsContainer: import("styled-components").StyledComponent<"div", any, StyledAccordionHeadingsContainerProps, never>;
|
|
29
|
+
interface StyledAccordionTitleContainerProps {
|
|
30
|
+
buttonHeading?: boolean;
|
|
31
|
+
buttonWidth?: number;
|
|
32
|
+
hasButtonProps?: boolean;
|
|
33
|
+
iconAlign?: "left" | "right";
|
|
34
|
+
size?: "large" | "small";
|
|
35
|
+
}
|
|
36
|
+
declare const StyledAccordionTitleContainer: import("styled-components").StyledComponent<"div", any, StyledAccordionTitleContainerProps, never>;
|
|
37
|
+
export interface StyledAccordionContentContainerProps {
|
|
38
|
+
isExpanded?: boolean;
|
|
39
|
+
maxHeight?: string | number;
|
|
40
|
+
}
|
|
41
|
+
declare const StyledAccordionContentContainer: import("styled-components").StyledComponent<"div", any, StyledAccordionContentContainerProps, never>;
|
|
42
|
+
export interface StyledAccordionContentProps {
|
|
43
|
+
disableContentPadding?: boolean;
|
|
44
|
+
}
|
|
45
|
+
declare const StyledAccordionContent: import("styled-components").StyledComponent<"div", any, StyledAccordionContentProps, never>;
|
|
46
|
+
export { StyledAccordionGroup, StyledAccordionContainer, StyledAccordionHeadingsContainer, StyledAccordionSubTitle, StyledAccordionTitleContainer, StyledAccordionTitle, StyledAccordionIcon, StyledAccordionContent, StyledAccordionContentContainer, };
|
|
@@ -1,2 +1,4 @@
|
|
|
1
|
-
export { default as Accordion } from "./accordion";
|
|
2
|
-
export {
|
|
1
|
+
export { default as Accordion } from "./accordion.component";
|
|
2
|
+
export type { AccordionProps } from "./accordion.component";
|
|
3
|
+
export { default as AccordionGroup } from "./accordion-group/accordion-group.component";
|
|
4
|
+
export type { AccordionGroupProps } from "./accordion-group/accordion-group.component";
|
|
@@ -29,8 +29,7 @@ const Decimal = ({
|
|
|
29
29
|
}) => {
|
|
30
30
|
const l = useContext(LocaleContext);
|
|
31
31
|
const emptyValue = allowEmptyValue ? "" : "0.00";
|
|
32
|
-
|
|
33
|
-
const getSafeValueProp = initialValue => {
|
|
32
|
+
const getSafeValueProp = useCallback(initialValue => {
|
|
34
33
|
// We're intentionally preventing the use of number values to help prevent any unintentional rounding issues
|
|
35
34
|
invariant(typeof initialValue === "string", "Decimal `value` prop must be a string");
|
|
36
35
|
|
|
@@ -39,8 +38,7 @@ const Decimal = ({
|
|
|
39
38
|
}
|
|
40
39
|
|
|
41
40
|
return initialValue;
|
|
42
|
-
};
|
|
43
|
-
|
|
41
|
+
}, [allowEmptyValue]);
|
|
44
42
|
const getSeparator = useCallback(separatorType => {
|
|
45
43
|
const numberWithGroupAndDecimalSeparator = 10000.1;
|
|
46
44
|
return Intl.NumberFormat(locale || l.locale()).formatToParts(numberWithGroupAndDecimalSeparator).find(part => part.type === separatorType).value;
|
|
@@ -169,18 +167,22 @@ const Decimal = ({
|
|
|
169
167
|
invariant(prevControlledRef.current !== isControlled, message);
|
|
170
168
|
prevControlledRef.current = isControlled;
|
|
171
169
|
}, [isControlled]);
|
|
170
|
+
const prevValue = usePrevious(value);
|
|
172
171
|
useEffect(() => {
|
|
173
|
-
const
|
|
172
|
+
const standardDecimalValue = toStandardDecimal(stateValue);
|
|
174
173
|
|
|
175
174
|
if (isControlled) {
|
|
176
175
|
const valueProp = getSafeValueProp(value);
|
|
177
176
|
|
|
178
|
-
if (
|
|
179
|
-
|
|
177
|
+
if (standardDecimalValue !== valueProp) {
|
|
178
|
+
if (valueProp === "" && prevValue === "") {
|
|
179
|
+
setStateValue(formatValue(emptyValue));
|
|
180
|
+
} else {
|
|
181
|
+
setStateValue(formatValue(valueProp));
|
|
182
|
+
}
|
|
180
183
|
}
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
}, [value]);
|
|
184
|
+
}
|
|
185
|
+
}, [emptyValue, formatValue, getSafeValueProp, isControlled, prevValue, stateValue, toStandardDecimal, value]);
|
|
184
186
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Textbox, _extends({
|
|
185
187
|
onKeyPress: onKeyPress,
|
|
186
188
|
align: align,
|
|
@@ -124,7 +124,7 @@ const StyledMenuItemWrapper = styled.a`
|
|
|
124
124
|
${isOpen && css`
|
|
125
125
|
a,
|
|
126
126
|
button {
|
|
127
|
-
background-color: ${menuConfigVariants[menuType].
|
|
127
|
+
background-color: ${menuConfigVariants[menuType].submenuItemBackground};
|
|
128
128
|
color: ${menuConfigVariants[menuType].color};
|
|
129
129
|
}
|
|
130
130
|
`}
|
|
@@ -148,11 +148,14 @@ const StyledMenuItemWrapper = styled.a`
|
|
|
148
148
|
|
|
149
149
|
a:hover,
|
|
150
150
|
button:hover {
|
|
151
|
+
background-color: ${menuConfigVariants[menuType].submenuOpenedBackground};
|
|
152
|
+
color: var(--colorsComponentsMenuYang100);
|
|
153
|
+
|
|
151
154
|
${!(href || clickToOpen) && css`
|
|
152
155
|
cursor: default;
|
|
156
|
+
background-color: ${menuConfigVariants[menuType].submenuItemBackground};
|
|
157
|
+
color: ${menuConfigVariants[menuType].color};
|
|
153
158
|
`}
|
|
154
|
-
background-color: ${menuConfigVariants[menuType].submenuOpenedBackground};
|
|
155
|
-
color: ${menuConfigVariants[menuType].color};
|
|
156
159
|
|
|
157
160
|
[data-component="icon"] {
|
|
158
161
|
color: ${menuConfigVariants[menuType].color};
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
export { default } from "./multi-action-button";
|
|
1
|
+
export { default } from "./multi-action-button.component";
|
|
2
|
+
export type { MultiActionButtonProps } from "./multi-action-button.component";
|
|
@@ -1,53 +1,10 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
size: any;
|
|
9
|
-
children: any;
|
|
10
|
-
text: any;
|
|
11
|
-
subtext: any;
|
|
12
|
-
"data-element": any;
|
|
13
|
-
"data-role": any;
|
|
14
|
-
}): JSX.Element;
|
|
15
|
-
declare namespace MultiActionButton {
|
|
16
|
-
const propTypes: {
|
|
17
|
-
/** Button type: "primary" | "secondary" | "tertiary" */
|
|
18
|
-
buttonType: PropTypes.Requireable<string>;
|
|
19
|
-
/** The additional button to display. */
|
|
20
|
-
children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
|
|
21
|
-
/** Second text child, renders under main text, only when size is "large". */
|
|
22
|
-
subtext: PropTypes.Requireable<string>;
|
|
23
|
-
/** Customizes the appearance, can be set to 'primary', 'secondary' or 'transparent'. */
|
|
24
|
-
as: PropTypes.Requireable<string>;
|
|
25
|
-
/** The text to be displayed in the SplitButton. */
|
|
26
|
-
text: PropTypes.Validator<string>;
|
|
27
|
-
/** Gives the button a disabled state. */
|
|
28
|
-
disabled: PropTypes.Requireable<boolean>;
|
|
29
|
-
/** The size of the MultiActionButton. */
|
|
30
|
-
size: PropTypes.Requireable<string>;
|
|
31
|
-
/** A custom value for the data-element attribute. */
|
|
32
|
-
"data-element": PropTypes.Requireable<string>;
|
|
33
|
-
/** A custom value for the data-element attribute. */
|
|
34
|
-
"data-role": PropTypes.Requireable<string>;
|
|
35
|
-
/** Aligns the button's options */
|
|
36
|
-
align: PropTypes.Requireable<string>;
|
|
37
|
-
marginBottom?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
38
|
-
margin?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
39
|
-
m?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
40
|
-
marginLeft?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
41
|
-
ml?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
42
|
-
marginRight?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
43
|
-
mr?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
44
|
-
marginTop?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
45
|
-
mt?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
46
|
-
mb?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
47
|
-
marginX?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
48
|
-
mx?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
49
|
-
marginY?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
50
|
-
my?: import("styled-system").ResponsiveValue<string | number | symbol, Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> | undefined;
|
|
51
|
-
};
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { SplitButtonProps } from "../split-button";
|
|
3
|
+
export interface MultiActionButtonProps extends Omit<SplitButtonProps, "buttonType"> {
|
|
4
|
+
/** Button type: "primary" | "secondary" | "tertiary" */
|
|
5
|
+
buttonType?: "primary" | "secondary" | "tertiary";
|
|
6
|
+
/** Second text child, renders under main text, only when size is "large" */
|
|
7
|
+
subtext?: string;
|
|
52
8
|
}
|
|
53
|
-
|
|
9
|
+
export declare const MultiActionButton: ({ align, disabled, as, buttonType, size, children, text, subtext, "data-element": dataElement, "data-role": dataRole, ...rest }: MultiActionButtonProps) => JSX.Element;
|
|
10
|
+
export default MultiActionButton;
|