reshaped 3.7.0-canary.16 → 3.7.0-canary.17

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 (12) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/dist/bundle.css +1 -1
  3. package/dist/bundle.js +11 -11
  4. package/dist/components/Autocomplete/Autocomplete.js +64 -24
  5. package/dist/components/Autocomplete/Autocomplete.types.d.ts +2 -0
  6. package/dist/components/Autocomplete/tests/Autocomplete.stories.js +2 -2
  7. package/dist/components/Flyout/FlyoutContent.js +1 -1
  8. package/dist/components/MenuItem/MenuItem.js +2 -2
  9. package/dist/components/MenuItem/MenuItem.module.css +1 -1
  10. package/dist/components/MenuItem/MenuItem.types.d.ts +1 -0
  11. package/dist/components/Popover/Popover.js +1 -1
  12. package/package.json +1 -1
package/dist/components/Autocomplete/Autocomplete.js CHANGED
@@ -3,16 +3,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
3
  import React from "react";
4
4
  import TextField from "../TextField/index.js";
5
5
  import DropdownMenu from "../DropdownMenu/index.js";
6
- import { getActiveElement } from "../../utilities/a11y/index.js";
7
6
  import * as keys from "../../constants/keys.js";
8
7
  import useHotkeys from "../../hooks/useHotkeys.js";
9
8
  import useHandlerRef from "../../hooks/useHandlerRef.js";
10
9
  import s from "./Autocomplete.module.css";
10
+ import useElementId from "../../hooks/useElementId.js";
11
+ import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
11
12
  const AutocompleteContext = React.createContext({});
