@salutejs/plasma-new-hope 0.123.0-canary.1369.10450142781.0 → 0.123.0-dev.0

package/styled-components/cjs/examples/sds_engineer/components/Popover/Popover.stories.tsx

@@ -93,7 +93,7 @@ const StoryDefault = (args: StoryPopoverProps) => {
 
     return (
         <Popover
-            isOpen={isOpen}
+            opened={isOpen}
             onToggle={(is) => setIsOpen(is)}
             frame="theme-root"
             usePortal={false}

package/styled-components/cjs/examples/sds_engineer/components/Popup/Popup.stories.tsx

@@ -138,7 +138,7 @@ const StoryPopupDemo = ({ placement, offsetX, offsetY }: StoryPopupProps) => {
                         id="popupA"
                         frame={ref}
                         withAnimation
-                        isOpen={isOpenA}
+                        opened={isOpenA}
                         placement={placement}
                         offset={[offsetX, offsetY]}
                     >
@@ -154,7 +154,7 @@ const StoryPopupDemo = ({ placement, offsetX, offsetY }: StoryPopupProps) => {
                         id="popupB"
                         frame="theme-root"
                         withAnimation
-                        isOpen={isOpenB}
+                        opened={isOpenB}
                         placement={placement}
                         offset={[offsetX, offsetY]}
                     >

package/styled-components/cjs/examples/sds_engineer/components/Toast/Toast.stories.tsx

@@ -194,7 +194,7 @@ const StoryComplex = ({
         <NotificationsProvider>
             <PopupProvider>
                 <Button text="Открыть модальное окно" onClick={() => setIsModalOpen(true)} />
-                <Modal frame="theme-root" isOpen={isModalOpen} onClose={() => setIsModalOpen(false)}>
+                <Modal frame="theme-root" opened={isModalOpen} onClose={() => setIsModalOpen(false)}>
                     <div>Hello!</div>
                     <Button view="default" text="Add notification" onClick={handleShowNotification} />
                 </Modal>

package/styled-components/cjs/examples/sds_engineer/components/Tooltip/Tooltip.stories.tsx

@@ -57,7 +57,7 @@ const StoryDefault = ({ size }: TooltipProps) => {
                         target={<Button>Btn</Button>}
                         placement="left"
                         size={size}
-                        isOpen
+                        opened
                         hasArrow
                         text="left"
                         frame="theme-root"
@@ -65,7 +65,7 @@ const StoryDefault = ({ size }: TooltipProps) => {
                 }
                 placement="top-start"
                 size={size}
-                isOpen
+                opened
                 hasArrow
                 text="top-start"
                 frame="theme-root"
@@ -74,7 +74,7 @@ const StoryDefault = ({ size }: TooltipProps) => {
                 target={<Button>Btn</Button>}
                 placement="top"
                 size={size}
-                isOpen
+                opened
                 hasArrow
                 text="top"
                 frame="theme-root"
@@ -85,7 +85,7 @@ const StoryDefault = ({ size }: TooltipProps) => {
                         target={<Button>Btn</Button>}
                         placement="right"
                         size={size}
-                        isOpen
+                        opened
                         hasArrow
                         text="right"
                         frame="theme-root"
@@ -93,7 +93,7 @@ const StoryDefault = ({ size }: TooltipProps) => {
                 }
                 placement="top-end"
                 size={size}
-                isOpen
+                opened
                 hasArrow
                 text="top-end"
                 frame="theme-root"
@@ -102,7 +102,7 @@ const StoryDefault = ({ size }: TooltipProps) => {
                 target={<Button>Btn</Button>}
                 placement="bottom-start"
                 size={size}
-                isOpen
+                opened
                 hasArrow
                 text="bottom-start"
                 frame="theme-root"
@@ -111,7 +111,7 @@ const StoryDefault = ({ size }: TooltipProps) => {
                 target={<Button>Btn</Button>}
                 placement="bottom"
                 size={size}
-                isOpen
+                opened
                 hasArrow
                 text="bottom"
                 frame="theme-root"
@@ -120,7 +120,7 @@ const StoryDefault = ({ size }: TooltipProps) => {
                 target={<Button>Btn</Button>}
                 placement="bottom-end"
                 size={size}
-                isOpen
+                opened
                 hasArrow
                 text="bottom-end"
                 frame="theme-root"
@@ -170,7 +170,7 @@ const StoryLive = (args: TooltipProps) => {
                     {...args}
                     id="example-tooltip-firstname"
                     text={text}
-                    isOpen
+                    opened
                     frame="theme-root"
                 />
             </StyledRow>

package/styled-components/es/components/Autocomplete/Autocomplete.js

@@ -116,7 +116,7 @@ export var autocompleteRoot = function autocompleteRoot(Root) {
       disabled: disabled,
       readOnly: readOnly
     }, /*#__PURE__*/React.createElement(StyledPopover, {
-      isOpen: isOpen,
+      opened: isOpen,
       offset: [0, 0],
       placement: getPlacements('bottom'),
       isFocusTrapped: false,

package/styled-components/es/components/Combobox/Combobox.js

@@ -75,8 +75,8 @@ export var comboboxRoot = function comboboxRoot(Root) {
     };
     var _useState3 = useState(opened),
       _useState4 = _slicedToArray(_useState3, 2),
-      innerOpened = _useState4[0],
-      setInnerOpened = _useState4[1];
+      isVisible = _useState4[0],
+      setIsVisible = _useState4[1];
     var _useState5 = useState(''),
       _useState6 = _slicedToArray(_useState5, 2),
       search = _useState6[0],
@@ -99,7 +99,7 @@ export var comboboxRoot = function comboboxRoot(Root) {
       if (disabled || readOnly) {
         return;
       }
-      setInnerOpened(opened);
+      setIsVisible(opened);
     }, [opened, disabled, readOnly]);
     useEffect(function () {
       // INFO: Для кейсов, когда значение выбрано и нужно вывести весь список
@@ -113,14 +113,14 @@ export var comboboxRoot = function comboboxRoot(Root) {
       }
 
       // INFO: Для кейсов, когда значение выбрано и нужно вывести весь список
-      if (!innerOpened) {
+      if (!isVisible) {
         setFilterValue('');
       }
       if (onToggle) {
         onToggle(openValue, event);
         return;
       }
-      setInnerOpened(openValue);
+      setIsVisible(openValue);
     };
     var closedWithoutChanges = useRef(true);
     var updateValue = function updateValue(item, event) {
@@ -152,7 +152,7 @@ export var comboboxRoot = function comboboxRoot(Root) {
     };
     var _useKeyNavigation = useKeyNavigation({
         controlledRefs: controlledRefs,
-        opened: innerOpened,
+        opened: isVisible,
         enumerationType: enumerationType,
         valueType: valueType,
         componentType: 'combobox',
@@ -172,7 +172,7 @@ export var comboboxRoot = function comboboxRoot(Root) {
     var onSearch = function onSearch(newSearch, newOpened) {
       setSearch(newSearch);
       setFilterValue(newSearch);
-      setInnerOpened(newOpened !== null && newOpened !== void 0 ? newOpened : true);
+      setIsVisible(newOpened !== null && newOpened !== void 0 ? newOpened : true);
     };
     var onKeyDownHandle = function onKeyDownHandle(event) {
       onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
@@ -191,10 +191,10 @@ export var comboboxRoot = function comboboxRoot(Root) {
       disabled: disabled || readOnly
     }), /*#__PURE__*/React.createElement(StyledPopover, {
       role: role,
-      isOpen: innerOpened,
+      opened: isVisible,
       onToggle: onInnerToggle,
       target: /*#__PURE__*/React.createElement(ComboboxTarget, _extends({
-        opened: innerOpened,
+        opened: isVisible,
         values: values,
         label: label,
         placeholder: placeholder,

package/styled-components/es/components/DatePicker/DatePicker.template-doc.mdx

@@ -12,7 +12,7 @@ import { PropsTable, Description } from '@site/src/components';
 ## Использование
 Компонент `DatePicker` представляет собой поле ввода даты с выпадающим календарем.
 
-Размер `DatePicker` задаётся с помощью свойства `size`. 
+Размер `DatePicker` задаётся с помощью свойства `size`.
 Возможные значения свойства: `"l"`, `"m"`, `"s"`, `"xs"`.
 
 ```tsx live
@@ -46,7 +46,7 @@ export function App() {
 | YYYY        | 2024        | Год из 4 цифр       |
 | YY          | 24          | Год из 2 цифр       |
 | Q           | 1-4         | Квартал             |
-При выборе даты в календаре или вводе даты через поле ввода, дата будет приводиться к заданному формату. 
+При выборе даты в календаре или вводе даты через поле ввода, дата будет приводиться к заданному формату.
 Свойство `maskWithFormat` позволяет маскировать ввод:
 
 ```tsx live
@@ -100,7 +100,7 @@ export function App() {
     return (
         <div style=\{{ height: "450px" }}>
             <DatePicker
-                isOpen={isOpen}
+                opened={isOpen}
                 label="Лейбл"
                 leftHelper="Подсказка к полю"
                 placeholder="Введите дату"

package/styled-components/es/components/DatePicker/RangeDate/RangeDate.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "isDoubleCalendar", "isOpen", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
+var _excluded = ["className", "isDoubleCalendar", "opened", "label", "leftHelper", "contentLeft", "contentRight", "view", "size", "readOnly", "disabled", "dividerVariant", "dividerIcon", "defaultFirstDate", "defaultSecondDate", "firstValueError", "secondValueError", "firstValueSuccess", "secondValueSuccess", "firstPlaceholder", "secondPlaceholder", "firstTextfieldContentLeft", "firstTextfieldContentRight", "secondTextfieldContentLeft", "secondTextfieldContentRight", "firstTextfieldTextBefore", "secondTextfieldTextBefore", "firstTextfieldTextAfter", "secondTextfieldTextAfter", "format", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "closeOnEsc", "offset", "onToggle", "onChangeFirstValue", "onChangeSecondValue", "onCommitFirstDate", "onCommitSecondDate", "onFocusFirstTextfield", "onFocusSecondTextfield", "onBlurFirstTextfield", "onBlurSecondTextfield"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -26,8 +26,8 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
     var className = _ref.className,
       _ref$isDoubleCalendar = _ref.isDoubleCalendar,
       isDoubleCalendar = _ref$isDoubleCalendar === void 0 ? false : _ref$isDoubleCalendar,
-      _ref$isOpen = _ref.isOpen,
-      isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+      _ref$opened = _ref.opened,
+      opened = _ref$opened === void 0 ? false : _ref$opened,
       label = _ref.label,
       leftHelper = _ref.leftHelper,
       contentLeft = _ref.contentLeft,
@@ -103,7 +103,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
       _useState4 = _slicedToArray(_useState3, 2),
       secondInputRef = _useState4[0],
       setSecondInputRef = _useState4[1];
-    var _useState5 = useState(isOpen),
+    var _useState5 = useState(opened),
       _useState6 = _slicedToArray(_useState5, 2),
       isInnerOpen = _useState6[0],
       setIsInnerOpen = _useState6[1];
@@ -231,9 +231,9 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
     }, [rangeRef.current]);
     useEffect(function () {
       setIsInnerOpen(function (prevOpen) {
-        return prevOpen !== isOpen && isOpen;
+        return prevOpen !== opened && opened;
       });
-    }, [isOpen]);
+    }, [opened]);
     useEffect(function () {
       setCalendarFirstValue(formatCalendarValue(defaultFirstDate, format));
       setInputFirstValue(formatInputValue(defaultFirstDate, format));
@@ -252,7 +252,7 @@ export var datePickerRangeRoot = function datePickerRangeRoot(Root) {
     }, rest), label && /*#__PURE__*/React.createElement(StyledLabel, null, label), /*#__PURE__*/React.createElement(RangeDatePopover, {
       calendarValue: [calendarFirstValue, calendarSecondValue],
       target: RangeComponent,
-      isOpen: isInnerOpen,
+      opened: isInnerOpen,
       includeEdgeDates: includeEdgeDates,
       eventList: eventList,
       disabledList: disabledList,

package/styled-components/es/components/DatePicker/RangeDate/RangeDatePopover/RangeDatePopover.js

@@ -5,6 +5,7 @@ import { StyledCalendar, StyledCalendarDouble } from './RangeDatePopover.styles'
 export var RangeDatePopover = function RangeDatePopover(_ref) {
   var target = _ref.target,
     isOpen = _ref.isOpen,
+    opened = _ref.opened,
     isDoubleCalendar = _ref.isDoubleCalendar,
     calendarValue = _ref.calendarValue,
     min = _ref.min,
@@ -29,9 +30,10 @@ export var RangeDatePopover = function RangeDatePopover(_ref) {
     onChangeValue = _ref.onChangeValue,
     onChangeStartOfRange = _ref.onChangeStartOfRange,
     onToggle = _ref.onToggle;
+  var innerIsOpen = Boolean(isOpen || opened);
   if (isDoubleCalendar) {
     return /*#__PURE__*/React.createElement(StyledPopover, {
-      isOpen: isOpen,
+      opened: innerIsOpen,
       usePortal: false,
       onToggle: onToggle,
       offset: offset,
@@ -60,7 +62,7 @@ export var RangeDatePopover = function RangeDatePopover(_ref) {
     }));
   }
   return /*#__PURE__*/React.createElement(StyledPopover, {
-    isOpen: isOpen,
+    opened: innerIsOpen,
     usePortal: false,
     onToggle: onToggle,
     offset: offset,

package/styled-components/es/components/DatePicker/SingleDate/SingleDate.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "isOpen", "label", "labelPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "defaultDate", "valueError", "valueSuccess", "format", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur"];
+var _excluded = ["className", "opened", "label", "labelPlacement", "placeholder", "leftHelper", "contentLeft", "contentRight", "textBefore", "textAfter", "view", "size", "readOnly", "disabled", "defaultDate", "valueError", "valueSuccess", "format", "maskWithFormat", "min", "max", "includeEdgeDates", "eventList", "disabledList", "eventMonthList", "disabledMonthList", "eventQuarterList", "disabledQuarterList", "eventYearList", "disabledYearList", "type", "placement", "closeOnOverlayClick", "offset", "onChangeValue", "onCommitDate", "onToggle", "onFocus", "onBlur"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -23,8 +23,8 @@ import { LeftHelper, StyledInput, StyledLabel, StyledPopover, base } from './Sin
 export var datePickerRoot = function datePickerRoot(Root) {
   return /*#__PURE__*/forwardRef(function (_ref, ref) {
     var className = _ref.className,
-      _ref$isOpen = _ref.isOpen,
-      isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+      _ref$opened = _ref.opened,
+      opened = _ref$opened === void 0 ? false : _ref$opened,
       label = _ref.label,
       _ref$labelPlacement = _ref.labelPlacement,
       labelPlacement = _ref$labelPlacement === void 0 ? 'outer' : _ref$labelPlacement,
@@ -73,7 +73,7 @@ export var datePickerRoot = function datePickerRoot(Root) {
       onBlur = _ref.onBlur,
       rest = _objectWithoutProperties(_ref, _excluded);
     var inputRef = useRef(null);
-    var _useState = useState(isOpen),
+    var _useState = useState(opened),
       _useState2 = _slicedToArray(_useState, 2),
       isInnerOpen = _useState2[0],
       setIsInnerOpen = _useState2[1];
@@ -141,9 +141,9 @@ export var datePickerRoot = function datePickerRoot(Root) {
     }));
     useEffect(function () {
       setIsInnerOpen(function (prevOpen) {
-        return prevOpen !== isOpen && isOpen;
+        return prevOpen !== opened && opened;
       });
-    }, [isOpen]);
+    }, [opened]);
     useEffect(function () {
       setCalendarValue(formatCalendarValue(defaultDate, format));
       setInputValue(formatInputValue(defaultDate, format));
@@ -156,7 +156,7 @@ export var datePickerRoot = function datePickerRoot(Root) {
       readOnly: !disabled && readOnly,
       ref: ref
     }, rest), !innerLabelPlacement && label && /*#__PURE__*/React.createElement(StyledLabel, null, label), /*#__PURE__*/React.createElement(StyledPopover, {
-      isOpen: isInnerOpen,
+      opened: isInnerOpen,
       usePortal: false,
       onToggle: handleToggle,
       offset: offset,

package/styled-components/es/components/Drawer/Drawer.js

@@ -1,4 +1,4 @@
-var _excluded = ["id", "zIndex", "popupInfo", "withBlur", "children", "view", "size", "width", "height", "isOpen", "initialFocusRef", "focusAfterRef", "className", "onClose", "onOverlayClick", "onEscKeyDown", "offset", "frame", "borderRadius", "placement", "closeOnEsc", "closeOnOverlayClick", "asModal"];
+var _excluded = ["id", "zIndex", "popupInfo", "withBlur", "children", "view", "size", "width", "height", "isOpen", "opened", "initialFocusRef", "focusAfterRef", "className", "onClose", "onOverlayClick", "onEscKeyDown", "offset", "frame", "borderRadius", "placement", "closeOnEsc", "closeOnOverlayClick", "asModal"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -33,6 +33,7 @@ export var drawerRoot = function drawerRoot(Root) {
       width = _ref.width,
       height = _ref.height,
       isOpen = _ref.isOpen,
+      opened = _ref.opened,
       initialFocusRef = _ref.initialFocusRef,
       focusAfterRef = _ref.focusAfterRef,
       className = _ref.className,
@@ -52,6 +53,7 @@ export var drawerRoot = function drawerRoot(Root) {
       _ref$asModal = _ref.asModal,
       asModal = _ref$asModal === void 0 ? true : _ref$asModal,
       rest = _objectWithoutProperties(_ref, _excluded);
+    var innerIsOpen = Boolean(isOpen || opened);
     var trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef);
     var popupController = usePopupContext();
     var innerRef = useForkRef(trapRef, outerRef);
@@ -62,7 +64,7 @@ export var drawerRoot = function drawerRoot(Root) {
     var innerHeight = height ? getSizeValueFromProp(height) : '100%';
     var _useDrawer = useDrawer({
         id: innerId,
-        isOpen: isOpen,
+        isOpen: innerIsOpen,
         closeOnEsc: closeOnEsc,
         onEscKeyDown: onEscKeyDown,
         onClose: onClose,
@@ -85,7 +87,7 @@ export var drawerRoot = function drawerRoot(Root) {
     return /*#__PURE__*/React.createElement(StyledPopup, _extends({
       id: innerId,
       ref: asModal ? innerRef : outerRef,
-      isOpen: isOpen,
+      opened: innerIsOpen,
       zIndex: zIndex,
       placement: placement,
       popupInfo: drawerInfo,

package/styled-components/es/components/Drawer/Drawer.template-doc.mdx

@@ -33,8 +33,8 @@ Drawer можно использовать как и на всем окне, т
 Также это свойство поддерживает передачу id элемента, в котором будет использоваться компонент.
 Само позиционирование можно указать с помощью свойства `placement`(left - по умолчанию, right, top, bottom),
 а также определить отступы от точки с помощью `offset`.
- 
-У компонента Drawer есть 2 режима отображения: 
+
+У компонента Drawer есть 2 режима отображения:
 - модальный - добавляет при этом подложку(`overlay`), а также блокирует scroll и фокус;
 - немодальный - нет подложки, scroll и фокус не заблокированы.
 
@@ -56,16 +56,16 @@ export function App() {
             <PopupProvider>
                 <div style=\{{height: "500px"}}>
                     <div style=\{{ display: "flex", flexDirection: "column" }}>
-                        <Button 
-                            text="Открыть в document" 
+                        <Button
+                            text="Открыть в document"
                             onClick={() => setIsOpenA(true)}
                             style=\{{
                                 marginTop: "1rem",
                                 width: "15rem"
                             }}
                         />
-                        <Button 
-                            text="Открыть во Frame" 
+                        <Button
+                            text="Открыть во Frame"
                             onClick={() => setIsOpenB(true)}
                             style=\{{
                                 marginTop: "1rem",
@@ -75,7 +75,7 @@ export function App() {
                     </div>
                     <Drawer
                         id="drawerA"
-                        isOpen={isOpenA} 
+                        opened={isOpenA}
                         onClose={() => setIsOpenA(false)}
                         placement="right"
                         withBlur={false}
@@ -103,13 +103,13 @@ export function App() {
                             </DrawerHeader>
 
                             <DrawerContent>Content</DrawerContent>
-                            
+
                             <DrawerFooter>
                                 <H3>Footer</H3>
                             </DrawerFooter>
                         </Drawer>
-                    <div 
-                        ref={ref} 
+                    <div
+                        ref={ref}
                         style=\{{
                             marginTop: "1rem",
                             width: "400px",
@@ -128,10 +128,10 @@ export function App() {
                     >
                         <>Frame</>
                     </div>
-                    
+
                     <Drawer
                         id="drawerB"
-                        isOpen={isOpenB} 
+                        opened={isOpenB}
                         onClose={() => setIsOpenB(false)}
                         placement="right"
                         asModal={false}
@@ -157,7 +157,7 @@ export function App() {
                             </DrawerHeader>
 
                             <DrawerContent>Content</DrawerContent>
-                            
+
                             <DrawerFooter>
                                 <H3>Footer</H3>
                             </DrawerFooter>

package/styled-components/es/components/Dropdown/Dropdown.js

@@ -107,7 +107,7 @@ export var dropdownRoot = function dropdownRoot(Root) {
       return focusedToValueMap === null || focusedToValueMap === void 0 || (_focusedToValueMap$ge = focusedToValueMap.get(focusedPathAsString)) === null || _focusedToValueMap$ge === void 0 ? void 0 : _focusedToValueMap$ge.value.toString();
     };
     return /*#__PURE__*/React.createElement(StyledPopover, {
-      isOpen: isCurrentListOpen,
+      opened: isCurrentListOpen,
       onToggle: handleGlobalToggle,
       offset: offset,
       placement: getPlacements(placement),

package/styled-components/es/components/Dropdown/ui/DropdownInner/DropdownInner.js

@@ -40,7 +40,7 @@ var DropdownInner = function DropdownInner(_ref) {
   var nextLevel = currentLevel + 1;
   if (item !== null && item !== void 0 && item.items) {
     return /*#__PURE__*/React.createElement(StyledPopover, {
-      isOpen: isCurrentListOpen,
+      opened: isCurrentListOpen,
       usePortal: false,
       placement: "right-start",
       trigger: trigger,

package/styled-components/es/components/Dropdown/ui/DropdownOld/DropdownOld.js

@@ -1,4 +1,4 @@
-var _excluded = ["id", "target", "children", "hasArrow", "role", "view", "size", "frame", "onToggle", "isFocusTrapped", "isOpen", "placement", "trigger", "offset", "preventOverflow", "closeOnOverlayClick", "closeOnEsc"];
+var _excluded = ["id", "target", "children", "hasArrow", "role", "view", "size", "frame", "onToggle", "isFocusTrapped", "isOpen", "opened", "placement", "trigger", "offset", "preventOverflow", "closeOnOverlayClick", "closeOnEsc"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -26,6 +26,8 @@ export var dropdownOldRoot = function dropdownOldRoot(Root) {
       isFocusTrapped = _ref$isFocusTrapped === void 0 ? true : _ref$isFocusTrapped,
       _ref$isOpen = _ref.isOpen,
       isOpen = _ref$isOpen === void 0 ? false : _ref$isOpen,
+      _ref$opened = _ref.opened,
+      opened = _ref$opened === void 0 ? false : _ref$opened,
       _ref$placement = _ref.placement,
       placement = _ref$placement === void 0 ? 'auto' : _ref$placement,
       _ref$trigger = _ref.trigger,
@@ -39,16 +41,17 @@ export var dropdownOldRoot = function dropdownOldRoot(Root) {
       _ref$closeOnEsc = _ref.closeOnEsc,
       closeOnEsc = _ref$closeOnEsc === void 0 ? false : _ref$closeOnEsc,
       rest = _objectWithoutProperties(_ref, _excluded);
+    var innerIsOpen = Boolean(isOpen || opened);
     var uniqId = useUniqId();
     var innerId = id || uniqId;
     var rootRef = useRef(null);
     var dropdownRef = useRef(null);
     var handleRef = useForkRef(rootRef, outerRootRef);
-    var trapRef = useFocusTrap(isOpen && isFocusTrapped);
+    var trapRef = useFocusTrap(innerIsOpen && isFocusTrapped);
     var dropdownForkRef = useForkRef(dropdownRef, trapRef);
     return /*#__PURE__*/React.createElement(StyledPopover, {
       role: role,
-      isOpen: isOpen,
+      opened: innerIsOpen,
       usePortal: false,
       onToggle: function onToggle(is, event) {
         return _onToggle === null || _onToggle === void 0 ? void 0 : _onToggle(is, event);

package/styled-components/es/components/Modal/Modal.js

@@ -1,4 +1,4 @@
-var _excluded = ["id", "withAnimation", "onClose", "onOverlayClick", "onEscKeyDown", "closeOnEsc", "closeOnOverlayClick", "withBlur", "initialFocusRef", "focusAfterRef", "zIndex", "popupInfo", "children", "view", "isOpen"];
+var _excluded = ["id", "withAnimation", "onClose", "onOverlayClick", "onEscKeyDown", "closeOnEsc", "closeOnOverlayClick", "withBlur", "initialFocusRef", "focusAfterRef", "zIndex", "popupInfo", "children", "view", "opened", "isOpen"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -39,8 +39,10 @@ export var modalRoot = function modalRoot(Root) {
       popupInfo = _ref.popupInfo,
       children = _ref.children,
       view = _ref.view,
+      opened = _ref.opened,
       isOpen = _ref.isOpen,
       rest = _objectWithoutProperties(_ref, _excluded);
+    var innerIsOpen = Boolean(isOpen || opened);
     var trapRef = useFocusTrap(true, initialFocusRef, focusAfterRef, true);
     var popupController = usePopupContext();
     var innerRef = useForkRef(trapRef, outerRootRef);
@@ -49,7 +51,7 @@ export var modalRoot = function modalRoot(Root) {
     var overlayBackgroundToken = withBlur ? "var(".concat(tokens.modalOverlayWithBlurColor, ")") : "var(".concat(tokens.modalOverlayColor, ")");
     var _useModal = useModal({
         id: innerId,
-        isOpen: isOpen,
+        isOpen: innerIsOpen,
         closeOnEsc: closeOnEsc,
         onEscKeyDown: onEscKeyDown,
         onClose: onClose,
@@ -70,7 +72,7 @@ export var modalRoot = function modalRoot(Root) {
     }, [closeOnOverlayClick, onOverlayClick, onClose]);
     return /*#__PURE__*/React.createElement(Popup, _extends({
       id: innerId,
-      isOpen: isOpen,
+      opened: innerIsOpen,
       ref: innerRef,
       popupInfo: modalInfo,
       withAnimation: withAnimation,

package/styled-components/es/components/Modal/Modal.template-doc.mdx

@@ -33,7 +33,7 @@ export function App() {
                     <Modal
                         id="modalA"
                         onClose={() => setIsOpenA(false)}
-                        isOpen={isOpenA}
+                        opened={isOpenA}
                         placement="center"
                         offset={[0, 0]}
                     >
@@ -45,7 +45,7 @@ export function App() {
                         <Modal
                             id="modalB"
                             onClose={() => setIsOpenB(false)}
-                            isOpen={isOpenB}
+                            opened={isOpenB}
                             placement="right"
                             offset={[0, 0]}
                         >

package/styled-components/es/components/Notification/NotificationsPortal.js

@@ -31,7 +31,7 @@ export var NotificationsPortal = function NotificationsPortal(_ref) {
     return component(config);
   }, []);
   return /*#__PURE__*/React.createElement(PopupProvider, null, notifications.length > 0 && /*#__PURE__*/React.createElement(StyledPopup, {
-    isOpen: true,
+    opened: true,
     frame: frame,
     placement: "bottom-right",
     zIndex: "9100"