@redsift/products 11.2.2 → 11.3.0

package/index.d.ts

@@ -41,7 +41,9 @@ interface DialogProps {
     onOpen?: (open: boolean) => void;
     /** Dialog size. */
     size?: DialogSize | {
-        width: string;
+        width?: string;
+        maxWidth?: string;
+        minWidth?: string;
     };
     /** Theme. */
     theme?: Theme;

package/index.js

@@ -6244,10 +6244,14 @@ const StyledDialogContent$1 = styled.div`
 
   ${_ref2 => {
   let {
-    $width
+    $width,
+    $maxWidth,
+    $minWidth
   } = _ref2;
   return css`
-    width: ${$width};
+    ${$width !== undefined ? `width: ${$width};` : ''}
+    ${$maxWidth !== undefined ? `min-width: ${$maxWidth};` : ''}
+    ${$minWidth !== undefined ? `max-width: ${$minWidth};` : ''}
   `;
 }}
 
@@ -6527,30 +6531,6 @@ DialogContentHeader.displayName = COMPONENT_NAME$4;
 const _excluded$3 = ["children", "className", "style", "theme"];
 const COMPONENT_NAME$3 = 'DialogContent';
 const CLASSNAME$3 = 'redsift-dialog-content';
-const sizeToDimension = size => {
-  if (typeof size !== 'string') {
-    return size;
-  }
-  switch (size) {
-    case DialogSize.small:
-      return {
-        width: '540px'
-      };
-    case DialogSize.large:
-      return {
-        width: '800px'
-      };
-    case DialogSize.xlarge:
-      return {
-        width: '80vw'
-      };
-    case DialogSize.medium:
-    default:
-      return {
-        width: '700px'
-      };
-  }
-};
 
 /**
  * The DialogContent component.
@@ -6573,7 +6553,9 @@ const BaseDialogContent = /*#__PURE__*/forwardRef((props, ref) => {
     handleOpen,
     hasCloseButton,
     initialFocus: propsInitialFocus,
-    size,
+    width,
+    minWidth,
+    maxWidth,
     headerRef,
     bodyRef,
     actionsRef
@@ -6584,9 +6566,6 @@ const BaseDialogContent = /*#__PURE__*/forwardRef((props, ref) => {
     styles
   } = useTransitionStyles(floatingContext);
   const dialogRef = useMergeRefs([refs.setFloating, ref]);
-  const {
-    width
-  } = sizeToDimension(size);
   const format = useMessageFormatter(intlMessages);
   const [[header], [body], [actions]] = partitionComponents(React__default.Children.toArray(children), [isComponent('DialogContentHeader'), isComponent('DialogContentBody'), isComponent('DialogContentActions')]);
   const initialFocus = propsInitialFocus === 'header' ? headerRef : propsInitialFocus === 'body' ? bodyRef : propsInitialFocus === 'actions' ? actionsRef : propsInitialFocus ? propsInitialFocus : undefined;
@@ -6607,7 +6586,9 @@ const BaseDialogContent = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-describedby": descriptionId
   }, getFloatingProps(props), {
     style: _objectSpread2(_objectSpread2({}, styles), style),
-    $width: width
+    $width: width,
+    $minWidth: minWidth,
+    $maxWidth: maxWidth
   }), !header && !body && !actions ? /*#__PURE__*/React__default.createElement(DialogContentBody, null, children) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, header || hasCloseButton ? /*#__PURE__*/React__default.createElement("div", {
     className: `${BaseDialogContent.className}__header`
   }, header, hasCloseButton ? /*#__PURE__*/React__default.createElement(IconButton, {
@@ -6667,6 +6648,30 @@ const DialogTrigger = /*#__PURE__*/forwardRef((props, ref) => {
 DialogTrigger.className = CLASSNAME$2;
 DialogTrigger.displayName = COMPONENT_NAME$2;
 
+const sizeToDimension = size => {
+  if (typeof size !== 'string') {
+    return size;
+  }
+  switch (size) {
+    case DialogSize.small:
+      return {
+        width: '540px'
+      };
+    case DialogSize.large:
+      return {
+        width: '800px'
+      };
+    case DialogSize.xlarge:
+      return {
+        width: '80vw'
+      };
+    case DialogSize.medium:
+    default:
+      return {
+        width: '700px'
+      };
+  }
+};
 function useDialog(_ref) {
   let {
     color,
@@ -6684,6 +6689,11 @@ function useDialog(_ref) {
   const [labelId, setLabelId] = React__default.useState();
   const [descriptionId, setDescriptionId] = React__default.useState();
   const [isOpen, setIsOpen] = useState(propsIsOpen !== null && propsIsOpen !== void 0 ? propsIsOpen : defaultOpen);
+  const {
+    width,
+    minWidth,
+    maxWidth
+  } = sizeToDimension(size);
   useEffect(() => {
     setIsOpen(propsIsOpen !== null && propsIsOpen !== void 0 ? propsIsOpen : defaultOpen);
   }, [propsIsOpen, defaultOpen]);
@@ -6716,12 +6726,14 @@ function useDialog(_ref) {
     setDescriptionId,
     hasCloseButton,
     initialFocus,
-    size,
+    width,
+    minWidth,
+    maxWidth,
     headerRef,
     bodyRef,
     actionsRef,
     triggerClassName
-  }), [color, isOpen, handleOpen, interactions, data, labelId, descriptionId, hasCloseButton, initialFocus, size, headerRef, bodyRef, actionsRef, triggerClassName]);
+  }), [color, isOpen, handleOpen, interactions, data, labelId, descriptionId, hasCloseButton, initialFocus, width, minWidth, maxWidth, headerRef, bodyRef, actionsRef, triggerClassName]);
 }
 
 const COMPONENT_NAME$1 = 'Dialog';