12
13
  const Autocomplete = (props) => {
13
14
  const { children, onChange, onInput, onItemSelect, name, containerRef, instanceRef, onBackspace, onEnter, active, onOpen, onClose, ...textFieldProps } = props;
15
+ const [highlightedId, setHighlightedId] = React.useState();
14
16
  const onBackspaceRef = useHandlerRef(onBackspace);
15
- const onEnterRef = useHandlerRef(onEnter);
17
+ const contentRef = React.useRef(null);
16
18
  const internalInputRef = React.useRef(null);
17
19
  const inputAttributesRef = textFieldProps.inputAttributes?.ref;
18
20
  const inputRef = inputAttributesRef && typeof inputAttributesRef !== "string" && "current" in inputAttributesRef
@@ -23,15 +25,18 @@ const Autocomplete = (props) => {
23
25
  const lockedRef = React.useRef(false);
24
26
  const onOpenRef = useHandlerRef(onOpen);
25
27
  const onCloseRef = useHandlerRef(onClose);
28
+ const onChangeRef = useHandlerRef(onChange);
29
+ const onItemSelectRef = useHandlerRef(onItemSelect);
30
+ const onEnterRef = useHandlerRef(onEnter);
26
31
  const isDropdownActive = hasChildren && (active ?? internalActive);
27
- const lockDropdown = () => {
32
+ const lockDropdown = React.useCallback(() => {
28
33
  // Prevent dropdown from re-opening when clicked on item with mouse
29
34
  // and focus moves to the item and back to the input
30
35
  lockedRef.current = true;
31
36
  setTimeout(() => {
32
37
  lockedRef.current = false;
33
38
  }, 100);
34
- };
39
+ }, []);
35
40
  const handleOpen = React.useCallback(() => {
36
41
  if (lockedRef.current)
37
42
  return;
@@ -42,11 +47,11 @@ const Autocomplete = (props) => {
42
47
  setInternalActive(false);
43
48
  onCloseRef.current?.(args);
44
49
  };
45
- const handleItemClick = (args) => {
46
- onChange?.({ value: args.value, name });
47
- onItemSelect?.(args);
50
+ const handleItemClick = React.useCallback((args) => {
51
+ onChangeRef.current?.({ value: args.value, name });
52
+ onItemSelectRef.current?.(args);
48
53
  lockDropdown();
49
- };
54
+ }, [lockDropdown, onChangeRef, onItemSelectRef, name]);
50
55
  const handleChange = (args) => {
51
56
  onChange?.(args);
52
57
  handleOpen();
@@ -64,27 +69,56 @@ const Autocomplete = (props) => {
64
69
  lockDropdown();
65
70
  inputRef.current?.focus();
66
71
  };
72
+ const getOptionElements = React.useCallback(() => {
73
+ const contentEl = contentRef.current;
74
+ if (!contentEl)
75
+ return [];
76
+ return Array.from(contentEl.querySelectorAll("[role=option]"));
77
+ }, []);
67
78
  useHotkeys({
79
+ [keys.ENTER]: () => {
80
+ const options = getOptionElements();
81
+ const highlightedOption = options.find((el) => el.id === highlightedId);
82
+ highlightedOption?.click();
83
+ onEnterRef.current?.();
84
+ },
68
85
  [keys.BACKSPACE]: () => {
69
86
  onBackspaceRef.current?.();
70
87
  },
71
- [keys.ENTER]: () => {
72
- onEnterRef.current?.();
88
+ [keys.UP]: () => {
89
+ const options = getOptionElements();
90
+ if (options.length) {
91
+ const highlightedIndex = options.findIndex((el) => el.id === highlightedId);
92
+ const nextOption = options.at(highlightedIndex - 1) || options.at(-1);
93
+ setHighlightedId(nextOption.id);
94
+ }
73
95
  },
74
- }, [onBackspaceRef, onEnterRef], {
75
- ref: inputRef,
76
- disabled: !onBackspaceRef.current && !onEnterRef.current,
77
- });
78
- useHotkeys({
79
96
  [keys.DOWN]: () => {
80
97
  handleOpen();
98
+ const options = getOptionElements();
99
+ if (options.length) {
100
+ const highlightedIndex = options.findIndex((el) => el.id === highlightedId);
101
+ const nextOption = options.at(highlightedIndex + 1) || options.at(0);
102
+ setHighlightedId(nextOption.id);
103
+ }
81
104
  },
82
- [keys.ENTER]: () => {
83
- const el = getActiveElement(inputRef.current);
84
- el?.click();
85
- },
86
- }, [handleOpen], { ref: inputRef, preventDefault: true });
87
- return (_jsx(AutocompleteContext.Provider, { value: { onItemClick: handleItemClick }, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: "selection-menu", active: isDropdownActive, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: isDropdownActive, attributes: {
105
+ }, [handleOpen, getOptionElements, highlightedId], { ref: inputRef, preventDefault: true });
106
+ useIsomorphicLayoutEffect(() => {
107
+ if (!isDropdownActive)
108
+ return;
109
+ requestAnimationFrame(() => {
110
+ const options = getOptionElements();
111
+ const firstId = options[0]?.id;
112
+ if (firstId)
113
+ setHighlightedId(firstId);
114
+ });
115
+ }, [isDropdownActive]);
116
+ const contextValue = React.useMemo(() => ({
117
+ onItemClick: handleItemClick,
118
+ highlightedId,
119
+ setHighlightedId,
120
+ }), [highlightedId, handleItemClick]);
121
+ return (_jsx(AutocompleteContext.Provider, { value: contextValue, children: _jsxs(DropdownMenu, { position: "bottom", width: "trigger", triggerType: "focus", trapFocusMode: false, active: isDropdownActive, onClose: handleClose, onOpen: handleOpen, containerRef: containerRef, disableHideAnimation: true, instanceRef: instanceRef, children: [_jsx(DropdownMenu.Trigger, { children: ({ ref, ...attributes }) => (_jsx(TextField, { ...textFieldProps, name: name, onChange: handleChange, focused: isDropdownActive, attributes: {
88
122
  ...textFieldProps.attributes,
89
123
  // Ignoring the type check since TS can't infer the correct html element type
90
124
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -104,18 +138,24 @@ const Autocomplete = (props) => {
104
138
  onClick: attributes.onFocus,
105
139
  ref: inputRef,
106
140
  role: "combobox",
107
- } })) }), _jsx(DropdownMenu.Content, { attributes: { onClick: handleContentClick }, children: children })] }) }));
141
+ "aria-activedescendant": highlightedId,
142
+ "aria-haspopup": "listbox",
143
+ "aria-autocomplete": "list",
144
+ } })) }), _jsx(DropdownMenu.Content, { attributes: { onClick: handleContentClick, role: "listbox", ref: contentRef }, children: children })] }) }));
108
145
  };
