carbon-react 117.4.0 → 117.5.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.
Files changed (9) hide show
  1. package/esm/components/switch/__internal__/switch-slider.style.js +3 -2
  2. package/esm/components/switch/switch.style.js +2 -2
  3. package/esm/components/vertical-menu/vertical-menu-item.component.d.ts +3 -1
  4. package/esm/components/vertical-menu/vertical-menu-item.component.js +3 -1
  5. package/lib/components/switch/__internal__/switch-slider.style.js +3 -2
  6. package/lib/components/switch/switch.style.js +2 -2
  7. package/lib/components/vertical-menu/vertical-menu-item.component.d.ts +3 -1
  8. package/lib/components/vertical-menu/vertical-menu-item.component.js +3 -1
  9. package/package.json +1 -1
package/esm/components/switch/__internal__/switch-slider.style.js CHANGED
@@ -13,19 +13,20 @@ const StyledSwitchSlider = styled.span`
13
13
  display: flex;
14
14
  font-size: 12px;
15
15
  font-weight: bold;
16
- height: 24px;
16
+ height: 28px;
17
17
  left: 0;
18
18
  letter-spacing: 1px;
19
19
  position: absolute;
20
20
  text-transform: uppercase;
21
21
  top: 0;
22
- width: 60px;
22
+ width: 64px;
23
23
  min-width: fit-content;
24
24
  z-index: 2;
25
25
  border-radius: 90px;
26
26
  border-style: solid;
27
27
  border-color: var(--colorsActionMinor400);
28
28
  border-width: var(--borderWidth200);
29
+ box-sizing: border-box;
29
30
 
30
31
  &::before {
31
32
  background-color: var(--colorsActionMinor400);
package/esm/components/switch/switch.style.js CHANGED
@@ -124,8 +124,8 @@ const StyledSwitch = styled.div`
124
124
 
