@redsift/products 11.5.0 → 11.6.0-muiv5-alpha.0

package/packages/popovers/src/components/dialog-content-body/DialogContentBody.js

@@ -0,0 +1,49 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { useMergeRefs } from '../../../../../node_modules/@floating-ui/react/dist/floating-ui.react.mjs.js';
+import { useBoundingClientRect } from '@redsift/design-system';
+import { StyledDialogContentBody } from './styles.js';
+import { useDialogContext } from '../dialog/useDialogContext.js';
+
+const _excluded = ["children", "className"];
+const COMPONENT_NAME = 'DialogContentBody';
+const CLASSNAME = 'redsift-dialog-content-body';
+
+/**
+ * The DialogContentBody component.
+ */
+const DialogContentBody = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const {
+    actionsRef,
+    bodyRef,
+    hasCloseButton,
+    headerRef,
+    initialFocus
+  } = useDialogContext();
+  const {
+    height: headerHeight = 0
+  } = useBoundingClientRect(headerRef, [children, headerRef]);
+  const {
+    height: actionsHeight = 0
+  } = useBoundingClientRect(actionsRef, [children, actionsRef]);
+
+  /* istanbul ignore next */
+  return /*#__PURE__*/React__default.createElement(StyledDialogContentBody, _extends({}, forwardedProps, {
+    className: classNames(DialogContentBody.className, className),
+    ref: useMergeRefs([ref, bodyRef]),
+    tabIndex: initialFocus === 'body' ? -1 : undefined,
+    $marginTop: Math.max(headerHeight, hasCloseButton ? 40 : 0) + 32,
+    $marginBottom: (actionsHeight === 0 ? 0 : actionsHeight + 16) + 32
+  }), children);
+});
+DialogContentBody.className = CLASSNAME;
+DialogContentBody.displayName = COMPONENT_NAME;
+
+export { DialogContentBody };
+//# sourceMappingURL=DialogContentBody.js.map

