@dreamcommerce/aurora 3.0.0-113 → 3.0.0-115

package/build/esm/packages/aurora/src/components/modal/components/modal/modal.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { slicedToArray as _slicedToArray } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../../../utilities/cn.js';
 import { createPortal } from 'react-dom';
+import { useClickOutside } from '../../../../hooks/use_click_outside.js';
 import { MODAL_VISIBILITY_STATE, MODAL_SLIDE_FADE_DURATION, MODAL_WIDTH_VARIANT } from '../../modal_constants.js';
 import { ModalFooter } from './modal_footer.js';
 import { ModalHeader } from './modal_header.js';
@@ -18,7 +19,9 @@ var Modal = function Modal(_ref) {
     onCloseAction = _ref.onCloseAction,
     header = _ref.header,
     footer = _ref.footer,
-    children = _ref.children;
+    children = _ref.children,
+    _ref$closeOnOutsideCl = _ref.closeOnOutsideClick,
+    closeOnOutsideClick = _ref$closeOnOutsideCl === void 0 ? true : _ref$closeOnOutsideCl;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     visibleClass = _useState2[0],
@@ -30,11 +33,18 @@ var Modal = function Modal(_ref) {
     hideModal = _useModalsContext.hideModal,
     hideAllModals = _useModalsContext.hideAllModals;
   var $modalsManagerContainer = document.querySelector(modalsManagerContainerSelector);
+  var modalRef = /*#__PURE__*/React.createRef();
   var modal = getModal(name);
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     renderModal = _useState4[0],
     setRenderModal = _useState4[1];
+  useClickOutside({
+    refs: [modalRef],
+    callback: function callback() {
+      if (closeOnOutsideClick && (modal === null || modal === void 0 ? void 0 : modal.visibilityState) === MODAL_VISIBILITY_STATE.visible) hideAllModalsOnClose ? hideAllModals(onCloseAction) : hideModal(name, onCloseAction);
+    }
+  });
   useEffect(function () {
     addModal({
       name: name,
@@ -70,6 +80,7 @@ var Modal = function Modal(_ref) {
   };
   if (!$modalsManagerContainer) return null;
   return renderModal ? /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", {
+    ref: modalRef,
     "data-modal-id": name,
     "data-test-id": "modal",
     className: cn(modalVariants({

package/build/esm/packages/aurora/src/components/modal/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_close_icon.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CloseLine } from '../../../../assets/icons/close_line.js';
+import { CloseLineIcon } from '../../../../assets/icons/close_line_icon.js';
 
 var ModalCloseIcon = function ModalCloseIcon(_ref) {
   var onClose = _ref.onClose;
@@ -9,7 +9,7 @@ var ModalCloseIcon = function ModalCloseIcon(_ref) {
       return onClose();
     },
     "data-test-id": "close-modal"
-  }, /*#__PURE__*/React.createElement(CloseLine, null));
+  }, /*#__PURE__*/React.createElement(CloseLineIcon, null));
 };
 
 export { ModalCloseIcon };

package/build/esm/packages/aurora/src/components/modal/components/modals_wrapper.js

@@ -32,7 +32,7 @@ var ModalsWrapper = function ModalsWrapper(_ref) {
     };
   }, [openedModals]);
   return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", null, showWrapper && (/*#__PURE__*/React.createElement("div", {
-    className: "aurora-fixed aurora-flex aurora-items-center aurora-justify-center aurora-top-0 aurora-left-0 aurora-w-full aurora-h-full aurora-z-20 aurora-p-4"
+    className: "aurora-fixed aurora-flex aurora-items-center aurora-justify-center aurora-top-0 aurora-left-0 aurora-w-full aurora-h-full aurora-z-[1000] aurora-p-4"
   }, /*#__PURE__*/React.createElement("div", {
     className: "aurora-absolute aurora-inset-x-0 aurora-inset-y-0 aurora-bg-inverse aurora-z-10 aurora-transition-opacity aurora-duration-300 aurora-animate-modal-backdrop-fade-in ".concat(visibleClass ? 'aurora-opacity-70' : 'aurora-opacity-0', " js__modal-mask")
   }), /*#__PURE__*/React.createElement("div", {

package/build/esm/packages/aurora/src/components/modal/modal_types.d.ts

@@ -25,6 +25,7 @@ export interface IModalNewProps extends React.HTMLAttributes<HTMLDivElement> {
     header?: Pick<IModalHeaderProps, 'text'>;
     footer?: IModalFooterProps;
     children?: React.ReactNode;
+    closeOnOutsideClick?: boolean;
 }
 export interface IModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     text?: string | React.ReactNode;

package/build/esm/packages/aurora/src/components/segmented_control/components/segmented_control_item.js

@@ -16,7 +16,7 @@ var SegmentedControlItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var context = React.useContext(SegmentedControlContext);
   return /*#__PURE__*/React.createElement(Item, _objectSpread2({
     ref: ref,
-    className: cn("[&:not(:last-child)]:after:aurora-content-[''] focus last:aurora-rounded-r-4 first:aurora-rounded-l-4 [&:not(:last-child)]:after:aurora-absolute [&:not(:last-child)]:after:aurora-block [&:not(:last-child)]:after:aurora-w-px [&:not(:last-child)]:after:aurora-bg-active [&:not(:last-child)]:after:aurora--right-px [&:not(:last-child)]:after:aurora-h-3/6\n                aurora-relative aurora-flex aurora-item aurora-basis-full aurora-items-center aurora-justify-center aurora-gap-2 hover:aurora-bg-active aurora-cursor-pointer aurora-transition-[background-color] aurora-duration-300\n                data-[state=on]:aurora-bg data-[state=on]:aurora-font-semibold\n                data-[state=on]:before:aurora-content-[''] data-[state=on]:before:aurora-block data-[state=on]:before:aurora-absolute data-[state=on]:before:aurora--left-px data-[state=on]:before:aurora--right-px data-[state=on]:before:aurora--top-px data-[state=on]:before:aurora--bottom-px data-[state=on]:before:aurora-border-active data-[state=on]:before:aurora-border data-[state=on]:before:aurora-rounded-4 data-[state=on]:before:aurora-z-10\n                [&[data-state=off]>svg]:!aurora-fill-subtle", segmentedControlItemVariants({
+    className: cn("[&:not(:last-child)]:after:aurora-content-[''] focus last:aurora-rounded-r-4 first:aurora-rounded-l-4 [&:not(:last-child)]:after:aurora-absolute [&:not(:last-child)]:after:aurora-block [&:not(:last-child)]:after:aurora-w-px [&:not(:last-child)]:after:aurora-bg-active [&:not(:last-child)]:after:aurora--right-px [&:not(:last-child)]:after:aurora-h-3/6\n                aurora-relative aurora-flex aurora-item aurora-basis-full aurora-items-center aurora-justify-center aurora-gap-2 hover:aurora-bg-active aurora-cursor-pointer aurora-transition-[background-color] aurora-duration-300\n                data-[state=on]:aurora-bg data-[state=on]:aurora-font-semibold\n                data-[state=on]:before:aurora-content-[''] data-[state=on]:before:aurora-block data-[state=on]:before:aurora-absolute data-[state=on]:before:aurora--left-px data-[state=on]:before:aurora--right-px data-[state=on]:before:aurora--top-px data-[state=on]:before:aurora--bottom-px data-[state=on]:before:aurora-border-active data-[state=on]:before:aurora-border-2 data-[state=on]:before:aurora-rounded-4 data-[state=on]:before:aurora-z-10\n                [&[data-state=off]>svg]:!aurora-fill-subtle", segmentedControlItemVariants({
       size: (_context$size = context.size) !== null && _context$size !== void 0 ? _context$size : size,
       variant: (_context$variant = context.variant) !== null && _context$variant !== void 0 ? _context$variant : variant
     }), className)

package/build/esm/packages/aurora/src/components/sidebar/components/sidebar_close_button.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+import { TSidebarCloseButtonProps } from "./sidebar_components_types";
+export declare const SidebarCloseButton: FC<TSidebarCloseButtonProps>;

package/build/esm/packages/aurora/src/components/sidebar/components/sidebar_close_button.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useSidebar } from '../hooks/use_sidebar.js';
+import { CloseLineIcon } from '../../../assets/icons/close_line_icon.js';
+
+var SidebarCloseButton = function SidebarCloseButton(_ref) {
+  var onClose = _ref.onClose;
+  var _useSidebar = useSidebar(),
+    close = _useSidebar.close;
+  return /*#__PURE__*/React.createElement("button", {
+    className: "aurora-p-1 aurora-border-0 aurora-bg-none aurora-cursor-pointer aurora-rounded-4 aurora-bg-transparent hover:aurora-bg-hover",
+    onClick: function onClick() {
+      close();
+      onClose === null || onClose === void 0 ? void 0 : onClose();
+    },
+    "data-test-el": "close-sidebar"
+  }, /*#__PURE__*/React.createElement(CloseLineIcon, null));
+};
+
+export { SidebarCloseButton };
+//# sourceMappingURL=sidebar_close_button.js.map

package/build/{cjs/packages/aurora/src/assets/icons/close_line.js.map → esm/packages/aurora/src/components/sidebar/components/sidebar_close_button.js.map}

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/sidebar/components/sidebar_components_types.d.ts

@@ -14,3 +14,6 @@ export declare type TTemporalSidebar = React.PropsWithoutRef<{
     closeOnOutsideClick?: boolean;
     TriggerButton?: React.ReactNode;
 } & React.HTMLAttributes<HTMLDivElement>>;
+export declare type TSidebarCloseButtonProps = {
+    onClose?: () => void;
+};

package/build/esm/packages/aurora/src/components/tabs/components/tabs_trigger.js

@@ -16,7 +16,7 @@ var TabsTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var context = useContext(TabsContext);
   return /*#__PURE__*/createElement(Trigger, _objectSpread2({
     ref: ref,
-    className: cn("[&:not(:last-child)]:after:aurora-content-[''] focus aurora-rounded-2 [&:not(:last-child)]:after:aurora-absolute [&:not(:last-child)]:after:aurora-block [&:not(:last-child)]:after:aurora-w-px [&:not(:last-child)]:after:aurora-bg-active [&:not(:last-child)]:after:aurora--right-px [&:not(:last-child)]:after:aurora-h-3/6\n                aurora-relative aurora-flex aurora-item aurora-basis-full aurora-items-center aurora-justify-center aurora-gap-2 hover:aurora-bg-active aurora-cursor-pointer aurora-transition-all aurora-duration-300\n                data-[state=active]:aurora-bg data-[state=active]:aurora-font-semibold\n                data-[state=active]:before:aurora-content-[''] data-[state=active]:before:aurora-block data-[state=active]:before:aurora-absolute data-[state=active]:before:aurora--left-px data-[state=active]:before:aurora--right-px data-[state=active]:before:aurora--top-px data-[state=active]:before:aurora--bottom-px data-[state=active]:before:aurora-border-active data-[state=active]:before:aurora-border data-[state=active]:before:aurora-rounded-4 data-[state=active]:before:aurora-z-10", tabsVariants({
+    className: cn("[&:not(:last-child)]:after:aurora-content-[''] focus aurora-rounded-2 [&:not(:last-child)]:after:aurora-absolute [&:not(:last-child)]:after:aurora-block [&:not(:last-child)]:after:aurora-w-px [&:not(:last-child)]:after:aurora-bg-active [&:not(:last-child)]:after:aurora--right-px [&:not(:last-child)]:after:aurora-h-3/6\n                aurora-relative aurora-flex aurora-item aurora-basis-full aurora-items-center aurora-justify-center aurora-gap-2 hover:aurora-bg-active aurora-cursor-pointer aurora-transition-all aurora-duration-300\n                data-[state=active]:aurora-bg data-[state=active]:aurora-font-semibold\n                data-[state=active]:before:aurora-content-[''] data-[state=active]:before:aurora-block data-[state=active]:before:aurora-absolute data-[state=active]:before:aurora--left-px data-[state=active]:before:aurora--right-px data-[state=active]:before:aurora--top-px data-[state=active]:before:aurora--bottom-px data-[state=active]:before:aurora-border-active data-[state=active]:before:aurora-border-2 data-[state=active]:before:aurora-rounded-4 data-[state=active]:before:aurora-z-10", tabsVariants({
       size: (_context$size = context.size) !== null && _context$size !== void 0 ? _context$size : size,
       variant: (_context$variant = context.variant) !== null && _context$variant !== void 0 ? _context$variant : variant
     }), className),

package/build/esm/packages/aurora/src/components/tag/tag.js

@@ -1,7 +1,7 @@
 import { createElement } from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../utilities/cn.js';
-import { CloseLineIcon } from '../../assets/icons/close_icon.js';
+import { CloseLineIcon } from '../../assets/icons/close_line_icon.js';
 import { tagVariants } from './tag_variants.js';
 import classnames from '../../../../../external/classnames/index.js';
 
@@ -31,7 +31,7 @@ var Tag = function Tag(_ref) {
       onDelete === null || onDelete === void 0 ? void 0 : onDelete();
     }
   }, /*#__PURE__*/createElement(CloseLineIcon, {
-    className: classnames("aurora-w-5 aurora-h-5 aurora-fill-subtle hover:aurora-fill", disabled && "aurora-fill-disabled")
+    className: classnames('aurora-w-5 aurora-h-5 aurora-fill-subtle hover:aurora-fill', disabled && 'aurora-fill-disabled')
   }))));
 };
 

package/build/esm/packages/aurora/src/index.d.ts

@@ -17,6 +17,7 @@ export { ActionListPortal } from "./components/action_list/components/action_lis
 export { ActionListSub } from "./components/action_list/components/action_list_sub";
 export { ActionListRadioGroup } from "./components/action_list/components/action_list_radio_group";
 export { ActionListRadioItem } from "./components/action_list/components/action_list_radio_item";
+export { ActionListRadioSubTrigger } from "./components/action_list/components/action_list_radio_sub_trigger";
 export { ActionListTrigger } from "./components/action_list/components/action_list_trigger";
 export { ActionListSubContent } from "./components/action_list/components/action_list_sub_content";
 export { Badge } from './components/badge/badge';
@@ -28,6 +29,7 @@ export { TYPOGRAPHY_TRANSFORM_TYPES, TYPOGRAPHY_COMPONENT_TYPES, TYPOGRAPHY_WEIG
 export { Sidebar } from './components/sidebar/sidebar';
 export { SidebarToggle } from "./components/sidebar/components/sidebar_toggle";
 export { useSidebar } from './components/sidebar/hooks/use_sidebar';
+export { SidebarCloseButton } from "./components/sidebar/components/sidebar_close_button";
 export { SIDEBAR_SIDE, SIDEBAR_VARIANTS } from "./components/sidebar/sidebar_constants";
 export { Divider } from './components/divider/divider';
 export { DIVIDER_VARIANTS, DIVIDER_THICKNESS, DIVIDER_ORIENTATION } from "./components/divider/divider_constants";

package/build/esm/packages/aurora/src/index.js

@@ -40,6 +40,7 @@ export { ActionListPortal } from './components/action_list/components/action_lis
 export { ActionListSub } from './components/action_list/components/action_list_sub.js';
 export { ActionListRadioGroup } from './components/action_list/components/action_list_radio_group.js';
 export { ActionListRadioItem } from './components/action_list/components/action_list_radio_item.js';
+export { ActionListRadioSubTrigger } from './components/action_list/components/action_list_radio_sub_trigger.js';
 export { ActionListTrigger } from './components/action_list/components/action_list_trigger.js';
 export { ActionListSubContent } from './components/action_list/components/action_list_sub_content.js';
 export { BADGE_VARIANTS } from './components/badge/badge_constants.js';
@@ -49,6 +50,7 @@ export { useSidebar } from './components/sidebar/hooks/use_sidebar.js';
 export { useClickOutside } from './hooks/use_click_outside.js';
 export { Sidebar } from './components/sidebar/sidebar.js';
 export { SidebarToggle } from './components/sidebar/components/sidebar_toggle.js';
+export { SidebarCloseButton } from './components/sidebar/components/sidebar_close_button.js';
 export { Tooltip } from './components/tooltip/tooltip.js';
 export { TooltipTrigger } from './components/tooltip/components/tooltip_trigger.js';
 export { TOOLTIP_VARIANT_TYPES } from './components/tooltip/tooltip_constants.js';

package/build/esm/packages/aurora/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}