125
125
  ${size === "large" && css`
126
126
  ${StyledCheckableInput}, ${HiddenCheckableInputStyle}, ${StyledSwitchSlider} {
127
- height: 40px;
128
- width: 78px;
127
+ height: 44px;
128
+ width: 82px;
129
129
  min-width: fit-content;
130
130
  }
131
131
 
package/esm/components/vertical-menu/vertical-menu-item.component.d.ts CHANGED
@@ -5,6 +5,8 @@ import { IconType } from "../icon";
5
5
  export interface VerticalMenuItemProps<T = React.ElementType> extends PaddingProps, TagProps {
6
6
  /** Children of the menu item - another level of VerticalMenuItems */
7
7
  children?: React.ReactNode;
8
+ /** Default open state of the component */
9
+ defaultOpen?: boolean;
8
10
  /** Title of the menu item */
9
11
  title: string;
10
12
  /** Adornment of the menu item meant to be rendered on the right side */
@@ -21,5 +23,5 @@ export interface VerticalMenuItemProps<T = React.ElementType> extends PaddingPro
21
23
  component?: T;
22
24
  }
23
25
  declare type InferredComponentProps<T extends React.ElementType> = Omit<React.ComponentProps<T>, keyof VerticalMenuItemProps<T>>;
24
- export declare const VerticalMenuItem: <T>({ title, iconType, adornment, children, component, active, height, href, ...rest }: T extends React.ElementType<any> ? InferredComponentProps<T> & VerticalMenuItemProps<T> : VerticalMenuItemProps<React.ElementType<any>>) => JSX.Element;
26
+ export declare const VerticalMenuItem: <T>({ defaultOpen, title, iconType, adornment, children, component, active, height, href, ...rest }: T extends React.ElementType<any> ? InferredComponentProps<T> & VerticalMenuItemProps<T> : VerticalMenuItemProps<React.ElementType<any>>) => JSX.Element;
25
27
  export default VerticalMenuItem;
package/esm/components/vertical-menu/vertical-menu-item.component.js CHANGED
@@ -11,6 +11,7 @@ const MenuItemContext = /*#__PURE__*/React.createContext({
11
11
  });
12
12
 
13
13
  const VerticalMenuItem = ({
14
+ defaultOpen = false,
14
15
  title,
15
16
  iconType,
16
17
  adornment,
@@ -21,7 +22,7 @@ const VerticalMenuItem = ({
21
22
  href,
22
23
  ...rest
23
24
  }) => {
24
- const [isOpen, setIsOpen] = useState(false);
25
+ const [isOpen, setIsOpen] = useState(defaultOpen);
25
26
 
26
27
  const handleOnClick = () => {
27
28
  setIsOpen(state => !state);
@@ -104,6 +105,7 @@ VerticalMenuItem.propTypes = {
104
105
  "data-component": PropTypes.string,
105
106
  "data-element": PropTypes.string,
106
107
  "data-role": PropTypes.string,
108
+ "defaultOpen": PropTypes.bool,
107
109
  "height": PropTypes.string,
108
110
  "href": PropTypes.string,
109
111
  "iconType": PropTypes.oneOf(["add", "admin", "alert_on", "alert", "analysis", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "construction", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "laptop", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
package/lib/components/switch/__internal__/switch-slider.style.js CHANGED
@@ -29,19 +29,20 @@ const StyledSwitchSlider = _styledComponents.default.span`
29
29
  display: flex;
30
30
  font-size: 12px;
31
31
  font-weight: bold;
32
- height: 24px;
32
+ height: 28px;
33
33
  left: 0;
34
34
  letter-spacing: 1px;
35
35
  position: absolute;
36
36
  text-transform: uppercase;
37
37
  top: 0;
38
- width: 60px;
38
+ width: 64px;
39
39
  min-width: fit-content;
40
40
  z-index: 2;
41
41
  border-radius: 90px;
42
42
  border-style: solid;
43
43
  border-color: var(--colorsActionMinor400);
44
44
  border-width: var(--borderWidth200);
45
+ box-sizing: border-box;
45
46
 
46
47
  &::before {
47
48
  background-color: var(--colorsActionMinor400);
package/lib/components/switch/switch.style.js CHANGED
@@ -147,8 +147,8 @@ const StyledSwitch = _styledComponents.default.div`
147
147
 
148
148
  ${size === "large" && (0, _styledComponents.css)`
149
149
  ${_checkableInput.StyledCheckableInput}, ${_hiddenCheckableInput.default}, ${_switchSlider.default} {
150
- height: 40px;
151
- width: 78px;
150
+ height: 44px;
151
+ width: 82px;
152
152
  min-width: fit-content;
153
153
  }
154
154
 
package/lib/components/vertical-menu/vertical-menu-item.component.d.ts CHANGED
@@ -5,6 +5,8 @@ import { IconType } from "../icon";
5
5
  export interface VerticalMenuItemProps<T = React.ElementType> extends PaddingProps, TagProps {
6
6
  /** Children of the menu item - another level of VerticalMenuItems */
7
7
  children?: React.ReactNode;
8
+ /** Default open state of the component */
9
+ defaultOpen?: boolean;
8
10
  /** Title of the menu item */
9
11
  title: string;
10
12
  /** Adornment of the menu item meant to be rendered on the right side */
@@ -21,5 +23,5 @@ export interface VerticalMenuItemProps<T = React.ElementType> extends PaddingPro
21
23
  component?: T;
22
24
  }
23
25
  declare type InferredComponentProps<T extends React.ElementType> = Omit<React.ComponentProps<T>, keyof VerticalMenuItemProps<T>>;
24
- export declare const VerticalMenuItem: <T>({ title, iconType, adornment, children, component, active, height, href, ...rest }: T extends React.ElementType<any> ? InferredComponentProps<T> & VerticalMenuItemProps<T> : VerticalMenuItemProps<React.ElementType<any>>) => JSX.Element;
26
+ export declare const VerticalMenuItem: <T>({ defaultOpen, title, iconType, adornment, children, component, active, height, href, ...rest }: T extends React.ElementType<any> ? InferredComponentProps<T> & VerticalMenuItemProps<T> : VerticalMenuItemProps<React.ElementType<any>>) => JSX.Element;
25
27
  export default VerticalMenuItem;
package/lib/components/vertical-menu/vertical-menu-item.component.js CHANGED
@@ -30,6 +30,7 @@ const MenuItemContext = /*#__PURE__*/_react.default.createContext({
30
30
  });
31
31
 
32
32
  const VerticalMenuItem = ({
33
+ defaultOpen = false,
33
34
  title,
34
35
  iconType,
35
36
  adornment,
@@ -40,7 +41,7 @@ const VerticalMenuItem = ({
40
41
  href,
41
42
  ...rest
42
43
  }) => {
43
- const [isOpen, setIsOpen] = (0, _react.useState)(false);
44
+ const [isOpen, setIsOpen] = (0, _react.useState)(defaultOpen);
44
45
 
45
46
  const handleOnClick = () => {
46
47
  setIsOpen(state => !state);
@@ -124,6 +125,7 @@ VerticalMenuItem.propTypes = {
124
125
  "data-component": _propTypes.default.string,
125
126
  "data-element": _propTypes.default.string,
126
127
  "data-role": _propTypes.default.string,
128
+ "defaultOpen": _propTypes.default.bool,
127
129
  "height": _propTypes.default.string,
128
130
  "href": _propTypes.default.string,
129
131
  "iconType": _propTypes.default.oneOf(["add", "admin", "alert_on", "alert", "analysis", "arrow_bottom_right_circle", "arrow_down", "arrow_left_boxed", "arrow_left_right_small", "arrow_left_small", "arrow_left", "arrow_right_small", "arrow_right", "arrow_top_left_circle", "arrow_up", "arrow", "arrows_left_right", "attach", "bank_with_card", "bank", "basket_with_squares", "basket", "bed", "bin", "block_arrow_right", "blocked_square", "blocked", "bold", "box_arrow_left", "boxed_shapes", "bulk_destroy", "bullet_list_dotted", "bullet_list_numbers", "bullet_list", "business", "calendar_today", "calendar", "call", "camera", "car_lock", "car_money", "car_repair", "card_view", "caret_down", "caret_large_down", "caret_large_left", "caret_large_right", "caret_large_up", "caret_left", "caret_right", "caret_up", "cart", "cash", "chart_bar", "chart_line", "chart_pie", "chat_notes", "chat", "chevron_down_thick", "chevron_down", "chevron_left_thick", "chevron_left", "chevron_right_thick", "chevron_right", "chevron_up_thick", "chevron_up", "circle_with_dots", "circles_connection", "clock", "close", "coins", "collaborate", "computer_clock", "connect", "construction", "contacts", "copy", "create", "credit_card_slash", "credit_card", "cross_circle", "cross", "csv", "dashboard", "delete", "delivery", "disconnect", "disputed", "document_right_align", "document_tick", "document_vertical_lines", "download", "draft", "drag_vertical", "drag", "drill", "dropdown", "duplicate", "edit", "edited", "ellipsis_horizontal", "ellipsis_vertical", "email_switch", "email", "entry", "envelope_dollar", "envelope_euro", "error_square", "error", "euro", "expand", "factory", "favourite_lined", "favourite", "fax", "feedback", "file_excel", "file_generic", "file_image", "file_pdf", "file_word", "files_leaning", "filter_new", "filter", "fit_height", "fit_width", "flag", "folder", "form_refresh", "gift", "go", "graduation_hat", "graph", "grid", "hand_cash_coins", "hand_cash_note", "help", "hide", "home", "image", "in_progress", "in_transit", "individual", "info", "italic", "key", "laptop", "ledger_arrow_left", "ledger_arrow_right", "ledger", "lightbulb_off", "lightbulb_on", "link", "list_view", "location", "locked", "logout", "lookup", "marker", "message", "minus_large", "minus", "mobile", "money_bag", "none", "old_warning", "palm_tree", "pause_circle", "pause", "pdf", "people_switch", "people", "percentage_boxed", "person_info", "person_tick", "person", "petrol_pump", "phone", "piggy_bank", "plane", "play_circle", "play", "plus_large", "plus", "pound", "print", "progress", "progressed", "question_hollow", "question_mark", "question", "refresh_clock", "refresh", "remove", "sage_coin", "save", "scan", "search", "services", "settings_old", "settings", "share", "shop", "sort_down", "sort_up", "spanner", "split_container", "split", "square_dot", "squares_nine", "stacked_boxes", "stacked_squares", "submitted", "sync", "tag", "talk", "theatre_masks", "three_boxes", "tick_circle", "tick_thick", "tick", "true_tick", "u_turn_left", "u_turn_right", "undo", "unlocked", "upload", "uploaded", "video", "view", "warning"]),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "117.4.0",
3
+ "version": "117.5.0",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",