package/packages/popovers/src/components/dialog-content-body/DialogContentBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContentBody.js","sources":["../../../../../../../popovers/src/components/dialog-content-body/DialogContentBody.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\nimport { useMergeRefs } from '@floating-ui/react';\n\nimport { Comp, useBoundingClientRect } from '@redsift/design-system';\nimport { StyledDialogContentBody } from './styles';\nimport { DialogContentBodyProps } from './types';\nimport { useDialogContext } from '../dialog';\n\nconst COMPONENT_NAME = 'DialogContentBody';\nconst CLASSNAME = 'redsift-dialog-content-body';\n\n/**\n * The DialogContentBody component.\n */\nexport const DialogContentBody: Comp<DialogContentBodyProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { children, className, ...forwardedProps } = props;\n\n  const { actionsRef, bodyRef, hasCloseButton, headerRef, initialFocus } = useDialogContext();\n\n  const { height: headerHeight = 0 } = useBoundingClientRect(headerRef as any, [children, headerRef]);\n  const { height: actionsHeight = 0 } = useBoundingClientRect(actionsRef as any, [children, actionsRef]);\n\n  /* istanbul ignore next */\n  return (\n    <StyledDialogContentBody\n      {...forwardedProps}\n      className={classNames(DialogContentBody.className, className)}\n      ref={useMergeRefs([ref, bodyRef])}\n      tabIndex={initialFocus === 'body' ? -1 : undefined}\n      $marginTop={Math.max(headerHeight, hasCloseButton ? 40 : 0) + 32}\n      $marginBottom={(actionsHeight === 0 ? 0 : actionsHeight + 16) + 32}\n    >\n      {children}\n    </StyledDialogContentBody>\n  );\n});\nDialogContentBody.className = CLASSNAME;\nDialogContentBody.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","DialogContentBody","forwardRef","props","ref","children","className","forwardedProps","_objectWithoutProperties","_excluded","actionsRef","bodyRef","hasCloseButton","headerRef","initialFocus","useDialogContext","height","headerHeight","useBoundingClientRect","actionsHeight","React","createElement","StyledDialogContentBody","_extends","classNames","useMergeRefs","tabIndex","undefined","$marginTop","Math","max","$marginBottom","displayName"],"mappings":";;;;;;;;;AASA,MAAMA,cAAc,GAAG,mBAAmB,CAAA;AAC1C,MAAMC,SAAS,GAAG,6BAA6B,CAAA;;AAE/C;AACA;AACA;AACO,MAAMC,iBAA+D,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACxG,MAAM;MAAEC,QAAQ;AAAEC,MAAAA,SAAAA;AAA6B,KAAC,GAAGH,KAAK;AAAxBI,IAAAA,cAAc,GAAAC,wBAAA,CAAKL,KAAK,EAAAM,SAAA,CAAA,CAAA;EAExD,MAAM;IAAEC,UAAU;IAAEC,OAAO;IAAEC,cAAc;IAAEC,SAAS;AAAEC,IAAAA,YAAAA;GAAc,GAAGC,gBAAgB,EAAE,CAAA;EAE3F,MAAM;IAAEC,MAAM,EAAEC,YAAY,GAAG,CAAA;GAAG,GAAGC,qBAAqB,CAACL,SAAS,EAAS,CAACR,QAAQ,EAAEQ,SAAS,CAAC,CAAC,CAAA;EACnG,MAAM;IAAEG,MAAM,EAAEG,aAAa,GAAG,CAAA;GAAG,GAAGD,qBAAqB,CAACR,UAAU,EAAS,CAACL,QAAQ,EAAEK,UAAU,CAAC,CAAC,CAAA;;AAEtG;EACA,oBACEU,cAAA,CAAAC,aAAA,CAACC,uBAAuB,EAAAC,QAAA,KAClBhB,cAAc,EAAA;IAClBD,SAAS,EAAEkB,UAAU,CAACvB,iBAAiB,CAACK,SAAS,EAAEA,SAAS,CAAE;IAC9DF,GAAG,EAAEqB,YAAY,CAAC,CAACrB,GAAG,EAAEO,OAAO,CAAC,CAAE;IAClCe,QAAQ,EAAEZ,YAAY,KAAK,MAAM,GAAG,CAAC,CAAC,GAAGa,SAAU;AACnDC,IAAAA,UAAU,EAAEC,IAAI,CAACC,GAAG,CAACb,YAAY,EAAEL,cAAc,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,EAAG;IACjEmB,aAAa,EAAE,CAACZ,aAAa,KAAK,CAAC,GAAG,CAAC,GAAGA,aAAa,GAAG,EAAE,IAAI,EAAA;AAAG,GAAA,CAAA,EAElEd,QACsB,CAAC,CAAA;AAE9B,CAAC,EAAC;AACFJ,iBAAiB,CAACK,SAAS,GAAGN,SAAS,CAAA;AACvCC,iBAAiB,CAAC+B,WAAW,GAAGjC,cAAc;;;;"}

package/packages/popovers/src/components/dialog-content-body/styles.js

@@ -0,0 +1,65 @@
+import styled, { css } from 'styled-components';
+import { baseContainer } from '@redsift/design-system';
+
+/**
+ * Component style.
+ */
+const StyledDialogContentBody = styled.div`
+  ${baseContainer}
+
+  overflow-y: auto;
+  ${_ref => {
+  let {
+    $marginTop,
+    $marginBottom
+  } = _ref;
+  return css`
+    max-height: calc(100vh - ${$marginTop + $marginBottom}px);
+  `;
+}}
+
+  font-family: var(--redsift-typography-body-font-family);
+  font-size: var(--redsift-typography-body-font-size);
+  font-weight: var(--redsift-typography-body-font-weight);
+  line-height: var(--redsift-typography-body-line-height);
+  padding: 0 24px;
+  margin: 16px -24px;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  scrollbar-color: var(--redsift-color-neutral-mid-grey) transparent;
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    block-size: 9px;
+    inline-size: 9px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    background-color: var(--redsift-color-neutral-mid-grey);
+    border-radius: 0px;
+    border-left: 2px solid transparent;
+    border-right: 2px solid transparent;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb:horizontal,
+  &::-webkit-scrollbar-thumb:vertical {
+    &:hover {
+      background-color: var(--redsift-color-neutral-x-dark-grey);
+    }
+  }
+
+  &::-webkit-scrollbar-corner {
+    visibility: hidden;
+  }
+`;
+
+export { StyledDialogContentBody };
+//# sourceMappingURL=styles.js.map