109
146
  const AutocompleteItem = (props) => {
110
147
  const { value, data, onClick, ...menuItemProps } = props;
111
- const { onItemClick } = React.useContext(AutocompleteContext);
148
+ const { onItemClick, highlightedId } = React.useContext(AutocompleteContext);
149
+ const id = useElementId();
112
150
  const handleClick = (e) => {
113
151
  onClick?.(e);
114
152
  onItemClick({ value, data });
115
153
  };
116
- return (_jsx(DropdownMenu.Item, { ...menuItemProps, className: [menuItemProps.disabled && s["item--disabled"], menuItemProps.className], attributes: {
154
+ return (_jsx(DropdownMenu.Item, { ...menuItemProps, className: [menuItemProps.disabled && s["item--disabled"], menuItemProps.className], highlighted: highlightedId === id, attributes: {
117
155
  ...menuItemProps.attributes,
118
156
  role: "option",
157
+ id,
158
+ tabIndex: -1,
119
159
  }, onClick: handleClick }));
120
160
  };
121
161
  Autocomplete.Item = AutocompleteItem;
package/dist/components/Autocomplete/Autocomplete.types.d.ts CHANGED
@@ -15,6 +15,8 @@ export type Props = TextFieldProps & Pick<DropdownMenuProps, "containerRef" | "i
15
15
  export type ItemProps = MenuItemProps & SelectArgs;
16
16
  export type Context = {
17
17
  onItemClick: (args: SelectArgs) => void;
18
+ highlightedId?: string;
19
+ setHighlightedId: (value?: string) => void;
18
20
  };
19
21
  export type Instance = DropdownMenuInstance;
20
22
  export {};
package/dist/components/Autocomplete/tests/Autocomplete.stories.js CHANGED
@@ -33,7 +33,7 @@ export const active = {
33
33
  }} onClose={() => {
34
34
  args.handleClose();
35
35
  toggle.deactivate();
36
- }}>
36
+ }} onChange={(args) => console.log(args)}>
37
37
  {["Pizza", "Pie", "Ice-cream"].map((v, i) => {
38
38
  return (<Autocomplete.Item key={v} value={v}>
39
39
  {v}
@@ -46,7 +46,7 @@ export const active = {
46
46
  },
47
47
  play: async ({ canvasElement, args }) => {
48
48
  const canvas = within(canvasElement.ownerDocument.body);
49
- const input = canvas.getByRole("combobox");
49
+ // const input = canvas.getByRole("combobox");
50
50
  const list = await canvas.findByRole("listbox");
51
51
  expect(list).toBeInTheDocument();
52
52
  expect(args.handleOpen).not.toHaveBeenCalled();
package/dist/components/Flyout/FlyoutContent.js CHANGED
@@ -75,7 +75,7 @@ const FlyoutContent = (props) => {
75
75
  s["--animated"], position && s[`--position-${position}`], width === "trigger" && s["--width-trigger"], triggerType === "hover" && disableContentHover && s["--hover-disabled"]);
76
76
  // className is applied to inner element because it has the transform and is treated like a real root element
77
77
  const innerClassNames = classNames(s.inner, className, contentClassName);
78
- let role;
78
+ let role = attributes?.role;
79
79
  if (triggerType === "hover") {
80
80
  role = "tooltip";
81
81
  }
package/dist/components/MenuItem/MenuItem.js CHANGED
@@ -7,8 +7,8 @@ import View from "../View/index.js";
7
7
  import MenuItemAligner from "./MenuItemAligner.js";
8
8
  import s from "./MenuItem.module.css";
9
9
  const MenuItem = forwardRef((props, ref) => {
10
- const { icon, startSlot, endSlot, children, color = "primary", selected, disabled, onClick, href, size = "medium", roundedCorners, stopPropagation, as, className, attributes, } = props;
11
- const rootClassNames = classNames(s.root, className, responsiveClassNames(s, "--size", size), responsiveClassNames(s, "--rounded-corners", roundedCorners), color && s[`--color-${color}`], selected && s["--selected"], disabled && s["--disabled"]);
10
+ const { icon, startSlot, endSlot, children, color = "primary", selected, highlighted, disabled, onClick, href, size = "medium", roundedCorners, stopPropagation, as, className, attributes, } = props;
11
+ const rootClassNames = classNames(s.root, className, responsiveClassNames(s, "--size", size), responsiveClassNames(s, "--rounded-corners", roundedCorners), color && s[`--color-${color}`], selected && s["--selected"], disabled && s["--disabled"], highlighted && s["--highlighted"]);
12
12
  const gapSize = responsivePropDependency(size, (size) => (size === "large" ? 3 : 2));
13
13
  const iconSize = responsivePropDependency(size, (size) => (size === "large" ? 5 : 4));
14
14
  return (_jsx(Actionable, { disabled: disabled, className: rootClassNames, attributes: { ...attributes, "data-rs-aligner-target": true }, onClick: onClick, href: href, ref: ref, as: as, stopPropagation: stopPropagation, children: _jsxs(View, { direction: "row", gap: gapSize, align: "center", children: [icon && _jsx(Icon, { svg: icon, className: s.icon, size: iconSize }), !icon && startSlot, children && (_jsx(View.Item, { grow: true, className: s.content, children: children })), endSlot] }) }));
package/dist/components/MenuItem/MenuItem.module.css CHANGED
@@ -1 +1 @@
1
- .root,button.root{background-color:var(--rs-menu-item-bg-color);color:var(--rs-menu-item-color);display:block;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);padding:var(--rs-p-v) var(--rs-p-h);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,transform,box-shadow}.icon{color:var(--rs-menu-item-icon-color,inherit)}.content,.icon{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color}.--rounded-corners{border-radius:var(--rs-menu-item-radius)}.--size-small{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium,.--size-small{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--color-neutral{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-neutral.--selected,.--color-neutral[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}@media (hover:hover) and (pointer:fine){.--color-neutral:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}}.--color-critical{--rs-menu-item-color:var(--rs-color-foreground-critical)}.--color-critical.--selected,.--color-critical[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-critical),12%)}@media (hover:hover) and (pointer:fine){.--color-critical:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-critical),12%)}}.--color-primary{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-primary[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}@media (hover:hover) and (pointer:fine){.--color-primary:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}}.--color-primary.--selected,.--color-primary.--selected:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-primary),12%);--rs-menu-item-color:var(--rs-color-foreground-primary);--rs-menu-item-icon-color:var(--rs-color-foreground-primary)}.--selected,.--selected:hover{cursor:default}.--disabled,.--disabled:hover{--rs-menu-item-color:var(--rs-color-foreground-disabled);--rs-menu-item-bg-color:none;--rs-menu-item-icon-color:var(--rs-color-foreground-disabled)}button.root{width:100%}.aligner button.root{box-sizing:initial}@media (--rs-viewport-m ){.--rounded-corners-true--m{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--m{border-radius:0}.--size-small--m{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--m,.--size-small--m{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--m{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--m{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--rounded-corners-true--l{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--l{border-radius:0}.--size-small--l{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--l,.--size-small--l{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--l{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--l{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--rounded-corners-true--xl{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--xl{border-radius:0}.--size-small--xl{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--xl,.--size-small--xl{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--xl{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--xl{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}
1
+ .root,button.root{background-color:var(--rs-menu-item-bg-color);color:var(--rs-menu-item-color);display:block;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);padding:var(--rs-p-v) var(--rs-p-h);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,transform,box-shadow}.icon{color:var(--rs-menu-item-icon-color,inherit)}.content,.icon{transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color}.--rounded-corners{border-radius:var(--rs-menu-item-radius)}.--size-small{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium,.--size-small{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--color-neutral{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-neutral.--highlighted,.--color-neutral.--selected,.--color-neutral[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}@media (hover:hover) and (pointer:fine){.--color-neutral:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}}.--color-critical{--rs-menu-item-color:var(--rs-color-foreground-critical)}.--color-critical.--highlighted,.--color-critical.--selected,.--color-critical[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-critical),12%)}@media (hover:hover) and (pointer:fine){.--color-critical:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-critical),12%)}}.--color-primary{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-primary.--highlighted,.--color-primary[data-rs-focus]{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}@media (hover:hover) and (pointer:fine){.--color-primary:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-neutral),32%)}}.--color-primary.--selected,.--color-primary.--selected:hover{--rs-menu-item-bg-color:rgba(var(--rs-color-rgb-background-primary),12%);--rs-menu-item-color:var(--rs-color-foreground-primary);--rs-menu-item-icon-color:var(--rs-color-foreground-primary)}.--selected,.--selected:hover{cursor:default}.--disabled,.--disabled:hover{--rs-menu-item-color:var(--rs-color-foreground-disabled);--rs-menu-item-bg-color:none;--rs-menu-item-icon-color:var(--rs-color-foreground-disabled)}button.root{width:100%}.aligner button.root{box-sizing:initial}@media (--rs-viewport-m ){.--rounded-corners-true--m{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--m{border-radius:0}.--size-small--m{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--m,.--size-small--m{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--m{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--m{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--rounded-corners-true--l{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--l{border-radius:0}.--size-small--l{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--l,.--size-small--l{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--l{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--l{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--rounded-corners-true--xl{border-radius:var(--rs-menu-item-radius)}.--rounded-corners-false--xl{border-radius:0}.--size-small--xl{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--xl,.--size-small--xl{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-medium--xl{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-small)}.--size-large--xl{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}
package/dist/components/MenuItem/MenuItem.types.d.ts CHANGED
@@ -9,6 +9,7 @@ export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled
9
9
  startSlot?: React.ReactNode;
10
10
  children: React.ReactNode;
11
11
  endSlot?: React.ReactNode;
12
+ highlighted?: boolean;
12
13
  selected?: boolean;
13
14
  size?: G.Responsive<Size>;
14
15
  roundedCorners?: G.Responsive<boolean>;
package/dist/components/Popover/Popover.js CHANGED
@@ -7,7 +7,7 @@ import getPaddingStyles from "../../styles/padding/index.js";
7
7
  const Popover = (props) => {
8
8
  const { width, variant = "elevated", triggerType = "click", position = "bottom", elevation, ...flyoutProps } = props;
9
9
  const padding = props.padding ?? (variant === "headless" ? 0 : 4);
10
- const trapFocusMode = props.trapFocusMode || (triggerType === "hover" ? "content-menu" : undefined);
10
+ const trapFocusMode = props.trapFocusMode ?? (triggerType === "hover" ? "content-menu" : undefined);
11
11
  const paddingStyles = getPaddingStyles(padding);
12
12
  const contentClassName = classNames(s.content, !!width && s["content--has-width"], variant && s[`content--variant-${variant}`], elevation && s[`content--elevation-${elevation}`]);
13
13
  return (_jsx(Flyout, { ...flyoutProps, position: position, trapFocusMode: trapFocusMode, triggerType: triggerType, width: width, contentClassName: contentClassName, contentAttributes: { style: { ...paddingStyles?.variables } } }));
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "reshaped",
3
3
  "description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
4
- "version": "3.7.0-canary.16",
4
+ "version": "3.7.0-canary.17",
5
5
  "license": "MIT",
6
6
  "email": "hello@reshaped.so",
7
7
  "homepage": "https://reshaped.so",