package/packages/popovers/src/components/dialog-content-body/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../popovers/src/components/dialog-content-body/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseContainer } from '@redsift/design-system';\nimport { StyledDialogContentBodyProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledDialogContentBody = styled.div<StyledDialogContentBodyProps>`\n  ${baseContainer}\n\n  overflow-y: auto;\n  ${({ $marginTop, $marginBottom }) => css`\n    max-height: calc(100vh - ${$marginTop + $marginBottom}px);\n  `}\n\n  font-family: var(--redsift-typography-body-font-family);\n  font-size: var(--redsift-typography-body-font-size);\n  font-weight: var(--redsift-typography-body-font-weight);\n  line-height: var(--redsift-typography-body-line-height);\n  padding: 0 24px;\n  margin: 16px -24px;\n\n  &:focus-visible {\n    outline: none;\n  }\n\n  scrollbar-color: var(--redsift-color-neutral-mid-grey) transparent;\n  scrollbar-width: thin;\n\n  &::-webkit-scrollbar {\n    block-size: 9px;\n    inline-size: 9px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-clip: padding-box;\n    background-color: var(--redsift-color-neutral-mid-grey);\n    border-radius: 0px;\n    border-left: 2px solid transparent;\n    border-right: 2px solid transparent;\n  }\n\n  &::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n\n  &::-webkit-scrollbar-thumb:horizontal,\n  &::-webkit-scrollbar-thumb:vertical {\n    &:hover {\n      background-color: var(--redsift-color-neutral-x-dark-grey);\n    }\n  }\n\n  &::-webkit-scrollbar-corner {\n    visibility: hidden;\n  }\n`;\n"],"names":["StyledDialogContentBody","styled","div","baseContainer","_ref","$marginTop","$marginBottom","css"],"mappings":";;;AAIA;AACA;AACA;AACaA,MAAAA,uBAAuB,GAAGC,MAAM,CAACC,GAAkC,CAAA;AAChF,EAAA,EAAIC,aAAc,CAAA;AAClB;AACA;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;IAAEC,UAAU;AAAEC,IAAAA,aAAAA;AAAc,GAAC,GAAAF,IAAA,CAAA;AAAA,EAAA,OAAKG,GAAI,CAAA;AAC3C,6BAA+BF,EAAAA,UAAU,GAAGC,aAAc,CAAA;AAC1D,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/packages/popovers/src/components/dialog-content-header/DialogContentHeader.js

@@ -0,0 +1,86 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { useMergeRefs } from '../../../../../node_modules/@floating-ui/react/dist/floating-ui.react.mjs.js';
+import { useId, Skeleton, Heading, Icon } from '@redsift/design-system';
+import { StyledDialogContentHeader } from './styles.js';
+import { useDialogContext } from '../dialog/useDialogContext.js';
+
+const _excluded = ["children", "className", "header", "headingProps", "icon", "iconProps", "isLoading", "subheader", "theme"];
+const COMPONENT_NAME = 'DialogContentHeader';
+const CLASSNAME = 'redsift-dialog-content-header';
+
+/**
+ * The DialogContentHeader component.
+ */
+const DialogContentHeader = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      header,
+      headingProps,
+      icon,
+      iconProps,
+      isLoading,
+      subheader,
+      theme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const {
+    setLabelId,
+    setDescriptionId,
+    headerRef,
+    initialFocus
+  } = useDialogContext();
+  const [labelId] = useId();
+  const [descriptionId] = useId();
+
+  // Only sets `aria-labelledby` on the Dialog root element
+  // if this component is mounted inside it.
+  React__default.useLayoutEffect(() => {
+    setLabelId(labelId);
+    return () => setLabelId(undefined);
+  }, [labelId, setLabelId]);
+
+  // Only sets `aria-describedby` on the Dialog root element
+  // if this component is mounted inside it.
+  React__default.useLayoutEffect(() => {
+    setDescriptionId(descriptionId);
+    return () => setDescriptionId(undefined);
+  }, [descriptionId, setDescriptionId]);
+  return /*#__PURE__*/React__default.createElement(StyledDialogContentHeader, _extends({}, forwardedProps, {
+    className: classNames(DialogContentHeader.className, className),
+    ref: useMergeRefs([ref, headerRef]),
+    tabIndex: initialFocus === 'header' ? -1 : undefined
+  }), subheader ? /*#__PURE__*/React__default.createElement(Skeleton.Text, {
+    theme: theme,
+    variant: "body",
+    isLoaded: !isLoading
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${DialogContentHeader.className}__subheader`
+  }, subheader)) : null, header ? /*#__PURE__*/React__default.createElement(Skeleton.Text, {
+    theme: theme,
+    variant: (headingProps === null || headingProps === void 0 ? void 0 : headingProps.variant) || 'h2',
+    isLoaded: !isLoading,
+    marginTop: "10px",
+    marginBottom: "10px"
+  }, /*#__PURE__*/React__default.createElement(Heading, _extends({
+    theme: theme,
+    as: "h2",
+    color: "black",
+    className: `${DialogContentHeader.className}__header`,
+    variant: "h2"
+  }, headingProps), icon ? /*#__PURE__*/React__default.createElement(Icon, _extends({
+    theme: theme,
+    icon: icon,
+    "aria-hidden": "true",
+    size: "large"
+  }, iconProps)) : null, header)) : null, children ? /*#__PURE__*/React__default.createElement("div", {
+    id: descriptionId
+  }, children) : null);
+});
+DialogContentHeader.className = CLASSNAME;
+DialogContentHeader.displayName = COMPONENT_NAME;
+
+export { DialogContentHeader };
+//# sourceMappingURL=DialogContentHeader.js.map

package/packages/popovers/src/components/dialog-content-header/DialogContentHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogContentHeader.js","sources":["../../../../../../../popovers/src/components/dialog-content-header/DialogContentHeader.tsx"],"sourcesContent":["import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\nimport { useMergeRefs } from '@floating-ui/react';\n\nimport { Icon, Heading, Comp, useId, Skeleton } from '@redsift/design-system';\nimport { StyledDialogContentHeader } from './styles';\nimport { DialogContentHeaderProps } from './types';\nimport { useDialogContext } from '../dialog';\n\nconst COMPONENT_NAME = 'DialogContentHeader';\nconst CLASSNAME = 'redsift-dialog-content-header';\n\n/**\n * The DialogContentHeader component.\n */\nexport const DialogContentHeader: Comp<DialogContentHeaderProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { children, className, header, headingProps, icon, iconProps, isLoading, subheader, theme, ...forwardedProps } =\n    props;\n\n  const { setLabelId, setDescriptionId, headerRef, initialFocus } = useDialogContext();\n  const [labelId] = useId();\n  const [descriptionId] = useId();\n\n  // Only sets `aria-labelledby` on the Dialog root element\n  // if this component is mounted inside it.\n  React.useLayoutEffect(() => {\n    setLabelId(labelId);\n    return () => setLabelId(undefined);\n  }, [labelId, setLabelId]);\n\n  // Only sets `aria-describedby` on the Dialog root element\n  // if this component is mounted inside it.\n  React.useLayoutEffect(() => {\n    setDescriptionId(descriptionId);\n    return () => setDescriptionId(undefined);\n  }, [descriptionId, setDescriptionId]);\n\n  return (\n    <StyledDialogContentHeader\n      {...forwardedProps}\n      className={classNames(DialogContentHeader.className, className)}\n      ref={useMergeRefs([ref, headerRef])}\n      tabIndex={initialFocus === 'header' ? -1 : undefined}\n    >\n      {subheader ? (\n        <Skeleton.Text theme={theme} variant=\"body\" isLoaded={!isLoading}>\n          <div className={`${DialogContentHeader.className}__subheader`}>{subheader}</div>\n        </Skeleton.Text>\n      ) : null}\n      {header ? (\n        <Skeleton.Text\n          theme={theme}\n          variant={headingProps?.variant || 'h2'}\n          isLoaded={!isLoading}\n          marginTop=\"10px\"\n          marginBottom=\"10px\"\n        >\n          <Heading\n            theme={theme}\n            as=\"h2\"\n            color=\"black\"\n            className={`${DialogContentHeader.className}__header`}\n            variant=\"h2\"\n            {...headingProps}\n          >\n            {icon ? <Icon theme={theme} icon={icon} aria-hidden=\"true\" size=\"large\" {...iconProps} /> : null}\n            {header}\n          </Heading>\n        </Skeleton.Text>\n      ) : null}\n      {children ? <div id={descriptionId}>{children}</div> : null}\n    </StyledDialogContentHeader>\n  );\n});\nDialogContentHeader.className = CLASSNAME;\nDialogContentHeader.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","DialogContentHeader","forwardRef","props","ref","children","className","header","headingProps","icon","iconProps","isLoading","subheader","theme","forwardedProps","_objectWithoutProperties","_excluded","setLabelId","setDescriptionId","headerRef","initialFocus","useDialogContext","labelId","useId","descriptionId","React","useLayoutEffect","undefined","createElement","StyledDialogContentHeader","_extends","classNames","useMergeRefs","tabIndex","Skeleton","Text","variant","isLoaded","marginTop","marginBottom","Heading","as","color","Icon","size","id","displayName"],"mappings":"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"}

package/packages/popovers/src/components/dialog-content-header/styles.js

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+import { baseStyling, baseFlexbox } from '@redsift/design-system';
+
+/**
+ * Component style.
+ */
+const StyledDialogContentHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  ${baseStyling}
+  ${baseFlexbox}
+
+  .redsift-dialog-content-header__header {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+    padding: 10px 0px;
+    margin: 0px;
+  }
+
+  .redsift-dialog-content-header__subheader {
+    font-family: var(--redsift-typography-body-font-family);
+    font-size: var(--redsift-typography-body-font-size);
+    font-weight: var(--redsift-typography-body-font-weight);
+    line-height: var(--redsift-typography-body-line-height);
+  }
+`;
+
+export { StyledDialogContentHeader };
+//# sourceMappingURL=styles.js.map

package/packages/popovers/src/components/dialog-content-header/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../popovers/src/components/dialog-content-header/styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledDialogContentHeaderProps } from './types';\nimport { baseFlexbox, baseStyling } from '@redsift/design-system';\n\n/**\n * Component style.\n */\nexport const StyledDialogContentHeader = styled.div<StyledDialogContentHeaderProps>`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  ${baseStyling}\n  ${baseFlexbox}\n\n  .redsift-dialog-content-header__header {\n    align-items: center;\n    display: flex;\n    gap: 8px;\n    padding: 10px 0px;\n    margin: 0px;\n  }\n\n  .redsift-dialog-content-header__subheader {\n    font-family: var(--redsift-typography-body-font-family);\n    font-size: var(--redsift-typography-body-font-size);\n    font-weight: var(--redsift-typography-body-font-weight);\n    line-height: var(--redsift-typography-body-line-height);\n  }\n`;\n"],"names":["StyledDialogContentHeader","styled","div","baseStyling","baseFlexbox"],"mappings":";;;AAIA;AACA;AACA;AACaA,MAAAA,yBAAyB,GAAGC,MAAM,CAACC,GAAoC,CAAA;AACpF;AACA;AACA;AACA,EAAA,EAAIC,WAAY,CAAA;AAChB,EAAA,EAAIC,WAAY,CAAA;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/packages/popovers/src/components/dialog-trigger/DialogTrigger.js

@@ -0,0 +1,47 @@
+import { objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import { useMergeRefs } from '../../../../../node_modules/@floating-ui/react/dist/floating-ui.react.mjs.js';
+import { isComponent } from '@redsift/design-system';
+import classNames from 'classnames';
+import { useDialogContext } from '../dialog/useDialogContext.js';
+
+const COMPONENT_NAME = 'DialogTrigger';
+const CLASSNAME = 'redsift-dialog-trigger';
+
+/**
+ * The DialogTrigger component.
+ */
+const DialogTrigger = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children
+  } = props;
+  const {
+    getReferenceProps,
+    isOpen,
+    handleOpen,
+    refs,
+    triggerClassName,
+    color
+  } = useDialogContext();
+  const childrenRef = children === null || children === void 0 ? void 0 : children.ref;
+  const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);
+  if (isComponent('Button')(children) || isComponent('IconButton')(children) || isComponent('LinkButton')(children) || isComponent('Checkbox')(children) || isComponent('Switch')(children) || isComponent('Radio')(children) || isComponent('Item')(children)) {
+    var _children$props$child;
+    return /*#__PURE__*/React__default.cloneElement(children, _objectSpread2(_objectSpread2({}, getReferenceProps(_objectSpread2(_objectSpread2(_objectSpread2({
+      ref: triggerRef
+    }, props), children.props), {}, {
+      children: (_children$props$child = children.props.children) !== null && _children$props$child !== void 0 ? _children$props$child : ''
+    }))), {}, {
+      onClick: props.onClick ? props.onClick : () => handleOpen(!isOpen),
+      isActive: isOpen,
+      className: classNames(children.props.className, triggerClassName),
+      color: color !== null && color !== void 0 ? color : children.props.color
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children);
+});
+DialogTrigger.className = CLASSNAME;
+DialogTrigger.displayName = COMPONENT_NAME;
+
+export { DialogTrigger };
+//# sourceMappingURL=DialogTrigger.js.map

package/packages/popovers/src/components/dialog-trigger/DialogTrigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogTrigger.js","sources":["../../../../../../../popovers/src/components/dialog-trigger/DialogTrigger.tsx"],"sourcesContent":["import React, { forwardRef, ReactElement } from 'react';\nimport { useMergeRefs } from '@floating-ui/react';\n\nimport { Comp, isComponent } from '@redsift/design-system';\nimport { useDialogContext } from '../dialog';\nimport { DialogTriggerProps } from './types';\nimport classNames from 'classnames';\n\nconst COMPONENT_NAME = 'DialogTrigger';\nconst CLASSNAME = 'redsift-dialog-trigger';\n\n/**\n * The DialogTrigger component.\n */\nexport const DialogTrigger: Comp<DialogTriggerProps, HTMLButtonElement> = forwardRef((props, ref) => {\n  const { children } = props;\n\n  const { getReferenceProps, isOpen, handleOpen, refs, triggerClassName, color } = useDialogContext();\n  const childrenRef = (children as any)?.ref;\n  const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);\n\n  if (\n    isComponent('Button')(children) ||\n    isComponent('IconButton')(children) ||\n    isComponent('LinkButton')(children) ||\n    isComponent('Checkbox')(children) ||\n    isComponent('Switch')(children) ||\n    isComponent('Radio')(children) ||\n    isComponent('Item')(children)\n  ) {\n    return React.cloneElement(children as ReactElement, {\n      ...getReferenceProps({\n        ref: triggerRef,\n        ...props,\n        ...children.props,\n        children: children.props.children ?? '',\n      }),\n      onClick: props.onClick ? props.onClick : () => handleOpen(!isOpen),\n      isActive: isOpen,\n      className: classNames((children as ReactElement).props.className, triggerClassName),\n      color: color ?? children.props.color,\n    });\n  }\n\n  return <>{children}</>;\n});\nDialogTrigger.className = CLASSNAME;\nDialogTrigger.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","DialogTrigger","forwardRef","props","ref","children","getReferenceProps","isOpen","handleOpen","refs","triggerClassName","color","useDialogContext","childrenRef","triggerRef","useMergeRefs","setReference","isComponent","_children$props$child","React","cloneElement","_objectSpread","onClick","isActive","className","classNames","createElement","Fragment","displayName"],"mappings":";;;;;;;AAQA,MAAMA,cAAc,GAAG,eAAe,CAAA;AACtC,MAAMC,SAAS,GAAG,wBAAwB,CAAA;;AAE1C;AACA;AACA;AACO,MAAMC,aAA0D,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACnG,MAAM;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAGF,KAAK,CAAA;EAE1B,MAAM;IAAEG,iBAAiB;IAAEC,MAAM;IAAEC,UAAU;IAAEC,IAAI;IAAEC,gBAAgB;AAAEC,IAAAA,KAAAA;GAAO,GAAGC,gBAAgB,EAAE,CAAA;EACnG,MAAMC,WAAW,GAAIR,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAARA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,QAAQ,CAAUD,GAAG,CAAA;AAC1C,EAAA,MAAMU,UAAU,GAAGC,YAAY,CAAC,CAACN,IAAI,CAACO,YAAY,EAAEZ,GAAG,EAAES,WAAW,CAAC,CAAC,CAAA;EAEtE,IACEI,WAAW,CAAC,QAAQ,CAAC,CAACZ,QAAQ,CAAC,IAC/BY,WAAW,CAAC,YAAY,CAAC,CAACZ,QAAQ,CAAC,IACnCY,WAAW,CAAC,YAAY,CAAC,CAACZ,QAAQ,CAAC,IACnCY,WAAW,CAAC,UAAU,CAAC,CAACZ,QAAQ,CAAC,IACjCY,WAAW,CAAC,QAAQ,CAAC,CAACZ,QAAQ,CAAC,IAC/BY,WAAW,CAAC,OAAO,CAAC,CAACZ,QAAQ,CAAC,IAC9BY,WAAW,CAAC,MAAM,CAAC,CAACZ,QAAQ,CAAC,EAC7B;AAAA,IAAA,IAAAa,qBAAA,CAAA;AACA,IAAA,oBAAOC,cAAK,CAACC,YAAY,CAACf,QAAQ,EAAAgB,cAAA,CAAAA,cAAA,CAAA,EAAA,EAC7Bf,iBAAiB,CAAAe,cAAA,CAAAA,cAAA,CAAAA,cAAA,CAAA;AAClBjB,MAAAA,GAAG,EAAEU,UAAAA;AAAU,KAAA,EACZX,KAAK,CAAA,EACLE,QAAQ,CAACF,KAAK,CAAA,EAAA,EAAA,EAAA;AACjBE,MAAAA,QAAQ,EAAAa,CAAAA,qBAAA,GAAEb,QAAQ,CAACF,KAAK,CAACE,QAAQ,MAAAa,IAAAA,IAAAA,qBAAA,KAAAA,KAAAA,CAAAA,GAAAA,qBAAA,GAAI,EAAA;AAAE,KAAA,CACxC,CAAC,CAAA,EAAA,EAAA,EAAA;AACFI,MAAAA,OAAO,EAAEnB,KAAK,CAACmB,OAAO,GAAGnB,KAAK,CAACmB,OAAO,GAAG,MAAMd,UAAU,CAAC,CAACD,MAAM,CAAC;AAClEgB,MAAAA,QAAQ,EAAEhB,MAAM;MAChBiB,SAAS,EAAEC,UAAU,CAAEpB,QAAQ,CAAkBF,KAAK,CAACqB,SAAS,EAAEd,gBAAgB,CAAC;MACnFC,KAAK,EAAEA,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,KAAA,CAAA,GAALA,KAAK,GAAIN,QAAQ,CAACF,KAAK,CAACQ,KAAAA;AAAK,KAAA,CACrC,CAAC,CAAA;AACJ,GAAA;EAEA,oBAAOQ,cAAA,CAAAO,aAAA,CAAAP,cAAA,CAAAQ,QAAA,EAAGtB,IAAAA,EAAAA,QAAW,CAAC,CAAA;AACxB,CAAC,EAAC;AACFJ,aAAa,CAACuB,SAAS,GAAGxB,SAAS,CAAA;AACnCC,aAAa,CAAC2B,WAAW,GAAG7B,cAAc;;;;"}

package/popovers/src/components/dialog/types.d.ts

@@ -0,0 +1,50 @@
+import { ReactNode } from 'react';
+import { ButtonColor, Theme, ValueOf } from '@redsift/design-system';
+
+/**
+ * Component variant.
+ */
+declare const DialogSize: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+    readonly xlarge: "xlarge";
+};
+type DialogSize = ValueOf<typeof DialogSize>;
+/**
+ * Component props.
+ */
+interface DialogProps {
+    /** Button color that will be forward to the trigger. */
+    color?: ButtonColor;
+    /** Children. Can only be DialogTrigger and DialogContent. */
+    children: ReactNode;
+    /**
+     * Default open status.
+     * Used for uncontrolled version.
+     */
+    defaultOpen?: boolean;
+    /** Whether the Close icon button is displayed or not. */
+    hasCloseButton?: boolean;
+    /** Which element to initially focus. Can be either a number (tabbable index), a ref to en element, or a shortcut pointing towards a section of the dialog. See the accessibility section in the documentation to know which one to use. */
+    initialFocus?: number | React.MutableRefObject<HTMLElement | null> | 'header' | 'body' | 'actions';
+    /**
+     * Whether the component is opened or not.
+     * Used for controlled version.
+     */
+    isOpen?: boolean;
+    /** Method to handle component change. */
+    onOpen?: (open: boolean) => void;
+    /** Dialog size. */
+    size?: DialogSize | {
+        width?: string;
+        maxWidth?: string;
+        minWidth?: string;
+    };
+    /** Theme. */
+    theme?: Theme;
+    /** Class name to append to the trigger. */
+    triggerClassName?: string;
+}
+
+export { DialogProps, DialogSize };

package/popovers/src/components/dialog-content/types.d.ts

@@ -0,0 +1,12 @@
+import { Theme } from '@redsift/design-system';
+import { ComponentProps } from 'react';
+
+/**
+ * Component props.
+ */
+interface DialogContentProps extends ComponentProps<'div'> {
+    /** Theme. */
+    theme?: Theme;
+}
+
+export { DialogContentProps };

package/popovers/src/components/dialog-content-body/types.d.ts

@@ -0,0 +1,12 @@
+import { ComponentProps } from 'react';
+import { ContainerProps, Theme } from '@redsift/design-system';
+
+/**
+ * Component props.
+ */
+interface DialogContentBodyProps extends ComponentProps<'div'>, ContainerProps {
+    /** Theme. */
+    theme?: Theme;
+}
+
+export { DialogContentBodyProps };

package/popovers/src/components/dialog-content-header/types.d.ts

@@ -0,0 +1,27 @@
+import { ComponentProps } from 'react';
+import { HeadingProps, IconProps, Theme } from '@redsift/design-system';
+
+/**
+ * Component props.
+ */
+interface DialogContentHeaderProps extends ComponentProps<'div'> {
+    /** Header. */
+    header?: string;
+    /** Heading props allowing to override the component rendered by the heading without changing its style. */
+    headingProps?: Pick<HeadingProps, 'as' | 'noWrap' | 'variant'>;
+    /** Subheader */
+    subheader?: string;
+    /**
+     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
+     * Can also be a ReactElement.
+     */
+    icon?: IconProps['icon'];
+    /** Custom props to pass to the Icon component. */
+    iconProps?: Omit<IconProps, 'ref' | 'icon'>;
+    /** Whether the card is loading or not. */
+    isLoading?: boolean;
+    /** Theme. */
+    theme?: Theme;
+}
+
+export { DialogContentHeaderProps };

package/popovers/src/components/dialog-trigger/types.d.ts

@@ -0,0 +1,10 @@
+import { ComponentProps } from 'react';
+import { StylingProps } from '@redsift/design-system';
+
+/**
+ * Component props.
+ */
+interface DialogTriggerProps extends ComponentProps<'button'>, StylingProps {
+}
+
+export { DialogTriggerProps };