@redsift/popovers 11.9.4 → 12.0.0-muiv5

package/CONTRIBUTING.md

@@ -62,10 +62,6 @@ The Design System is following a monorepo architecture, providing multiple packa
 
   This package provides ready-to-use implementation of components with a customize style to fit Red Sift's use cases. It is based on all other packages.
 
-- _Deprecated_ `@redsift/design-system-legacy`
-
-  This package contains all components prior to the 6.0.0 version. These components are deprecated and contributing to this package is discouraged since it will be removed in the future.
-
 Please make sure to work inside the correct package when making contribution.
 
 If you need something inside more than one package, do not duplicate the code. Place it inside one package, export it from this package and import it inside the others.
@@ -410,8 +406,8 @@ yarn build:charts
 yarn build:dashboard
 yarn build:design-system
 yarn build:icons
-yarn build:legacy
 yarn build:table
+yarn build:products
 ```
 
 ## Publishing a release

package/_internal/DialogContentActions.js

@@ -1,9 +1,9 @@
-import { a as _objectWithoutProperties, b as _extends } from './_rollupPluginBabelHelpers.js';
+import { _ as _objectSpread2, a as _objectWithoutProperties, b as _extends } from './_rollupPluginBabelHelpers.js';
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import { useMergeRefs } from '@floating-ui/react';
+import { baseContainer, getContainerStylingTransientProps } from '@redsift/design-system';
 import styled from 'styled-components';
-import { baseContainer } from '@redsift/design-system';
 import { u as useDialogContext } from './useDialogContext.js';
 
 /**
@@ -21,7 +21,7 @@ const StyledDialogContentActions = styled.div`
   }
 `;
 
-const _excluded = ["children", "className", "flexDirection"];
+const _excluded = ["children", "className"];
 const COMPONENT_NAME = 'DialogContentActions';
 const CLASSNAME = 'redsift-dialog-content-actions';
 
@@ -29,19 +29,23 @@ const CLASSNAME = 'redsift-dialog-content-actions';
  * The DialogContentActions component.
  */
 const DialogContentActions = /*#__PURE__*/forwardRef((props, ref) => {
+  const propsWithDefaults = _objectSpread2({
+    flexDirection: 'row'
+  }, props);
+  const {
+    transientProps,
+    otherProps
+  } = getContainerStylingTransientProps(propsWithDefaults);
   const {
       children,
-      className,
-      flexDirection = 'row'
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+      className
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded);
   const {
     actionsRef,
     initialFocus
   } = useDialogContext();
-  return /*#__PURE__*/React.createElement(StyledDialogContentActions, _extends({
-    flexDirection: flexDirection
-  }, forwardedProps, {
+  return /*#__PURE__*/React.createElement(StyledDialogContentActions, _extends({}, forwardedProps, transientProps, {
     className: classNames(DialogContentActions.className, className),
     ref: useMergeRefs([ref, actionsRef]),
     tabIndex: initialFocus === 'actions' ? -1 : undefined

package/_internal/DialogContentActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContentActions.js","sources":["../../src/components/dialog-content-actions/styles.ts","../../src/components/dialog-content-actions/DialogContentActions.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { baseContainer } from '@redsift/design-system';\nimport { StyledDialogContentActionsProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledDialogContentActions = styled.div<StyledDialogContentActionsProps>`\n  display: flex;\n  ${baseContainer}\n\n  margin-top: 8px;\n  margin-bottom: 8px;\n\n  &:focus-visible {\n    outline: none;\n  }\n`;\n","import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\nimport { useMergeRefs } from '@floating-ui/react';\n\nimport { Comp } from '@redsift/design-system';\nimport { StyledDialogContentActions } from './styles';\nimport { DialogContentActionsProps } from './types';\nimport { useDialogContext } from '../dialog';\n\nconst COMPONENT_NAME = 'DialogContentActions';\nconst CLASSNAME = 'redsift-dialog-content-actions';\n\n/**\n * The DialogContentActions component.\n */\nexport const DialogContentActions: Comp<DialogContentActionsProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { children, className, flexDirection = 'row', ...forwardedProps } = props;\n\n  const { actionsRef, initialFocus } = useDialogContext();\n\n  return (\n    <StyledDialogContentActions\n      flexDirection={flexDirection}\n      {...forwardedProps}\n      className={classNames(DialogContentActions.className, className)}\n      ref={useMergeRefs([ref, actionsRef])}\n      tabIndex={initialFocus === 'actions' ? -1 : undefined}\n    >\n      {children}\n    </StyledDialogContentActions>\n  );\n});\nDialogContentActions.className = CLASSNAME;\nDialogContentActions.displayName = COMPONENT_NAME;\n"],"names":["StyledDialogContentActions","styled","div","baseContainer","COMPONENT_NAME","CLASSNAME","DialogContentActions","forwardRef","props","ref","children","className","flexDirection","forwardedProps","_objectWithoutProperties","_excluded","actionsRef","initialFocus","useDialogContext","React","createElement","_extends","classNames","useMergeRefs","tabIndex","undefined","displayName"],"mappings":";;;;;;;;AAIA;AACA;AACA;AACO,MAAMA,0BAA0B,GAAGC,MAAM,CAACC,GAAqC,CAAA;AACtF;AACA,EAAA,EAAIC,aAAc,CAAA;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;;ACRD,MAAMC,cAAc,GAAG,sBAAsB,CAAA;AAC7C,MAAMC,SAAS,GAAG,gCAAgC,CAAA;;AAElD;AACA;AACA;AACO,MAAMC,oBAAqE,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC9G,MAAM;MAAEC,QAAQ;MAAEC,SAAS;AAAEC,MAAAA,aAAa,GAAG,KAAA;AAAyB,KAAC,GAAGJ,KAAK;AAAxBK,IAAAA,cAAc,GAAAC,wBAAA,CAAKN,KAAK,EAAAO,SAAA,CAAA,CAAA;EAE/E,MAAM;IAAEC,UAAU;AAAEC,IAAAA,YAAAA;GAAc,GAAGC,gBAAgB,EAAE,CAAA;AAEvD,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAACpB,0BAA0B,EAAAqB,QAAA,CAAA;AACzBT,IAAAA,aAAa,EAAEA,aAAAA;AAAc,GAAA,EACzBC,cAAc,EAAA;IAClBF,SAAS,EAAEW,UAAU,CAAChB,oBAAoB,CAACK,SAAS,EAAEA,SAAS,CAAE;IACjEF,GAAG,EAAEc,YAAY,CAAC,CAACd,GAAG,EAAEO,UAAU,CAAC,CAAE;AACrCQ,IAAAA,QAAQ,EAAEP,YAAY,KAAK,SAAS,GAAG,CAAC,CAAC,GAAGQ,SAAAA;AAAU,GAAA,CAAA,EAErDf,QACyB,CAAC,CAAA;AAEjC,CAAC,EAAC;AACFJ,oBAAoB,CAACK,SAAS,GAAGN,SAAS,CAAA;AAC1CC,oBAAoB,CAACoB,WAAW,GAAGtB,cAAc;;;;"}
+{"version":3,"file":"DialogContentActions.js","sources":["../../src/components/dialog-content-actions/styles.ts","../../src/components/dialog-content-actions/DialogContentActions.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { baseContainer } from '@redsift/design-system';\nimport { StyledDialogContentActionsProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledDialogContentActions = styled.div<StyledDialogContentActionsProps>`\n  display: flex;\n  ${baseContainer}\n\n  margin-top: 8px;\n  margin-bottom: 8px;\n\n  &:focus-visible {\n    outline: none;\n  }\n`;\n","import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\nimport { useMergeRefs } from '@floating-ui/react';\n\nimport { Comp, getContainerStylingTransientProps } from '@redsift/design-system';\nimport { StyledDialogContentActions } from './styles';\nimport { DialogContentActionsProps } from './types';\nimport { useDialogContext } from '../dialog';\n\nconst COMPONENT_NAME = 'DialogContentActions';\nconst CLASSNAME = 'redsift-dialog-content-actions';\n\n/**\n * The DialogContentActions component.\n */\nexport const DialogContentActions: Comp<DialogContentActionsProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const propsWithDefaults = {\n    flexDirection: 'row' as const,\n    ...props,\n  };\n\n  const { transientProps, otherProps } = getContainerStylingTransientProps(propsWithDefaults);\n\n  const { children, className, ...forwardedProps } = otherProps;\n\n  const { actionsRef, initialFocus } = useDialogContext();\n\n  return (\n    <StyledDialogContentActions\n      {...forwardedProps}\n      {...transientProps}\n      className={classNames(DialogContentActions.className, className)}\n      ref={useMergeRefs([ref, actionsRef])}\n      tabIndex={initialFocus === 'actions' ? -1 : undefined}\n    >\n      {children}\n    </StyledDialogContentActions>\n  );\n});\nDialogContentActions.className = CLASSNAME;\nDialogContentActions.displayName = COMPONENT_NAME;\n"],"names":["StyledDialogContentActions","styled","div","baseContainer","COMPONENT_NAME","CLASSNAME","DialogContentActions","forwardRef","props","ref","propsWithDefaults","_objectSpread","flexDirection","transientProps","otherProps","getContainerStylingTransientProps","children","className","forwardedProps","_objectWithoutProperties","_excluded","actionsRef","initialFocus","useDialogContext","React","createElement","_extends","classNames","useMergeRefs","tabIndex","undefined","displayName"],"mappings":";;;;;;;;AAIA;AACA;AACA;AACO,MAAMA,0BAA0B,GAAGC,MAAM,CAACC,GAAqC,CAAA;AACtF;AACA,EAAA,EAAIC,aAAc,CAAA;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;;ACRD,MAAMC,cAAc,GAAG,sBAAsB,CAAA;AAC7C,MAAMC,SAAS,GAAG,gCAAgC,CAAA;;AAElD;AACA;AACA;AACO,MAAMC,oBAAqE,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC9G,MAAMC,iBAAiB,GAAAC,cAAA,CAAA;AACrBC,IAAAA,aAAa,EAAE,KAAA;AAAc,GAAA,EAC1BJ,KAAK,CACT,CAAA;EAED,MAAM;IAAEK,cAAc;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGC,iCAAiC,CAACL,iBAAiB,CAAC,CAAA;EAE3F,MAAM;MAAEM,QAAQ;AAAEC,MAAAA,SAAAA;AAA6B,KAAC,GAAGH,UAAU;AAA7BI,IAAAA,cAAc,GAAAC,wBAAA,CAAKL,UAAU,EAAAM,SAAA,CAAA,CAAA;EAE7D,MAAM;IAAEC,UAAU;AAAEC,IAAAA,YAAAA;GAAc,GAAGC,gBAAgB,EAAE,CAAA;EAEvD,oBACEC,KAAA,CAAAC,aAAA,CAACzB,0BAA0B,EAAA0B,QAAA,CAAA,EAAA,EACrBR,cAAc,EACdL,cAAc,EAAA;IAClBI,SAAS,EAAEU,UAAU,CAACrB,oBAAoB,CAACW,SAAS,EAAEA,SAAS,CAAE;IACjER,GAAG,EAAEmB,YAAY,CAAC,CAACnB,GAAG,EAAEY,UAAU,CAAC,CAAE;AACrCQ,IAAAA,QAAQ,EAAEP,YAAY,KAAK,SAAS,GAAG,CAAC,CAAC,GAAGQ,SAAAA;AAAU,GAAA,CAAA,EAErDd,QACyB,CAAC,CAAA;AAEjC,CAAC,EAAC;AACFV,oBAAoB,CAACW,SAAS,GAAGZ,SAAS,CAAA;AAC1CC,oBAAoB,CAACyB,WAAW,GAAG3B,cAAc;;;;"}

package/_internal/DialogContentBody.js

@@ -2,8 +2,8 @@ import { a as _objectWithoutProperties, b as _extends } from './_rollupPluginBab
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import { useMergeRefs } from '@floating-ui/react';
-import { baseContainer, useBoundingClientRect } from '@redsift/design-system';
-import styled, { css } from 'styled-components';
+import { baseContainer, getContainerStylingTransientProps, useBoundingClientRect } from '@redsift/design-system';
+import styled from 'styled-components';
 import { u as useDialogContext } from './useDialogContext.js';
 
 /**
@@ -13,15 +13,12 @@ const StyledDialogContentBody = styled.div`
   ${baseContainer}
 
   overflow-y: auto;
-  ${_ref => {
+  max-height: ${_ref => {
   let {
-    $marginTop,
-    $marginBottom
+    $maxHeight
   } = _ref;
-  return css`
-    max-height: calc(100vh - ${$marginTop + $marginBottom}px);
-  `;
-}}
+  return $maxHeight;
+}};
 
   font-family: var(--redsift-typography-body-font-family);
   font-size: var(--redsift-typography-body-font-size);
@@ -74,11 +71,15 @@ const CLASSNAME = 'redsift-dialog-content-body';
  * The DialogContentBody component.
  */
 const DialogContentBody = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    transientProps,
+    otherProps
+  } = getContainerStylingTransientProps(props);
   const {
       children,
       className
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded);
   const {
     actionsRef,
     bodyRef,
@@ -94,12 +95,16 @@ const DialogContentBody = /*#__PURE__*/forwardRef((props, ref) => {
   } = useBoundingClientRect(actionsRef, [children, actionsRef]);
 
   /* istanbul ignore next */
-  return /*#__PURE__*/React.createElement(StyledDialogContentBody, _extends({}, forwardedProps, {
+  const marginTop = Math.max(headerHeight, hasCloseButton ? 40 : 0) + 32;
+  const marginBottom = (actionsHeight === 0 ? 0 : actionsHeight + 16) + 32;
+  const maxHeight = `calc(100vh - ${marginTop + marginBottom}px)`;
+  return /*#__PURE__*/React.createElement(StyledDialogContentBody, _extends({}, forwardedProps, transientProps, {
     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
+    $marginTop: `${marginTop}px`,
+    $marginBottom: `${marginBottom}px`,
+    $maxHeight: maxHeight
   }), children);
 });
 DialogContentBody.className = CLASSNAME;

package/_internal/DialogContentBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContentBody.js","sources":["../../src/components/dialog-content-body/styles.ts","../../src/components/dialog-content-body/DialogContentBody.tsx"],"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","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":["StyledDialogContentBody","styled","div","baseContainer","_ref","$marginTop","$marginBottom","css","COMPONENT_NAME","CLASSNAME","DialogContentBody","forwardRef","props","ref","children","className","forwardedProps","_objectWithoutProperties","_excluded","actionsRef","bodyRef","hasCloseButton","headerRef","initialFocus","useDialogContext","height","headerHeight","useBoundingClientRect","actionsHeight","React","createElement","_extends","classNames","useMergeRefs","tabIndex","undefined","Math","max","displayName"],"mappings":";;;;;;;;AAIA;AACA;AACA;AACO,MAAMA,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,CAAC;;;AC/CD,MAAME,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,KAAA,CAAAC,aAAA,CAAC9B,uBAAuB,EAAA+B,QAAA,KAClBf,cAAc,EAAA;IAClBD,SAAS,EAAEiB,UAAU,CAACtB,iBAAiB,CAACK,SAAS,EAAEA,SAAS,CAAE;IAC9DF,GAAG,EAAEoB,YAAY,CAAC,CAACpB,GAAG,EAAEO,OAAO,CAAC,CAAE;IAClCc,QAAQ,EAAEX,YAAY,KAAK,MAAM,GAAG,CAAC,CAAC,GAAGY,SAAU;AACnD9B,IAAAA,UAAU,EAAE+B,IAAI,CAACC,GAAG,CAACX,YAAY,EAAEL,cAAc,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,EAAG;IACjEf,aAAa,EAAE,CAACsB,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,CAAC4B,WAAW,GAAG9B,cAAc;;;;"}
+{"version":3,"file":"DialogContentBody.js","sources":["../../src/components/dialog-content-body/styles.ts","../../src/components/dialog-content-body/DialogContentBody.tsx"],"sourcesContent":["import styled 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  max-height: ${({ $maxHeight }) => $maxHeight};\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","import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\nimport { useMergeRefs } from '@floating-ui/react';\n\nimport { Comp, getContainerStylingTransientProps, 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 { transientProps, otherProps } = getContainerStylingTransientProps(props);\n\n  const { children, className, ...forwardedProps } = otherProps;\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  const marginTop = Math.max(headerHeight, hasCloseButton ? 40 : 0) + 32;\n  const marginBottom = (actionsHeight === 0 ? 0 : actionsHeight + 16) + 32;\n  const maxHeight = `calc(100vh - ${marginTop + marginBottom}px)`;\n\n  return (\n    <StyledDialogContentBody\n      {...forwardedProps}\n      {...transientProps}\n      className={classNames(DialogContentBody.className, className)}\n      ref={useMergeRefs([ref, bodyRef])}\n      tabIndex={initialFocus === 'body' ? -1 : undefined}\n      $marginTop={`${marginTop}px`}\n      $marginBottom={`${marginBottom}px`}\n      $maxHeight={maxHeight}\n    >\n      {children}\n    </StyledDialogContentBody>\n  );\n});\nDialogContentBody.className = CLASSNAME;\nDialogContentBody.displayName = COMPONENT_NAME;\n"],"names":["StyledDialogContentBody","styled","div","baseContainer","_ref","$maxHeight","COMPONENT_NAME","CLASSNAME","DialogContentBody","forwardRef","props","ref","transientProps","otherProps","getContainerStylingTransientProps","children","className","forwardedProps","_objectWithoutProperties","_excluded","actionsRef","bodyRef","hasCloseButton","headerRef","initialFocus","useDialogContext","height","headerHeight","useBoundingClientRect","actionsHeight","marginTop","Math","max","marginBottom","maxHeight","React","createElement","_extends","classNames","useMergeRefs","tabIndex","undefined","$marginTop","$marginBottom","displayName"],"mappings":";;;;;;;;AAIA;AACA;AACA;AACO,MAAMA,uBAAuB,GAAGC,MAAM,CAACC,GAAkC,CAAA;AAChF,EAAA,EAAIC,aAAc,CAAA;AAClB;AACA;AACA,cAAA,EAAgBC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAKC,UAAU,CAAA;AAAA,CAAC,CAAA;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;;;AC7CD,MAAMC,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;IAAEC,cAAc;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGC,iCAAiC,CAACJ,KAAK,CAAC,CAAA;EAE/E,MAAM;MAAEK,QAAQ;AAAEC,MAAAA,SAAAA;AAA6B,KAAC,GAAGH,UAAU;AAA7BI,IAAAA,cAAc,GAAAC,wBAAA,CAAKL,UAAU,EAAAM,SAAA,CAAA,CAAA;EAE7D,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;AACA,EAAA,MAAMU,SAAS,GAAGC,IAAI,CAACC,GAAG,CAACL,YAAY,EAAEL,cAAc,GAAG,EAAE,GAAG,CAAC,CAAC,GAAG,EAAE,CAAA;AACtE,EAAA,MAAMW,YAAY,GAAG,CAACJ,aAAa,KAAK,CAAC,GAAG,CAAC,GAAGA,aAAa,GAAG,EAAE,IAAI,EAAE,CAAA;AACxE,EAAA,MAAMK,SAAS,GAAI,CAAA,aAAA,EAAeJ,SAAS,GAAGG,YAAa,CAAI,GAAA,CAAA,CAAA;EAE/D,oBACEE,KAAA,CAAAC,aAAA,CAACpC,uBAAuB,EAAAqC,QAAA,CAAA,EAAA,EAClBpB,cAAc,EACdL,cAAc,EAAA;IAClBI,SAAS,EAAEsB,UAAU,CAAC9B,iBAAiB,CAACQ,SAAS,EAAEA,SAAS,CAAE;IAC9DL,GAAG,EAAE4B,YAAY,CAAC,CAAC5B,GAAG,EAAEU,OAAO,CAAC,CAAE;IAClCmB,QAAQ,EAAEhB,YAAY,KAAK,MAAM,GAAG,CAAC,CAAC,GAAGiB,SAAU;IACnDC,UAAU,EAAG,CAAEZ,EAAAA,SAAU,CAAI,EAAA,CAAA;IAC7Ba,aAAa,EAAG,CAAEV,EAAAA,YAAa,CAAI,EAAA,CAAA;AACnC5B,IAAAA,UAAU,EAAE6B,SAAAA;AAAU,GAAA,CAAA,EAErBnB,QACsB,CAAC,CAAA;AAE9B,CAAC,EAAC;AACFP,iBAAiB,CAACQ,SAAS,GAAGT,SAAS,CAAA;AACvCC,iBAAiB,CAACoC,WAAW,GAAGtC,cAAc;;;;"}

package/_internal/DialogContentHeader.js

@@ -1,8 +1,8 @@
-import { a as _objectWithoutProperties, b as _extends } from './_rollupPluginBabelHelpers.js';
+import { _ as _objectSpread2, a as _objectWithoutProperties, b as _extends } from './_rollupPluginBabelHelpers.js';
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import { useMergeRefs } from '@floating-ui/react';
-import { baseStyling, baseFlexbox, useId, Skeleton, Heading, Icon } from '@redsift/design-system';
+import { baseStyling, baseFlexbox, getStylingTransientProps, getFlexLayoutTransientProps, useId, Skeleton, Heading, Icon } from '@redsift/design-system';
 import styled from 'styled-components';
 import { u as useDialogContext } from './useDialogContext.js';
 
@@ -40,6 +40,18 @@ const CLASSNAME = 'redsift-dialog-content-header';
  * The DialogContentHeader component.
  */
 const DialogContentHeader = /*#__PURE__*/forwardRef((props, ref) => {
+  const propsWithDefaults = _objectSpread2({
+    flexDirection: 'column'
+  }, props);
+  const {
+    transientProps: stylingTransientProps,
+    otherProps: propsWithoutStyling
+  } = getStylingTransientProps(propsWithDefaults);
+  const {
+    transientProps: flexTransientProps,
+    otherProps
+  } = getFlexLayoutTransientProps(propsWithoutStyling);
+  const transientProps = _objectSpread2(_objectSpread2({}, stylingTransientProps), flexTransientProps);
   const {
       children,
       className,
@@ -50,8 +62,8 @@ const DialogContentHeader = /*#__PURE__*/forwardRef((props, ref) => {
       isLoading,
       subheader,
       theme
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded);
   const {
     setLabelId,
     setDescriptionId,
@@ -74,7 +86,7 @@ const DialogContentHeader = /*#__PURE__*/forwardRef((props, ref) => {
     setDescriptionId(descriptionId);
     return () => setDescriptionId(undefined);
   }, [descriptionId, setDescriptionId]);
-  return /*#__PURE__*/React.createElement(StyledDialogContentHeader, _extends({}, forwardedProps, {
+  return /*#__PURE__*/React.createElement(StyledDialogContentHeader, _extends({}, forwardedProps, transientProps, {
     className: classNames(DialogContentHeader.className, className),
     ref: useMergeRefs([ref, headerRef]),
     tabIndex: initialFocus === 'header' ? -1 : undefined

package/_internal/DialogContentHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContentHeader.js","sources":["../../src/components/dialog-content-header/styles.ts","../../src/components/dialog-content-header/DialogContentHeader.tsx"],"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","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":["StyledDialogContentHeader","styled","div","baseStyling","baseFlexbox","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","_extends","classNames","useMergeRefs","tabIndex","Skeleton","Text","variant","isLoaded","marginTop","marginBottom","Heading","as","color","Icon","size","id","displayName"],"mappings":";;;;;;;;AAIA;AACA;AACA;AACO,MAAMA,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,CAAC;;;ACnBD,MAAMC,cAAc,GAAG,qBAAqB,CAAA;AAC5C,MAAMC,SAAS,GAAG,+BAA+B,CAAA;;AAEjD;AACA;AACA;AACO,MAAMC,mBAAmE,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC5G,MAAM;MAAEC,QAAQ;MAAEC,SAAS;MAAEC,MAAM;MAAEC,YAAY;MAAEC,IAAI;MAAEC,SAAS;MAAEC,SAAS;MAAEC,SAAS;AAAEC,MAAAA,KAAAA;AAAyB,KAAC,GAClHV,KAAK;AAD6FW,IAAAA,cAAc,GAAAC,wBAAA,CAChHZ,KAAK,EAAAa,SAAA,CAAA,CAAA;EAEP,MAAM;IAAEC,UAAU;IAAEC,gBAAgB;IAAEC,SAAS;AAAEC,IAAAA,YAAAA;GAAc,GAAGC,gBAAgB,EAAE,CAAA;AACpF,EAAA,MAAM,CAACC,OAAO,CAAC,GAAGC,KAAK,EAAE,CAAA;AACzB,EAAA,MAAM,CAACC,aAAa,CAAC,GAAGD,KAAK,EAAE,CAAA;;AAE/B;AACA;EACAE,KAAK,CAACC,eAAe,CAAC,MAAM;IAC1BT,UAAU,CAACK,OAAO,CAAC,CAAA;AACnB,IAAA,OAAO,MAAML,UAAU,CAACU,SAAS,CAAC,CAAA;AACpC,GAAC,EAAE,CAACL,OAAO,EAAEL,UAAU,CAAC,CAAC,CAAA;;AAEzB;AACA;EACAQ,KAAK,CAACC,eAAe,CAAC,MAAM;IAC1BR,gBAAgB,CAACM,aAAa,CAAC,CAAA;AAC/B,IAAA,OAAO,MAAMN,gBAAgB,CAACS,SAAS,CAAC,CAAA;AAC1C,GAAC,EAAE,CAACH,aAAa,EAAEN,gBAAgB,CAAC,CAAC,CAAA;EAErC,oBACEO,KAAA,CAAAG,aAAA,CAAClC,yBAAyB,EAAAmC,QAAA,KACpBf,cAAc,EAAA;IAClBR,SAAS,EAAEwB,UAAU,CAAC7B,mBAAmB,CAACK,SAAS,EAAEA,SAAS,CAAE;IAChEF,GAAG,EAAE2B,YAAY,CAAC,CAAC3B,GAAG,EAAEe,SAAS,CAAC,CAAE;AACpCa,IAAAA,QAAQ,EAAEZ,YAAY,KAAK,QAAQ,GAAG,CAAC,CAAC,GAAGO,SAAAA;GAE1Cf,CAAAA,EAAAA,SAAS,gBACRa,KAAA,CAAAG,aAAA,CAACK,QAAQ,CAACC,IAAI,EAAA;AAACrB,IAAAA,KAAK,EAAEA,KAAM;AAACsB,IAAAA,OAAO,EAAC,MAAM;AAACC,IAAAA,QAAQ,EAAE,CAACzB,SAAAA;GACrDc,eAAAA,KAAA,CAAAG,aAAA,CAAA,KAAA,EAAA;AAAKtB,IAAAA,SAAS,EAAG,CAAA,EAAEL,mBAAmB,CAACK,SAAU,CAAA,WAAA,CAAA;AAAa,GAAA,EAAEM,SAAe,CAClE,CAAC,GACd,IAAI,EACPL,MAAM,gBACLkB,KAAA,CAAAG,aAAA,CAACK,QAAQ,CAACC,IAAI,EAAA;AACZrB,IAAAA,KAAK,EAAEA,KAAM;IACbsB,OAAO,EAAE,CAAA3B,YAAY,KAAZA,IAAAA,IAAAA,YAAY,uBAAZA,YAAY,CAAE2B,OAAO,KAAI,IAAK;IACvCC,QAAQ,EAAE,CAACzB,SAAU;AACrB0B,IAAAA,SAAS,EAAC,MAAM;AAChBC,IAAAA,YAAY,EAAC,MAAA;AAAM,GAAA,eAEnBb,KAAA,CAAAG,aAAA,CAACW,OAAO,EAAAV,QAAA,CAAA;AACNhB,IAAAA,KAAK,EAAEA,KAAM;AACb2B,IAAAA,EAAE,EAAC,IAAI;AACPC,IAAAA,KAAK,EAAC,OAAO;AACbnC,IAAAA,SAAS,EAAG,CAAA,EAAEL,mBAAmB,CAACK,SAAU,CAAU,QAAA,CAAA;AACtD6B,IAAAA,OAAO,EAAC,IAAA;GACJ3B,EAAAA,YAAY,CAEfC,EAAAA,IAAI,gBAAGgB,KAAA,CAAAG,aAAA,CAACc,IAAI,EAAAb,QAAA,CAAA;AAAChB,IAAAA,KAAK,EAAEA,KAAM;AAACJ,IAAAA,IAAI,EAAEA,IAAK;AAAC,IAAA,aAAA,EAAY,MAAM;AAACkC,IAAAA,IAAI,EAAC,OAAA;AAAO,GAAA,EAAKjC,SAAS,CAAG,CAAC,GAAG,IAAI,EAC/FH,MACM,CACI,CAAC,GACd,IAAI,EACPF,QAAQ,gBAAGoB,KAAA,CAAAG,aAAA,CAAA,KAAA,EAAA;AAAKgB,IAAAA,EAAE,EAAEpB,aAAAA;AAAc,GAAA,EAAEnB,QAAc,CAAC,GAAG,IAC9B,CAAC,CAAA;AAEhC,CAAC,EAAC;AACFJ,mBAAmB,CAACK,SAAS,GAAGN,SAAS,CAAA;AACzCC,mBAAmB,CAAC4C,WAAW,GAAG9C,cAAc;;;;"}
+{"version":3,"file":"DialogContentHeader.js","sources":["../../src/components/dialog-content-header/styles.ts","../../src/components/dialog-content-header/DialogContentHeader.tsx"],"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","import React, { forwardRef } from 'react';\nimport classNames from 'classnames';\nimport { useMergeRefs } from '@floating-ui/react';\n\nimport {\n  Icon,\n  Heading,\n  Comp,\n  getStylingTransientProps,\n  getFlexLayoutTransientProps,\n  useId,\n  Skeleton,\n} 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 propsWithDefaults = {\n    flexDirection: 'column' as const,\n    ...props,\n  };\n  const { transientProps: stylingTransientProps, otherProps: propsWithoutStyling } =\n    getStylingTransientProps(propsWithDefaults);\n  const { transientProps: flexTransientProps, otherProps } = getFlexLayoutTransientProps(propsWithoutStyling);\n  const transientProps = { ...stylingTransientProps, ...flexTransientProps };\n\n  const { children, className, header, headingProps, icon, iconProps, isLoading, subheader, theme, ...forwardedProps } =\n    otherProps;\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      {...transientProps}\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":["StyledDialogContentHeader","styled","div","baseStyling","baseFlexbox","COMPONENT_NAME","CLASSNAME","DialogContentHeader","forwardRef","props","ref","propsWithDefaults","_objectSpread","flexDirection","transientProps","stylingTransientProps","otherProps","propsWithoutStyling","getStylingTransientProps","flexTransientProps","getFlexLayoutTransientProps","children","className","header","headingProps","icon","iconProps","isLoading","subheader","theme","forwardedProps","_objectWithoutProperties","_excluded","setLabelId","setDescriptionId","headerRef","initialFocus","useDialogContext","labelId","useId","descriptionId","React","useLayoutEffect","undefined","createElement","_extends","classNames","useMergeRefs","tabIndex","Skeleton","Text","variant","isLoaded","marginTop","marginBottom","Heading","as","color","Icon","size","id","displayName"],"mappings":"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"}

package/_internal/Toast2.js

@@ -1,7 +1,7 @@
 import { a as _objectWithoutProperties, b as _extends } from './_rollupPluginBabelHelpers.js';
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
-import { baseStyling, useTheme, useMessageFormatter, Flexbox, Text, RedsiftTypographyFontWeightSemiBold, IconButton, isComponent, Spinner, Icon, NotificationsColorPalette } from '@redsift/design-system';
+import { baseStyling, getStylingTransientProps, useTheme, useMessageFormatter, Flexbox, Text, RedsiftTypographyFontWeightSemiBold, IconButton, isComponent, Spinner, Icon, NotificationsColorPalette } from '@redsift/design-system';
 import { mdiClose, mdiAlert, mdiCheckCircle, mdiAlertCircle, mdiInformation } from '@redsift/icons';
 import styled, { css } from 'styled-components';
 
@@ -87,7 +87,7 @@ const StyledToast = styled.div`
 }}
 `;
 
-const _excluded = ["children", "className", "closeButton", "closeToast", "theme", "title", "variant"];
+const _excluded = ["children", "className", "closeButton", "closeToast", "theme", "title", "variant", "toastProps"];
 const COMPONENT_NAME = 'Toast';
 const CLASSNAME = 'redsift-toast';
 const getVariant = variant => {
@@ -124,6 +124,10 @@ const getVariant = variant => {
  * The Toast component.
  */
 const Toast = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    transientProps,
+    otherProps
+  } = getStylingTransientProps(props);
   const {
       children,
       className,
@@ -131,13 +135,15 @@ const Toast = /*#__PURE__*/forwardRef((props, ref) => {
       closeToast,
       theme: propsTheme,
       title,
-      variant = 'info'
-    } = props,
-    forwardedProps = _objectWithoutProperties(props, _excluded);
+      variant = 'info',
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      toastProps
+    } = otherProps,
+    forwardedProps = _objectWithoutProperties(otherProps, _excluded);
   const theme = useTheme(propsTheme);
   const format = useMessageFormatter(intlMessages);
   const icon = getVariant(variant);
-  return /*#__PURE__*/React.createElement(StyledToast, _extends({}, forwardedProps, {
+  return /*#__PURE__*/React.createElement(StyledToast, _extends({}, forwardedProps, transientProps, {
     className: classNames(Toast.className, className),
     ref: ref,
     $hasTitle: Boolean(title),

package/_internal/Toast2.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast2.js","sources":["../../src/components/toast/types.ts","../../src/components/toast/intl/index.ts","../../src/components/toast/styles.ts","../../src/components/toast/Toast.tsx"],"sourcesContent":["import { ComponentProps, ReactNode } from 'react';\nimport { ValueOf, SizingProps, SpacingProps, Theme } from '@redsift/design-system';\n\n/**\n * Component variant.\n */\nexport const ToastVariant = {\n  success: 'success',\n  error: 'error',\n  warning: 'warning',\n  info: 'info',\n  loading: 'loading',\n} as const;\nexport type ToastVariant = ValueOf<typeof ToastVariant>;\n\nexport const ToastPlacement = {\n  'top-right': 'top-right',\n  'top-center': 'top-center',\n  'top-left': 'top-left',\n  'bottom-right': 'bottom-right',\n  'bottom-center': 'bottom-center',\n  'bottom-left': 'bottom-left',\n} as const;\nexport type ToastPlacement = ValueOf<typeof ToastPlacement>;\n\n/**\n * Component props.\n */\nexport interface ToastProps extends Omit<ComponentProps<'div'>, 'id' | 'style'>, SpacingProps, SizingProps {\n  /** Whether the component has a close button or not. */\n  closeButton?: boolean | ReactNode;\n  /** Title. */\n  title?: string;\n  /** Theme. */\n  theme?: Theme;\n  /** Variant */\n  variant?: ToastVariant;\n}\n\nexport type StyledToastProps = Omit<ToastProps, 'variant' | 'id'> & {\n  $hasTitle: boolean;\n  $variant: ToastProps['variant'];\n  $theme: Theme;\n};\n","import enUS from './en-US.json';\nimport frFR from './fr-FR.json';\n\nexport default {\n  'en-US': enUS,\n  'fr-FR': frFR,\n};\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '@redsift/design-system';\nimport { StyledToastProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledToast = styled.div<StyledToastProps>`\n  ${baseStyling}\n\n  color: var(--redsift-color-neutral-x-dark-grey);\n\n  padding: 16px;\n  box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px rgb(0 0 0 / 14%), 0px 1px 10px rgb(0 0 0 / 12%);\n\n  ${({ $hasTitle, $variant }) => css`\n    background-color: ${$variant === 'loading'\n      ? 'var(--redsift-color-neutral-white)'\n      : `var(--redsift-color-notifications-${$variant}-hover)`};\n\n    .redsift-toast-header__icon-button {\n      background-color: transparent;\n      padding: 0px;\n      .redsift-icon {\n        color: var(--redsift-color-neutral-x-dark-grey);\n      }\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--redsift-color-notifications-${$variant}-active);\n\n        .redsift-icon {\n          color: var(--redsift-color-neutral-x-dark-grey);\n        }\n      }\n    }\n\n    .redsift-toast__content {\n      margin-top: ${$hasTitle ? '8px' : '-24px'};\n      margin-left: 38px;\n    }\n  `}\n`;\n","import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\n\nimport { useMessageFormatter } from '@redsift/design-system';\nimport intlMessages from './intl';\n\nimport { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiClose, mdiInformation } from '@redsift/icons';\nimport {\n  NotificationsColorPalette,\n  Comp,\n  Icon,\n  Flexbox,\n  Spinner,\n  Text,\n  isComponent,\n  ButtonColor,\n  IconButton,\n  RedsiftTypographyFontWeightSemiBold,\n  useTheme,\n} from '@redsift/design-system';\nimport { StyledToast } from './styles';\nimport { ToastProps, ToastVariant } from './types';\n\nconst COMPONENT_NAME = 'Toast';\nconst CLASSNAME = 'redsift-toast';\n\nconst getVariant = (variant: ToastVariant) => {\n  switch (variant) {\n    case ToastVariant.info:\n    default:\n      return <Icon icon={mdiInformation} color={NotificationsColorPalette.info} />;\n    case ToastVariant.error:\n      return <Icon icon={mdiAlertCircle} color={NotificationsColorPalette.error} />;\n    case ToastVariant.success:\n      return <Icon icon={mdiCheckCircle} color={NotificationsColorPalette.success} />;\n    case ToastVariant.warning:\n      return <Icon icon={mdiAlert} color={NotificationsColorPalette.warning} />;\n    case ToastVariant.loading:\n      return <Spinner size=\"small\" />;\n  }\n};\n\n/**\n * The Toast component.\n */\nexport const Toast: Comp<ToastProps & { closeToast?: () => void }, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    children,\n    className,\n    closeButton = true,\n    closeToast,\n    theme: propsTheme,\n    title,\n    variant = 'info',\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n\n  const format = useMessageFormatter(intlMessages);\n\n  const icon = getVariant(variant!);\n\n  return (\n    <StyledToast\n      {...forwardedProps}\n      className={classNames(Toast.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n      $hasTitle={Boolean(title)}\n      $variant={variant}\n      $theme={theme}\n    >\n      <Flexbox className={`${Toast.className}__header`} justifyContent=\"space-between\" alignItems=\"center\">\n        <Flexbox justifyContent=\"space-between\" flexDirection=\"column\" gap=\"0\">\n          <Flexbox className={`${Toast.className}-header__title`} gap=\"14px\" alignItems=\"flex-start\">\n            {icon}\n            {title ? <Text fontWeight={RedsiftTypographyFontWeightSemiBold}>{title}</Text> : null}\n          </Flexbox>\n\n          {children ? <div className={`${Toast.className}__content`}>{children}</div> : null}\n        </Flexbox>\n\n        {closeButton === true ? (\n          <IconButton\n            aria-label={format('close')}\n            className={`${Toast.className}-header__icon-button`}\n            icon={mdiClose}\n            onClick={closeToast}\n          />\n        ) : isComponent('Button')(closeButton) || isComponent('IconButton')(closeButton) ? (\n          React.cloneElement(closeButton, {\n            color: variant === 'loading' ? 'info' : (variant as ButtonColor),\n            onClick: () => {\n              closeButton.props.onClick?.();\n              closeToast?.();\n            },\n          })\n        ) : null}\n      </Flexbox>\n    </StyledToast>\n  );\n});\nToast.className = CLASSNAME;\nToast.displayName = COMPONENT_NAME;\n"],"names":["ToastVariant","success","error","warning","info","loading","ToastPlacement","enUS","frFR","StyledToast","styled","div","baseStyling","_ref","$hasTitle","$variant","css","COMPONENT_NAME","CLASSNAME","getVariant","variant","React","createElement","Icon","icon","mdiInformation","color","NotificationsColorPalette","mdiAlertCircle","mdiCheckCircle","mdiAlert","Spinner","size","Toast","forwardRef","props","ref","children","className","closeButton","closeToast","theme","propsTheme","title","forwardedProps","_objectWithoutProperties","_excluded","useTheme","format","useMessageFormatter","intlMessages","_extends","classNames","Boolean","$theme","Flexbox","justifyContent","alignItems","flexDirection","gap","Text","fontWeight","RedsiftTypographyFontWeightSemiBold","IconButton","mdiClose","onClick","isComponent","cloneElement","_closeButton$props$on","_closeButton$props","call","displayName"],"mappings":";;;;;;;AAGA;AACA;AACA;AACO,MAAMA,YAAY,GAAG;AAC1BC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,OAAO,EAAE,SAAS;AAClBC,EAAAA,IAAI,EAAE,MAAM;AACZC,EAAAA,OAAO,EAAE,SAAA;AACX,EAAU;AAGH,MAAMC,cAAc,GAAG;AAC5B,EAAA,WAAW,EAAE,WAAW;AACxB,EAAA,YAAY,EAAE,YAAY;AAC1B,EAAA,UAAU,EAAE,UAAU;AACtB,EAAA,cAAc,EAAE,cAAc;AAC9B,EAAA,eAAe,EAAE,eAAe;AAChC,EAAA,aAAa,EAAE,aAAA;AACjB,EAAU;;AAGV;AACA;AACA;;;;;;;;;;;;ACxBA,mBAAe;AACb,EAAA,OAAO,EAAEC,IAAI;AACb,EAAA,OAAO,EAAEC,IAAAA;AACX,CAAC;;ACFD;AACA;AACA;AACO,MAAMC,WAAW,GAAGC,MAAM,CAACC,GAAsB,CAAA;AACxD,EAAA,EAAIC,WAAY,CAAA;AAChB;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;IAAEC,SAAS;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAAF,IAAA,CAAA;AAAA,EAAA,OAAKG,GAAI,CAAA;AACrC,sBAAwBD,EAAAA,QAAQ,KAAK,SAAS,GACtC,oCAAoC,GACnC,CAAA,kCAAA,EAAoCA,QAAS,CAAS,OAAA,CAAA,CAAA;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,4DAAA,EAA8DA,QAAS,CAAA;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAA,EAAoBD,SAAS,GAAG,KAAK,GAAG,OAAQ,CAAA;AAChD;AACA;AACA,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ,CAAC;;;ACnBD,MAAMG,cAAc,GAAG,OAAO,CAAA;AAC9B,MAAMC,SAAS,GAAG,eAAe,CAAA;AAEjC,MAAMC,UAAU,GAAIC,OAAqB,IAAK;AAC5C,EAAA,QAAQA,OAAO;IACb,KAAKpB,YAAY,CAACI,IAAI,CAAA;AACtB,IAAA;AACE,MAAA,oBAAOiB,KAAA,CAAAC,aAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAEC,cAAe;QAACC,KAAK,EAAEC,yBAAyB,CAACvB,IAAAA;AAAK,OAAE,CAAC,CAAA;IAC9E,KAAKJ,YAAY,CAACE,KAAK;AACrB,MAAA,oBAAOmB,KAAA,CAAAC,aAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAEI,cAAe;QAACF,KAAK,EAAEC,yBAAyB,CAACzB,KAAAA;AAAM,OAAE,CAAC,CAAA;IAC/E,KAAKF,YAAY,CAACC,OAAO;AACvB,MAAA,oBAAOoB,KAAA,CAAAC,aAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAEK,cAAe;QAACH,KAAK,EAAEC,yBAAyB,CAAC1B,OAAAA;AAAQ,OAAE,CAAC,CAAA;IACjF,KAAKD,YAAY,CAACG,OAAO;AACvB,MAAA,oBAAOkB,KAAA,CAAAC,aAAA,CAACC,IAAI,EAAA;AAACC,QAAAA,IAAI,EAAEM,QAAS;QAACJ,KAAK,EAAEC,yBAAyB,CAACxB,OAAAA;AAAQ,OAAE,CAAC,CAAA;IAC3E,KAAKH,YAAY,CAACK,OAAO;AACvB,MAAA,oBAAOgB,KAAA,CAAAC,aAAA,CAACS,OAAO,EAAA;AAACC,QAAAA,IAAI,EAAC,OAAA;AAAO,OAAE,CAAC,CAAA;AACnC,GAAA;AACF,CAAC,CAAA;;AAED;AACA;AACA;AACO,MAAMC,KAAqE,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC9G,MAAM;MACJC,QAAQ;MACRC,SAAS;AACTC,MAAAA,WAAW,GAAG,IAAI;MAClBC,UAAU;AACVC,MAAAA,KAAK,EAAEC,UAAU;MACjBC,KAAK;AACLvB,MAAAA,OAAO,GAAG,MAAA;AAEZ,KAAC,GAAGe,KAAK;AADJS,IAAAA,cAAc,GAAAC,wBAAA,CACfV,KAAK,EAAAW,SAAA,CAAA,CAAA;AAET,EAAA,MAAML,KAAK,GAAGM,QAAQ,CAACL,UAAU,CAAC,CAAA;AAElC,EAAA,MAAMM,MAAM,GAAGC,mBAAmB,CAACC,YAAY,CAAC,CAAA;AAEhD,EAAA,MAAM1B,IAAI,GAAGL,UAAU,CAACC,OAAQ,CAAC,CAAA;EAEjC,oBACEC,KAAA,CAAAC,aAAA,CAACb,WAAW,EAAA0C,QAAA,KACNP,cAAc,EAAA;IAClBN,SAAS,EAAEc,UAAU,CAACnB,KAAK,CAACK,SAAS,EAAEA,SAAS,CAAE;AAClDF,IAAAA,GAAG,EAAEA,GAAiC;AACtCtB,IAAAA,SAAS,EAAEuC,OAAO,CAACV,KAAK,CAAE;AAC1B5B,IAAAA,QAAQ,EAAEK,OAAQ;AAClBkC,IAAAA,MAAM,EAAEb,KAAAA;AAAM,GAAA,CAAA,eAEdpB,KAAA,CAAAC,aAAA,CAACiC,OAAO,EAAA;AAACjB,IAAAA,SAAS,EAAG,CAAA,EAAEL,KAAK,CAACK,SAAU,CAAU,QAAA,CAAA;AAACkB,IAAAA,cAAc,EAAC,eAAe;AAACC,IAAAA,UAAU,EAAC,QAAA;AAAQ,GAAA,eAClGpC,KAAA,CAAAC,aAAA,CAACiC,OAAO,EAAA;AAACC,IAAAA,cAAc,EAAC,eAAe;AAACE,IAAAA,aAAa,EAAC,QAAQ;AAACC,IAAAA,GAAG,EAAC,GAAA;AAAG,GAAA,eACpEtC,KAAA,CAAAC,aAAA,CAACiC,OAAO,EAAA;AAACjB,IAAAA,SAAS,EAAG,CAAA,EAAEL,KAAK,CAACK,SAAU,CAAgB,cAAA,CAAA;AAACqB,IAAAA,GAAG,EAAC,MAAM;AAACF,IAAAA,UAAU,EAAC,YAAA;GAC3EjC,EAAAA,IAAI,EACJmB,KAAK,gBAAGtB,KAAA,CAAAC,aAAA,CAACsC,IAAI,EAAA;AAACC,IAAAA,UAAU,EAAEC,mCAAAA;GAAsCnB,EAAAA,KAAY,CAAC,GAAG,IAC1E,CAAC,EAETN,QAAQ,gBAAGhB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKgB,IAAAA,SAAS,EAAG,CAAA,EAAEL,KAAK,CAACK,SAAU,CAAA,SAAA,CAAA;AAAW,GAAA,EAAED,QAAc,CAAC,GAAG,IACvE,CAAC,EAETE,WAAW,KAAK,IAAI,gBACnBlB,KAAA,CAAAC,aAAA,CAACyC,UAAU,EAAA;IACT,YAAYf,EAAAA,MAAM,CAAC,OAAO,CAAE;AAC5BV,IAAAA,SAAS,EAAG,CAAA,EAAEL,KAAK,CAACK,SAAU,CAAsB,oBAAA,CAAA;AACpDd,IAAAA,IAAI,EAAEwC,QAAS;AACfC,IAAAA,OAAO,EAAEzB,UAAAA;GACV,CAAC,GACA0B,WAAW,CAAC,QAAQ,CAAC,CAAC3B,WAAW,CAAC,IAAI2B,WAAW,CAAC,YAAY,CAAC,CAAC3B,WAAW,CAAC,gBAC9ElB,KAAK,CAAC8C,YAAY,CAAC5B,WAAW,EAAE;AAC9Bb,IAAAA,KAAK,EAAEN,OAAO,KAAK,SAAS,GAAG,MAAM,GAAIA,OAAuB;IAChE6C,OAAO,EAAEA,MAAM;MAAA,IAAAG,qBAAA,EAAAC,kBAAA,CAAA;AACb,MAAA,CAAAD,qBAAA,GAAAC,CAAAA,kBAAA,GAAA9B,WAAW,CAACJ,KAAK,EAAC8B,OAAO,MAAA,IAAA,IAAAG,qBAAA,KAAzBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,qBAAA,CAAAE,IAAA,CAAAD,kBAA4B,CAAC,CAAA;AAC7B7B,MAAAA,UAAU,KAAVA,IAAAA,IAAAA,UAAU,KAAVA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,UAAU,EAAI,CAAA;AAChB,KAAA;AACF,GAAC,CAAC,GACA,IACG,CACE,CAAC,CAAA;AAElB,CAAC,EAAC;AACFP,KAAK,CAACK,SAAS,GAAGpB,SAAS,CAAA;AAC3Be,KAAK,CAACsC,WAAW,GAAGtD,cAAc;;;;"}
+{"version":3,"file":"Toast2.js","sources":["../../src/components/toast/types.ts","../../src/components/toast/intl/index.ts","../../src/components/toast/styles.ts","../../src/components/toast/Toast.tsx"],"sourcesContent":["import { ComponentProps, ReactNode } from 'react';\nimport { ValueOf, SizingProps, SpacingProps, StylingTransientProps, Theme } from '@redsift/design-system';\n\n/**\n * Component variant.\n */\nexport const ToastVariant = {\n  success: 'success',\n  error: 'error',\n  warning: 'warning',\n  info: 'info',\n  loading: 'loading',\n} as const;\nexport type ToastVariant = ValueOf<typeof ToastVariant>;\n\nexport const ToastPlacement = {\n  'top-right': 'top-right',\n  'top-center': 'top-center',\n  'top-left': 'top-left',\n  'bottom-right': 'bottom-right',\n  'bottom-center': 'bottom-center',\n  'bottom-left': 'bottom-left',\n} as const;\nexport type ToastPlacement = ValueOf<typeof ToastPlacement>;\n\n/**\n * Component props.\n */\nexport interface ToastProps extends Omit<ComponentProps<'div'>, 'id' | 'style'>, SpacingProps, SizingProps {\n  /** Whether the component has a close button or not. */\n  closeButton?: boolean | ReactNode;\n  /** Title. */\n  title?: string;\n  /** Theme. */\n  theme?: Theme;\n  /** Variant */\n  variant?: ToastVariant;\n}\n\nexport interface StyledToastProps extends ComponentProps<'div'>, StylingTransientProps {\n  $hasTitle: boolean;\n  $variant: ToastProps['variant'];\n  $theme: Theme;\n}\n","import enUS from './en-US.json';\nimport frFR from './fr-FR.json';\n\nexport default {\n  'en-US': enUS,\n  'fr-FR': frFR,\n};\n","import styled, { css } from 'styled-components';\nimport { baseStyling } from '@redsift/design-system';\nimport { StyledToastProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledToast = styled.div<StyledToastProps>`\n  ${baseStyling}\n\n  color: var(--redsift-color-neutral-x-dark-grey);\n\n  padding: 16px;\n  box-shadow: 0px 2px 4px -1px rgb(0 0 0 / 20%), 0px 4px 5px rgb(0 0 0 / 14%), 0px 1px 10px rgb(0 0 0 / 12%);\n\n  ${({ $hasTitle, $variant }) => css`\n    background-color: ${$variant === 'loading'\n      ? 'var(--redsift-color-neutral-white)'\n      : `var(--redsift-color-notifications-${$variant}-hover)`};\n\n    .redsift-toast-header__icon-button {\n      background-color: transparent;\n      padding: 0px;\n      .redsift-icon {\n        color: var(--redsift-color-neutral-x-dark-grey);\n      }\n\n      &:hover,\n      &:focus-visible {\n        background-color: var(--redsift-color-notifications-${$variant}-active);\n\n        .redsift-icon {\n          color: var(--redsift-color-neutral-x-dark-grey);\n        }\n      }\n    }\n\n    .redsift-toast__content {\n      margin-top: ${$hasTitle ? '8px' : '-24px'};\n      margin-left: 38px;\n    }\n  `}\n`;\n","import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\n\nimport { useMessageFormatter } from '@redsift/design-system';\nimport intlMessages from './intl';\n\nimport { mdiAlert, mdiAlertCircle, mdiCheckCircle, mdiClose, mdiInformation } from '@redsift/icons';\nimport {\n  NotificationsColorPalette,\n  Comp,\n  getStylingTransientProps,\n  Icon,\n  Flexbox,\n  Spinner,\n  Text,\n  isComponent,\n  ButtonColor,\n  IconButton,\n  RedsiftTypographyFontWeightSemiBold,\n  useTheme,\n} from '@redsift/design-system';\nimport { StyledToast } from './styles';\nimport { ToastProps, ToastVariant } from './types';\nimport { ToastContentProps } from 'react-toastify';\n\nconst COMPONENT_NAME = 'Toast';\nconst CLASSNAME = 'redsift-toast';\n\nconst getVariant = (variant: ToastVariant) => {\n  switch (variant) {\n    case ToastVariant.info:\n    default:\n      return <Icon icon={mdiInformation} color={NotificationsColorPalette.info} />;\n    case ToastVariant.error:\n      return <Icon icon={mdiAlertCircle} color={NotificationsColorPalette.error} />;\n    case ToastVariant.success:\n      return <Icon icon={mdiCheckCircle} color={NotificationsColorPalette.success} />;\n    case ToastVariant.warning:\n      return <Icon icon={mdiAlert} color={NotificationsColorPalette.warning} />;\n    case ToastVariant.loading:\n      return <Spinner size=\"small\" />;\n  }\n};\n\n/**\n * The Toast component.\n */\nexport const Toast: Comp<ToastProps & Partial<ToastContentProps>, HTMLDivElement> = forwardRef((props, ref) => {\n  const { transientProps, otherProps } = getStylingTransientProps(props);\n\n  const {\n    children,\n    className,\n    closeButton = true,\n    closeToast,\n    theme: propsTheme,\n    title,\n    variant = 'info',\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    toastProps,\n    ...forwardedProps\n  } = otherProps;\n\n  const theme = useTheme(propsTheme);\n\n  const format = useMessageFormatter(intlMessages);\n\n  const icon = getVariant(variant!);\n\n  return (\n    <StyledToast\n      {...forwardedProps}\n      {...transientProps}\n      className={classNames(Toast.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n      $hasTitle={Boolean(title)}\n      $variant={variant}\n      $theme={theme}\n    >\n      <Flexbox className={`${Toast.className}__header`} justifyContent=\"space-between\" alignItems=\"center\">\n        <Flexbox justifyContent=\"space-between\" flexDirection=\"column\" gap=\"0\">\n          <Flexbox className={`${Toast.className}-header__title`} gap=\"14px\" alignItems=\"flex-start\">\n            {icon}\n            {title ? <Text fontWeight={RedsiftTypographyFontWeightSemiBold}>{title}</Text> : null}\n          </Flexbox>\n\n          {children ? <div className={`${Toast.className}__content`}>{children}</div> : null}\n        </Flexbox>\n\n        {closeButton === true ? (\n          <IconButton\n            aria-label={format('close')}\n            className={`${Toast.className}-header__icon-button`}\n            icon={mdiClose}\n            onClick={closeToast}\n          />\n        ) : isComponent('Button')(closeButton) || isComponent('IconButton')(closeButton) ? (\n          React.cloneElement(closeButton, {\n            color: variant === 'loading' ? 'info' : (variant as ButtonColor),\n            onClick: () => {\n              closeButton.props.onClick?.();\n              closeToast?.();\n            },\n          })\n        ) : null}\n      </Flexbox>\n    </StyledToast>\n  );\n});\nToast.className = CLASSNAME;\nToast.displayName = COMPONENT_NAME;\n"],"names":["ToastVariant","success","error","warning","info","loading","ToastPlacement","enUS","frFR","StyledToast","styled","div","baseStyling","_ref","$hasTitle","$variant","css","COMPONENT_NAME","CLASSNAME","getVariant","variant","React","createElement","Icon","icon","mdiInformation","color","NotificationsColorPalette","mdiAlertCircle","mdiCheckCircle","mdiAlert","Spinner","size","Toast","forwardRef","props","ref","transientProps","otherProps","getStylingTransientProps","children","className","closeButton","closeToast","theme","propsTheme","title","toastProps","forwardedProps","_objectWithoutProperties","_excluded","useTheme","format","useMessageFormatter","intlMessages","_extends","classNames","Boolean","$theme","Flexbox","justifyContent","alignItems","flexDirection","gap","Text","fontWeight","RedsiftTypographyFontWeightSemiBold","IconButton","mdiClose","onClick","isComponent","cloneElement","_closeButton$props$on","_closeButton$props","call","displayName"],"mappings":"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"}

package/_internal/ToggletipContent.js

@@ -1,7 +1,7 @@
 import { b as _extends, _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
 import React, { forwardRef, useContext } from 'react';
 import { useMergeRefs, FloatingPortal } from '@floating-ui/react';
-import { baseContainer, Theme, AppContainerContext, useTheme } from '@redsift/design-system';
+import { baseContainer, Theme, getContainerStylingTransientProps, AppContainerContext, useTheme } from '@redsift/design-system';
 import styled, { css } from 'styled-components';
 import classNames from 'classnames';
 import { u as useToggletipContext } from './useToggletipContext.js';
@@ -160,12 +160,16 @@ const CLASSNAME = 'redsift-toggletip-content';
  * The ToggletipContent component.
  */
 const ToggletipContent = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    transientProps,
+    otherProps
+  } = getContainerStylingTransientProps(props);
   const {
     children,
     className,
     style,
     theme: propsTheme
-  } = props;
+  } = otherProps;
   const appContainerState = useContext(AppContainerContext);
   const {
     getFloatingProps,
@@ -199,7 +203,7 @@ const ToggletipContent = /*#__PURE__*/forwardRef((props, ref) => {
     className: classNames(ToggletipContent.className, className),
     ref: popoverRef,
     $theme: theme
-  }, getFloatingProps(props), {
+  }, getFloatingProps(otherProps), transientProps, {
     style: _objectSpread2({
       position: strategy,
       top: y !== null && y !== void 0 ? y : 0,

package/_internal/ToggletipContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggletipContent.js","sources":["../../src/components/toggletip/types.ts","../../src/components/toggletip-content/styles.ts","../../src/components/toggletip-content/ToggletipContent.tsx"],"sourcesContent":["import { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { ButtonColor, Theme, ValueOf } from '@redsift/design-system';\nimport { useToggletip } from './useToggletip';\n\n/**\n * Context props.\n */\nexport type HiddenToggletipState = {\n  /** Whether the toggletip should be hidden or removed from the DOM. */\n  hideInsteadOfClose?: boolean;\n  /** Method to set the hideInsteadOfClose prop. */\n  setHideInsteadOfClose?: Dispatch<SetStateAction<boolean>>;\n};\nexport type ToggletipState =\n  | (ReturnType<typeof useToggletip> & {\n      /** Class name to append to the trigger. */\n      readonly triggerClassName?: string;\n    } & HiddenToggletipState)\n  | null;\n\n/**\n * Component variant.\n */\nexport const ToggletipPlacement = {\n  top: 'top',\n  right: 'right',\n  bottom: 'bottom',\n  left: 'left',\n  'top-start': 'top-start',\n  'top-end': 'top-end',\n  'right-start': 'right-start',\n  'right-end': 'right-end',\n  'bottom-start': 'bottom-start',\n  'bottom-end': 'bottom-end',\n  'left-start': 'left-start',\n  'left-end': 'left-end',\n} as const;\nexport type ToggletipPlacement = ValueOf<typeof ToggletipPlacement>;\n\n/**\n * Component props.\n */\nexport interface ToggletipProps {\n  /** Toggletip content width. Can be either based on the trigger, the available space or define with a number of pixels. */\n  width?: 'trigger-width' | 'available-width' | number;\n  /** Toggletip content min width. Can be either based on the trigger, the available space or define with a number of pixels. */\n  minWidth?: 'trigger-width' | 'available-width' | number;\n  /** Toggletip content max width. Can be either based on the trigger, the available space or define with a number of pixels. */\n  maxWidth?: 'trigger-width' | 'available-width' | number;\n  /** Button color that will be forward to the trigger. */\n  color?: ButtonColor;\n  /** Children. Can only be ToggletipTrigger and ToggletipContent. */\n  children: ReactNode;\n  /**\n   * Default open status.\n   * Used for uncontrolled version.\n   */\n  defaultOpen?: boolean;\n  /** Delay time (in ms) for the tooltip to show up. */\n  delay?: number;\n  /** Default placement of the toggletip. */\n  placement?: ToggletipPlacement | 'client-point';\n  /** Whether the toggletip is a modal or not. */\n  isModal?: boolean;\n  /**\n   * Whether the component is opened or not.\n   * Used for controlled version.\n   */\n  isOpen?: boolean;\n  /** Space between trigger and content (in pixels). */\n  offset?: number;\n  /** Method to handle component change. */\n  onOpen?: (open: boolean) => void;\n  /** Allows other components to be treated as trigger and content. */\n  overrideDisplayName?: {\n    content?: string;\n    trigger?: string;\n  };\n  /** Id to the toggletip content. */\n  toggletipId?: string;\n  /** Role to apply to the toggletip. */\n  role?: 'dialog';\n  /** Theme. */\n  theme?: Theme;\n  /** Class name to append to the trigger. */\n  triggerClassName?: string;\n}\n\nexport type StyledToggletipProps = ToggletipProps;\n","import styled, { css } from 'styled-components';\nimport { Theme, baseContainer } from '@redsift/design-system';\nimport { ToggletipPlacement } from '../toggletip';\nimport { StyledToggletipContentProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledToggletipContent = styled.div<StyledToggletipContentProps>`\n  ${baseContainer}\n  ${({ $theme }) => css`\n    color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n    background-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'black' : 'white'});\n  `}\n\n  align-items: center;\n  border-radius: 4px;\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2);\n  display: flex;\n  filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14)) drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12));\n  font-family: var(--redsift-typography-toggletip-font-family);\n  font-size: var(--redsift-typography-toggletip-font-size);\n  font-weight: var(--redsift-typography-toggletip-font-weight);\n  line-height: var(--redsift-typography-toggletip-line-height);\n  max-width: calc(100vw - 48px);\n  padding: 4px 8px;\n  z-index: var(--redsift-layout-z-index-toggletip);\n\n  .redsift-toggletip-content__arrow {\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-color: ${({ $theme }) =>\n      $theme === Theme.dark ? css`var(--redsift-color-neutral-black)` : css`var(--redsift-color-neutral-white)`};\n    border-style: solid;\n  }\n\n  ${({ $placement }) => {\n    switch ($placement) {\n      case ToggletipPlacement['right-start']:\n        return css`\n          border-bottom-left-radius: 0;\n        `;\n      case ToggletipPlacement['right-end']:\n        return css`\n          border-top-left-radius: 0;\n        `;\n      case ToggletipPlacement['left-start']:\n        return css`\n          border-bottom-right-radius: 0;\n        `;\n      case ToggletipPlacement['left-end']:\n        return css`\n          border-top-right-radius: 0;\n        `;\n      default:\n        return css``;\n    }\n  }}\n\n  ${({ $placement }) => {\n    switch ($placement) {\n      case ToggletipPlacement.left:\n      case ToggletipPlacement['left-end']:\n      case ToggletipPlacement['left-start']:\n        return css`\n          .redsift-toggletip-content__arrow {\n            border-width: 6px 0 6px 6px;\n            border-top-color: transparent;\n            border-right-color: transparent;\n            border-bottom-color: transparent;\n          }\n        `;\n      case ToggletipPlacement.top:\n      case ToggletipPlacement['top-end']:\n      case ToggletipPlacement['top-start']:\n        return css`\n          .redsift-toggletip-content__arrow {\n            border-width: 6px 6px 0;\n            border-right-color: transparent;\n            border-bottom-color: transparent;\n            border-left-color: transparent;\n          }\n        `;\n      case ToggletipPlacement.right:\n      case ToggletipPlacement['right-end']:\n      case ToggletipPlacement['right-start']:\n        return css`\n          .redsift-toggletip-content__arrow {\n            border-width: 6px 6px 6px 0;\n            border-top-color: transparent;\n            border-bottom-color: transparent;\n            border-left-color: transparent;\n          }\n        `;\n      case ToggletipPlacement.bottom:\n      case ToggletipPlacement['bottom-end']:\n      case ToggletipPlacement['bottom-start']:\n      default:\n        return css`\n          .redsift-toggletip-content__arrow {\n            border-width: 0 6px 6px;\n            border-top-color: transparent;\n            border-right-color: transparent;\n            border-left-color: transparent;\n          }\n        `;\n    }\n  }}\n`;\n","import React, { forwardRef, useContext } from 'react';\nimport { useMergeRefs, FloatingPortal } from '@floating-ui/react';\n\nimport { AppContainerContext, Comp, useTheme } from '@redsift/design-system';\nimport { ToggletipContentProps } from './types';\nimport { ToggletipPlacement, useToggletipContext } from '../toggletip';\nimport { StyledToggletipContent } from './styles';\nimport classNames from 'classnames';\n\nconst COMPONENT_NAME = 'ToggletipContent';\nconst CLASSNAME = 'redsift-toggletip-content';\n\n/**\n * The ToggletipContent component.\n */\nexport const ToggletipContent: Comp<ToggletipContentProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { children, className, style, theme: propsTheme } = props;\n  const appContainerState = useContext(AppContainerContext);\n  const {\n    getFloatingProps,\n    isOpen,\n    placement,\n    refs,\n    strategy,\n    x,\n    y,\n    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n  } = useToggletipContext();\n  const theme = useTheme ? useTheme(propsTheme) : undefined;\n  const popoverRef = useMergeRefs([refs.setFloating, ref]);\n\n  const { arrowRef } = useToggletipContext();\n\n  const staticSide = {\n    top: 'bottom',\n    right: 'left',\n    bottom: 'top',\n    left: 'right',\n  }[placement.split('-')[0]];\n\n  return (\n    <FloatingPortal root={appContainerState?.appContainerRef.current}>\n      {isOpen && (\n        <StyledToggletipContent\n          className={classNames(ToggletipContent.className, className)}\n          ref={popoverRef}\n          $theme={theme!}\n          {...getFloatingProps(props)}\n          style={{\n            position: strategy,\n            top: y ?? 0,\n            left: x ?? 0,\n            visibility: x == null ? 'hidden' : 'visible',\n            ...style,\n          }}\n          $placement={placement as ToggletipPlacement}\n        >\n          <div\n            ref={arrowRef}\n            className={`${ToggletipContent.className}__arrow`}\n            style={{\n              left: arrowX != null ? `${arrowX}px` : '',\n              top: arrowY != null ? `${arrowY}px` : '',\n              [staticSide!]: '-6px',\n            }}\n          />\n          <div className={`${ToggletipContent.className}__inner`}>{children}</div>\n        </StyledToggletipContent>\n      )}\n    </FloatingPortal>\n  );\n});\nToggletipContent.className = CLASSNAME;\nToggletipContent.displayName = COMPONENT_NAME;\n"],"names":["ToggletipPlacement","top","right","bottom","left","StyledToggletipContent","styled","div","baseContainer","_ref","$theme","css","Theme","dark","_ref2","_ref3","$placement","_ref4","COMPONENT_NAME","CLASSNAME","ToggletipContent","forwardRef","props","ref","children","className","style","theme","propsTheme","appContainerState","useContext","AppContainerContext","getFloatingProps","isOpen","placement","refs","strategy","x","y","middlewareData","arrow","arrowX","arrowY","useToggletipContext","useTheme","undefined","popoverRef","useMergeRefs","setFloating","arrowRef","staticSide","split","React","createElement","FloatingPortal","root","appContainerRef","current","_extends","classNames","_objectSpread","position","visibility","displayName"],"mappings":"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"}
+{"version":3,"file":"ToggletipContent.js","sources":["../../src/components/toggletip/types.ts","../../src/components/toggletip-content/styles.ts","../../src/components/toggletip-content/ToggletipContent.tsx"],"sourcesContent":["import { Dispatch, ReactNode, SetStateAction } from 'react';\nimport { ButtonColor, Theme, ValueOf } from '@redsift/design-system';\nimport { useToggletip } from './useToggletip';\n\n/**\n * Context props.\n */\nexport type HiddenToggletipState = {\n  /** Whether the toggletip should be hidden or removed from the DOM. */\n  hideInsteadOfClose?: boolean;\n  /** Method to set the hideInsteadOfClose prop. */\n  setHideInsteadOfClose?: Dispatch<SetStateAction<boolean>>;\n};\nexport type ToggletipState =\n  | (ReturnType<typeof useToggletip> & {\n      /** Class name to append to the trigger. */\n      readonly triggerClassName?: string;\n    } & HiddenToggletipState)\n  | null;\n\n/**\n * Component variant.\n */\nexport const ToggletipPlacement = {\n  top: 'top',\n  right: 'right',\n  bottom: 'bottom',\n  left: 'left',\n  'top-start': 'top-start',\n  'top-end': 'top-end',\n  'right-start': 'right-start',\n  'right-end': 'right-end',\n  'bottom-start': 'bottom-start',\n  'bottom-end': 'bottom-end',\n  'left-start': 'left-start',\n  'left-end': 'left-end',\n} as const;\nexport type ToggletipPlacement = ValueOf<typeof ToggletipPlacement>;\n\n/**\n * Component props.\n */\nexport interface ToggletipProps {\n  /** Toggletip content width. Can be either based on the trigger, the available space or define with a number of pixels. */\n  width?: 'trigger-width' | 'available-width' | number;\n  /** Toggletip content min width. Can be either based on the trigger, the available space or define with a number of pixels. */\n  minWidth?: 'trigger-width' | 'available-width' | number;\n  /** Toggletip content max width. Can be either based on the trigger, the available space or define with a number of pixels. */\n  maxWidth?: 'trigger-width' | 'available-width' | number;\n  /** Button color that will be forward to the trigger. */\n  color?: ButtonColor;\n  /** Children. Can only be ToggletipTrigger and ToggletipContent. */\n  children: ReactNode;\n  /**\n   * Default open status.\n   * Used for uncontrolled version.\n   */\n  defaultOpen?: boolean;\n  /** Delay time (in ms) for the tooltip to show up. */\n  delay?: number;\n  /** Default placement of the toggletip. */\n  placement?: ToggletipPlacement | 'client-point';\n  /** Whether the toggletip is a modal or not. */\n  isModal?: boolean;\n  /**\n   * Whether the component is opened or not.\n   * Used for controlled version.\n   */\n  isOpen?: boolean;\n  /** Space between trigger and content (in pixels). */\n  offset?: number;\n  /** Method to handle component change. */\n  onOpen?: (open: boolean) => void;\n  /** Allows other components to be treated as trigger and content. */\n  overrideDisplayName?: {\n    content?: string;\n    trigger?: string;\n  };\n  /** Id to the toggletip content. */\n  toggletipId?: string;\n  /** Role to apply to the toggletip. */\n  role?: 'dialog';\n  /** Theme. */\n  theme?: Theme;\n  /** Class name to append to the trigger. */\n  triggerClassName?: string;\n}\n\nexport type StyledToggletipProps = ToggletipProps;\n","import styled, { css } from 'styled-components';\nimport { Theme, baseContainer } from '@redsift/design-system';\nimport { ToggletipPlacement } from '../toggletip';\nimport { StyledToggletipContentProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledToggletipContent = styled.div<StyledToggletipContentProps>`\n  ${baseContainer}\n  ${({ $theme }) => css`\n    color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'white' : 'x-dark-grey'});\n    background-color: var(--redsift-color-neutral-${$theme === Theme.dark ? 'black' : 'white'});\n  `}\n\n  align-items: center;\n  border-radius: 4px;\n  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2);\n  display: flex;\n  filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14)) drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12));\n  font-family: var(--redsift-typography-toggletip-font-family);\n  font-size: var(--redsift-typography-toggletip-font-size);\n  font-weight: var(--redsift-typography-toggletip-font-weight);\n  line-height: var(--redsift-typography-toggletip-line-height);\n  max-width: calc(100vw - 48px);\n  padding: 4px 8px;\n  z-index: var(--redsift-layout-z-index-toggletip);\n\n  .redsift-toggletip-content__arrow {\n    position: absolute;\n    width: 0;\n    height: 0;\n    border-color: ${({ $theme }) =>\n      $theme === Theme.dark ? css`var(--redsift-color-neutral-black)` : css`var(--redsift-color-neutral-white)`};\n    border-style: solid;\n  }\n\n  ${({ $placement }) => {\n    switch ($placement) {\n      case ToggletipPlacement['right-start']:\n        return css`\n          border-bottom-left-radius: 0;\n        `;\n      case ToggletipPlacement['right-end']:\n        return css`\n          border-top-left-radius: 0;\n        `;\n      case ToggletipPlacement['left-start']:\n        return css`\n          border-bottom-right-radius: 0;\n        `;\n      case ToggletipPlacement['left-end']:\n        return css`\n          border-top-right-radius: 0;\n        `;\n      default:\n        return css``;\n    }\n  }}\n\n  ${({ $placement }) => {\n    switch ($placement) {\n      case ToggletipPlacement.left:\n      case ToggletipPlacement['left-end']:\n      case ToggletipPlacement['left-start']:\n        return css`\n          .redsift-toggletip-content__arrow {\n            border-width: 6px 0 6px 6px;\n            border-top-color: transparent;\n            border-right-color: transparent;\n            border-bottom-color: transparent;\n          }\n        `;\n      case ToggletipPlacement.top:\n      case ToggletipPlacement['top-end']:\n      case ToggletipPlacement['top-start']:\n        return css`\n          .redsift-toggletip-content__arrow {\n            border-width: 6px 6px 0;\n            border-right-color: transparent;\n            border-bottom-color: transparent;\n            border-left-color: transparent;\n          }\n        `;\n      case ToggletipPlacement.right:\n      case ToggletipPlacement['right-end']:\n      case ToggletipPlacement['right-start']:\n        return css`\n          .redsift-toggletip-content__arrow {\n            border-width: 6px 6px 6px 0;\n            border-top-color: transparent;\n            border-bottom-color: transparent;\n            border-left-color: transparent;\n          }\n        `;\n      case ToggletipPlacement.bottom:\n      case ToggletipPlacement['bottom-end']:\n      case ToggletipPlacement['bottom-start']:\n      default:\n        return css`\n          .redsift-toggletip-content__arrow {\n            border-width: 0 6px 6px;\n            border-top-color: transparent;\n            border-right-color: transparent;\n            border-left-color: transparent;\n          }\n        `;\n    }\n  }}\n`;\n","import React, { forwardRef, useContext } from 'react';\nimport { useMergeRefs, FloatingPortal } from '@floating-ui/react';\n\nimport { AppContainerContext, Comp, getContainerStylingTransientProps, useTheme } from '@redsift/design-system';\nimport { ToggletipContentProps } from './types';\nimport { ToggletipPlacement, useToggletipContext } from '../toggletip';\nimport { StyledToggletipContent } from './styles';\nimport classNames from 'classnames';\n\nconst COMPONENT_NAME = 'ToggletipContent';\nconst CLASSNAME = 'redsift-toggletip-content';\n\n/**\n * The ToggletipContent component.\n */\nexport const ToggletipContent: Comp<ToggletipContentProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { transientProps, otherProps } = getContainerStylingTransientProps(props);\n\n  const { children, className, style, theme: propsTheme } = otherProps;\n  const appContainerState = useContext(AppContainerContext);\n  const {\n    getFloatingProps,\n    isOpen,\n    placement,\n    refs,\n    strategy,\n    x,\n    y,\n    middlewareData: { arrow: { x: arrowX, y: arrowY } = {} },\n  } = useToggletipContext();\n  const theme = useTheme ? useTheme(propsTheme) : undefined;\n  const popoverRef = useMergeRefs([refs.setFloating, ref]);\n\n  const { arrowRef } = useToggletipContext();\n\n  const staticSide = {\n    top: 'bottom',\n    right: 'left',\n    bottom: 'top',\n    left: 'right',\n  }[placement.split('-')[0]];\n\n  return (\n    <FloatingPortal root={appContainerState?.appContainerRef.current}>\n      {isOpen && (\n        <StyledToggletipContent\n          className={classNames(ToggletipContent.className, className)}\n          ref={popoverRef}\n          $theme={theme!}\n          {...getFloatingProps(otherProps)}\n          {...transientProps}\n          style={{\n            position: strategy,\n            top: y ?? 0,\n            left: x ?? 0,\n            visibility: x == null ? 'hidden' : 'visible',\n            ...style,\n          }}\n          $placement={placement as ToggletipPlacement}\n        >\n          <div\n            ref={arrowRef}\n            className={`${ToggletipContent.className}__arrow`}\n            style={{\n              left: arrowX != null ? `${arrowX}px` : '',\n              top: arrowY != null ? `${arrowY}px` : '',\n              [staticSide!]: '-6px',\n            }}\n          />\n          <div className={`${ToggletipContent.className}__inner`}>{children}</div>\n        </StyledToggletipContent>\n      )}\n    </FloatingPortal>\n  );\n});\nToggletipContent.className = CLASSNAME;\nToggletipContent.displayName = COMPONENT_NAME;\n"],"names":["ToggletipPlacement","top","right","bottom","left","StyledToggletipContent","styled","div","baseContainer","_ref","$theme","css","Theme","dark","_ref2","_ref3","$placement","_ref4","COMPONENT_NAME","CLASSNAME","ToggletipContent","forwardRef","props","ref","transientProps","otherProps","getContainerStylingTransientProps","children","className","style","theme","propsTheme","appContainerState","useContext","AppContainerContext","getFloatingProps","isOpen","placement","refs","strategy","x","y","middlewareData","arrow","arrowX","arrowY","useToggletipContext","useTheme","undefined","popoverRef","useMergeRefs","setFloating","arrowRef","staticSide","split","React","createElement","FloatingPortal","root","appContainerRef","current","_extends","classNames","_objectSpread","position","visibility","displayName"],"mappings":";;;;;;;;AAIA;AACA;AACA;;AAcA;AACA;AACA;AACO,MAAMA,kBAAkB,GAAG;AAChCC,EAAAA,GAAG,EAAE,KAAK;AACVC,EAAAA,KAAK,EAAE,OAAO;AACdC,EAAAA,MAAM,EAAE,QAAQ;AAChBC,EAAAA,IAAI,EAAE,MAAM;AACZ,EAAA,WAAW,EAAE,WAAW;AACxB,EAAA,SAAS,EAAE,SAAS;AACpB,EAAA,aAAa,EAAE,aAAa;AAC5B,EAAA,WAAW,EAAE,WAAW;AACxB,EAAA,cAAc,EAAE,cAAc;AAC9B,EAAA,YAAY,EAAE,YAAY;AAC1B,EAAA,YAAY,EAAE,YAAY;AAC1B,EAAA,UAAU,EAAE,UAAA;AACd,EAAU;;AAGV;AACA;AACA;;ACpCA;AACA;AACA;AACO,MAAMC,sBAAsB,GAAGC,MAAM,CAACC,GAAiC,CAAA;AAC9E,EAAA,EAAIC,aAAc,CAAA;AAClB,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OAAKE,GAAI,CAAA;AACxB,uCAAyCD,EAAAA,MAAM,KAAKE,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,aAAc,CAAA;AACzF,kDAAoDH,EAAAA,MAAM,KAAKE,KAAK,CAACC,IAAI,GAAG,OAAO,GAAG,OAAQ,CAAA;AAC9F,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,kBAAA,EAAoBC,KAAA,IAAA;EAAA,IAAC;AAAEJ,IAAAA,MAAAA;AAAO,GAAC,GAAAI,KAAA,CAAA;EAAA,OACzBJ,MAAM,KAAKE,KAAK,CAACC,IAAI,GAAGF,GAAI,CAAA,kCAAA,CAAmC,GAAGA,GAAI,CAAmC,kCAAA,CAAA,CAAA;AAAA,CAAC,CAAA;AAChH;AACA;AACA;AACA,EAAA,EAAII,KAAA,IAAoB;EAAA,IAAnB;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAAD,KAAA,CAAA;AACf,EAAA,QAAQC,UAAU;IAChB,KAAKhB,kBAAkB,CAAC,aAAa,CAAC;AACpC,MAAA,OAAOW,GAAI,CAAA;AACnB;AACA,QAAS,CAAA,CAAA;IACH,KAAKX,kBAAkB,CAAC,WAAW,CAAC;AAClC,MAAA,OAAOW,GAAI,CAAA;AACnB;AACA,QAAS,CAAA,CAAA;IACH,KAAKX,kBAAkB,CAAC,YAAY,CAAC;AACnC,MAAA,OAAOW,GAAI,CAAA;AACnB;AACA,QAAS,CAAA,CAAA;IACH,KAAKX,kBAAkB,CAAC,UAAU,CAAC;AACjC,MAAA,OAAOW,GAAI,CAAA;AACnB;AACA,QAAS,CAAA,CAAA;AACH,IAAA;AACE,MAAA,OAAOA,GAAI,CAAC,CAAA,CAAA;AAChB,GAAA;AACF,CAAE,CAAA;AACJ;AACA,EAAA,EAAIM,KAAA,IAAoB;EAAA,IAAnB;AAAED,IAAAA,UAAAA;AAAW,GAAC,GAAAC,KAAA,CAAA;AACf,EAAA,QAAQD,UAAU;IAChB,KAAKhB,kBAAkB,CAACI,IAAI,CAAA;IAC5B,KAAKJ,kBAAkB,CAAC,UAAU,CAAC,CAAA;IACnC,KAAKA,kBAAkB,CAAC,YAAY,CAAC;AACnC,MAAA,OAAOW,GAAI,CAAA;AACnB;AACA;AACA;AACA;AACA;AACA;AACA,QAAS,CAAA,CAAA;IACH,KAAKX,kBAAkB,CAACC,GAAG,CAAA;IAC3B,KAAKD,kBAAkB,CAAC,SAAS,CAAC,CAAA;IAClC,KAAKA,kBAAkB,CAAC,WAAW,CAAC;AAClC,MAAA,OAAOW,GAAI,CAAA;AACnB;AACA;AACA;AACA;AACA;AACA;AACA,QAAS,CAAA,CAAA;IACH,KAAKX,kBAAkB,CAACE,KAAK,CAAA;IAC7B,KAAKF,kBAAkB,CAAC,WAAW,CAAC,CAAA;IACpC,KAAKA,kBAAkB,CAAC,aAAa,CAAC;AACpC,MAAA,OAAOW,GAAI,CAAA;AACnB;AACA;AACA;AACA;AACA;AACA;AACA,QAAS,CAAA,CAAA;IACH,KAAKX,kBAAkB,CAACG,MAAM,CAAA;IAC9B,KAAKH,kBAAkB,CAAC,YAAY,CAAC,CAAA;IACrC,KAAKA,kBAAkB,CAAC,cAAc,CAAC,CAAA;AACvC,IAAA;AACE,MAAA,OAAOW,GAAI,CAAA;AACnB;AACA;AACA;AACA;AACA;AACA;AACA,QAAS,CAAA,CAAA;AACL,GAAA;AACF,CAAE,CAAA;AACJ,CAAC;;ACpGD,MAAMO,cAAc,GAAG,kBAAkB,CAAA;AACzC,MAAMC,SAAS,GAAG,2BAA2B,CAAA;;AAE7C;AACA;AACA;AACO,MAAMC,gBAA6D,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACtG,MAAM;IAAEC,cAAc;AAAEC,IAAAA,UAAAA;AAAW,GAAC,GAAGC,iCAAiC,CAACJ,KAAK,CAAC,CAAA;EAE/E,MAAM;IAAEK,QAAQ;IAAEC,SAAS;IAAEC,KAAK;AAAEC,IAAAA,KAAK,EAAEC,UAAAA;AAAW,GAAC,GAAGN,UAAU,CAAA;AACpE,EAAA,MAAMO,iBAAiB,GAAGC,UAAU,CAACC,mBAAmB,CAAC,CAAA;EACzD,MAAM;IACJC,gBAAgB;IAChBC,MAAM;IACNC,SAAS;IACTC,IAAI;IACJC,QAAQ;IACRC,CAAC;IACDC,CAAC;AACDC,IAAAA,cAAc,EAAE;AAAEC,MAAAA,KAAK,EAAE;AAAEH,QAAAA,CAAC,EAAEI,MAAM;AAAEH,QAAAA,CAAC,EAAEI,MAAAA;AAAO,OAAC,GAAG,EAAC;AAAE,KAAA;GACxD,GAAGC,mBAAmB,EAAE,CAAA;EACzB,MAAMhB,KAAK,GAAGiB,QAAQ,GAAGA,QAAQ,CAAChB,UAAU,CAAC,GAAGiB,SAAS,CAAA;EACzD,MAAMC,UAAU,GAAGC,YAAY,CAAC,CAACZ,IAAI,CAACa,WAAW,EAAE5B,GAAG,CAAC,CAAC,CAAA;EAExD,MAAM;AAAE6B,IAAAA,QAAAA;GAAU,GAAGN,mBAAmB,EAAE,CAAA;AAE1C,EAAA,MAAMO,UAAU,GAAG;AACjBpD,IAAAA,GAAG,EAAE,QAAQ;AACbC,IAAAA,KAAK,EAAE,MAAM;AACbC,IAAAA,MAAM,EAAE,KAAK;AACbC,IAAAA,IAAI,EAAE,OAAA;GACP,CAACiC,SAAS,CAACiB,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;AAE1B,EAAA,oBACEC,KAAA,CAAAC,aAAA,CAACC,cAAc,EAAA;IAACC,IAAI,EAAE1B,iBAAiB,KAAjBA,IAAAA,IAAAA,iBAAiB,uBAAjBA,iBAAiB,CAAE2B,eAAe,CAACC,OAAAA;GACtDxB,EAAAA,MAAM,iBACLmB,KAAA,CAAAC,aAAA,CAACnD,sBAAsB,EAAAwD,QAAA,CAAA;IACrBjC,SAAS,EAAEkC,UAAU,CAAC1C,gBAAgB,CAACQ,SAAS,EAAEA,SAAS,CAAE;AAC7DL,IAAAA,GAAG,EAAE0B,UAAW;AAChBvC,IAAAA,MAAM,EAAEoB,KAAAA;AAAO,GAAA,EACXK,gBAAgB,CAACV,UAAU,CAAC,EAC5BD,cAAc,EAAA;AAClBK,IAAAA,KAAK,EAAAkC,cAAA,CAAA;AACHC,MAAAA,QAAQ,EAAEzB,QAAQ;AAClBtC,MAAAA,GAAG,EAAEwC,CAAC,KAAA,IAAA,IAADA,CAAC,KAADA,KAAAA,CAAAA,GAAAA,CAAC,GAAI,CAAC;AACXrC,MAAAA,IAAI,EAAEoC,CAAC,KAAA,IAAA,IAADA,CAAC,KAADA,KAAAA,CAAAA,GAAAA,CAAC,GAAI,CAAC;AACZyB,MAAAA,UAAU,EAAEzB,CAAC,IAAI,IAAI,GAAG,QAAQ,GAAG,SAAA;AAAS,KAAA,EACzCX,KAAK,CACR;AACFb,IAAAA,UAAU,EAAEqB,SAAAA;GAEZkB,CAAAA,eAAAA,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AACEjC,IAAAA,GAAG,EAAE6B,QAAS;AACdxB,IAAAA,SAAS,EAAG,CAAA,EAAER,gBAAgB,CAACQ,SAAU,CAAS,OAAA,CAAA;AAClDC,IAAAA,KAAK,EAAE;MACLzB,IAAI,EAAEwC,MAAM,IAAI,IAAI,GAAI,CAAEA,EAAAA,MAAO,CAAG,EAAA,CAAA,GAAG,EAAE;MACzC3C,GAAG,EAAE4C,MAAM,IAAI,IAAI,GAAI,CAAEA,EAAAA,MAAO,CAAG,EAAA,CAAA,GAAG,EAAE;AACxC,MAAA,CAACQ,UAAU,GAAI,MAAA;AACjB,KAAA;AAAE,GACH,CAAC,eACFE,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAK5B,IAAAA,SAAS,EAAG,CAAA,EAAER,gBAAgB,CAACQ,SAAU,CAAA,OAAA,CAAA;GAAWD,EAAAA,QAAc,CACjD,CAEZ,CAAC,CAAA;AAErB,CAAC,EAAC;AACFP,gBAAgB,CAACQ,SAAS,GAAGT,SAAS,CAAA;AACtCC,gBAAgB,CAAC8C,WAAW,GAAGhD,cAAc;;;;"}

package/_internal/ToggletipTrigger.js

@@ -53,11 +53,11 @@ const ToggletipTrigger = /*#__PURE__*/forwardRef((props, ref) => {
       type: "button",
       "aria-expanded": isOpen,
       onClick: undefined,
-      onKeyDown: e => {
-        if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar' || e.code === 'Space') {
-          e.preventDefault();
+      onKeyDown: event => {
+        if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar' || event.code === 'Space') {
+          event.preventDefault();
           if (props.onClick) {
-            props.onClick(e);
+            props.onClick(event);
           } else {
             handleOpen(!isOpen);
           }

package/_internal/ToggletipTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggletipTrigger.js","sources":["../../src/components/toggletip-trigger/styles.ts","../../src/components/toggletip-trigger/ToggletipTrigger.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledToggletipTriggerProps } from './types';\nimport { focusRing } from '@redsift/design-system';\n\n/**\n * Component style.\n */\nexport const StyledToggletipTrigger = styled.button<StyledToggletipTriggerProps>`\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  font: inherit;\n  color: inherit;\n  text-decoration: inherit;\n  cursor: default;\n  display: inline-flex;\n\n  ${focusRing}\n`;\n","import React, { forwardRef, ReactElement } from 'react';\nimport { useMergeRefs } from '@floating-ui/react';\n\nimport { Comp } from '@redsift/design-system';\nimport { useToggletipContext } from '../toggletip';\nimport { ToggletipTriggerProps } from './types';\nimport classNames from 'classnames';\nimport { StyledToggletipTrigger } from './styles';\n\nconst COMPONENT_NAME = 'ToggletipTrigger';\nconst CLASSNAME = 'redsift-toggletip-trigger';\n\n/**\n * The ToggletipTrigger component.\n */\nexport const ToggletipTrigger: Comp<ToggletipTriggerProps, HTMLButtonElement> = forwardRef((props, ref) => {\n  const { children } = props;\n\n  const { getReferenceProps, isOpen, handleOpen, refs, toggletipId, triggerClassName, color } = useToggletipContext();\n  const childrenRef = (children as any).ref;\n  const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);\n\n  if (React.isValidElement(children)) {\n    return (\n      <StyledToggletipTrigger\n        {...getReferenceProps({\n          ref: triggerRef,\n          ...props,\n          'aria-describedby': toggletipId,\n        })}\n        type=\"button\"\n        aria-expanded={isOpen}\n        onClick={undefined}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter' || e.key === ' ' || e.key === 'Spacebar' || e.code === 'Space') {\n            e.preventDefault();\n            if (props.onClick) {\n              props.onClick(e as never);\n            } else {\n              handleOpen(!isOpen);\n            }\n          }\n        }}\n        className={classNames(triggerClassName)}\n      >\n        {React.cloneElement(children as ReactElement, {\n          ...children.props,\n          isActive: isOpen,\n          color: color ?? children.props.color,\n        })}\n      </StyledToggletipTrigger>\n    );\n  }\n\n  return null;\n});\nToggletipTrigger.className = CLASSNAME;\nToggletipTrigger.displayName = COMPONENT_NAME;\n"],"names":["StyledToggletipTrigger","styled","button","focusRing","COMPONENT_NAME","CLASSNAME","ToggletipTrigger","forwardRef","props","ref","children","getReferenceProps","isOpen","handleOpen","refs","toggletipId","triggerClassName","color","useToggletipContext","childrenRef","triggerRef","useMergeRefs","setReference","React","isValidElement","createElement","_extends","_objectSpread","type","onClick","undefined","onKeyDown","e","key","code","preventDefault","className","classNames","cloneElement","isActive","displayName"],"mappings":";;;;;;;;AAIA;AACA;AACA;AACO,MAAMA,sBAAsB,GAAGC,MAAM,CAACC,MAAoC,CAAA;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,SAAU,CAAA;AACd,CAAC;;ACVD,MAAMC,cAAc,GAAG,kBAAkB,CAAA;AACzC,MAAMC,SAAS,GAAG,2BAA2B,CAAA;;AAE7C;AACA;AACA;AACO,MAAMC,gBAAgE,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACzG,MAAM;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAGF,KAAK,CAAA;EAE1B,MAAM;IAAEG,iBAAiB;IAAEC,MAAM;IAAEC,UAAU;IAAEC,IAAI;IAAEC,WAAW;IAAEC,gBAAgB;AAAEC,IAAAA,KAAAA;GAAO,GAAGC,mBAAmB,EAAE,CAAA;AACnH,EAAA,MAAMC,WAAW,GAAIT,QAAQ,CAASD,GAAG,CAAA;AACzC,EAAA,MAAMW,UAAU,GAAGC,YAAY,CAAC,CAACP,IAAI,CAACQ,YAAY,EAAEb,GAAG,EAAEU,WAAW,CAAC,CAAC,CAAA;AAEtE,EAAA,kBAAII,KAAK,CAACC,cAAc,CAACd,QAAQ,CAAC,EAAE;AAClC,IAAA,oBACEa,KAAA,CAAAE,aAAA,CAACzB,sBAAsB,EAAA0B,QAAA,CAAA,EAAA,EACjBf,iBAAiB,CAAAgB,cAAA,CAAAA,cAAA,CAAA;AACnBlB,MAAAA,GAAG,EAAEW,UAAAA;AAAU,KAAA,EACZZ,KAAK,CAAA,EAAA,EAAA,EAAA;AACR,MAAA,kBAAkB,EAAEO,WAAAA;AAAW,KAAA,CAChC,CAAC,EAAA;AACFa,MAAAA,IAAI,EAAC,QAAQ;AACb,MAAA,eAAA,EAAehB,MAAO;AACtBiB,MAAAA,OAAO,EAAEC,SAAU;MACnBC,SAAS,EAAGC,CAAC,IAAK;QAChB,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAID,CAAC,CAACC,GAAG,KAAK,GAAG,IAAID,CAAC,CAACC,GAAG,KAAK,UAAU,IAAID,CAAC,CAACE,IAAI,KAAK,OAAO,EAAE;UACpFF,CAAC,CAACG,cAAc,EAAE,CAAA;UAClB,IAAI3B,KAAK,CAACqB,OAAO,EAAE;AACjBrB,YAAAA,KAAK,CAACqB,OAAO,CAACG,CAAU,CAAC,CAAA;AAC3B,WAAC,MAAM;YACLnB,UAAU,CAAC,CAACD,MAAM,CAAC,CAAA;AACrB,WAAA;AACF,SAAA;OACA;MACFwB,SAAS,EAAEC,UAAU,CAACrB,gBAAgB,CAAA;AAAE,KAAA,CAAA,eAEvCO,KAAK,CAACe,YAAY,CAAC5B,QAAQ,EAAAiB,cAAA,CAAAA,cAAA,CAAA,EAAA,EACvBjB,QAAQ,CAACF,KAAK,CAAA,EAAA,EAAA,EAAA;AACjB+B,MAAAA,QAAQ,EAAE3B,MAAM;MAChBK,KAAK,EAAEA,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,KAAA,CAAA,GAALA,KAAK,GAAIP,QAAQ,CAACF,KAAK,CAACS,KAAAA;AAAK,KAAA,CACrC,CACqB,CAAC,CAAA;AAE7B,GAAA;AAEA,EAAA,OAAO,IAAI,CAAA;AACb,CAAC,EAAC;AACFX,gBAAgB,CAAC8B,SAAS,GAAG/B,SAAS,CAAA;AACtCC,gBAAgB,CAACkC,WAAW,GAAGpC,cAAc;;;;"}
+{"version":3,"file":"ToggletipTrigger.js","sources":["../../src/components/toggletip-trigger/styles.ts","../../src/components/toggletip-trigger/ToggletipTrigger.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledToggletipTriggerProps } from './types';\nimport { focusRing } from '@redsift/design-system';\n\n/**\n * Component style.\n */\nexport const StyledToggletipTrigger = styled.button<StyledToggletipTriggerProps>`\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  font: inherit;\n  color: inherit;\n  text-decoration: inherit;\n  cursor: default;\n  display: inline-flex;\n\n  ${focusRing}\n`;\n","import React, { forwardRef, ReactElement } from 'react';\nimport { useMergeRefs } from '@floating-ui/react';\n\nimport { Comp } from '@redsift/design-system';\nimport { useToggletipContext } from '../toggletip';\nimport { ToggletipTriggerProps } from './types';\nimport classNames from 'classnames';\nimport { StyledToggletipTrigger } from './styles';\n\nconst COMPONENT_NAME = 'ToggletipTrigger';\nconst CLASSNAME = 'redsift-toggletip-trigger';\n\n/**\n * The ToggletipTrigger component.\n */\nexport const ToggletipTrigger: Comp<ToggletipTriggerProps, HTMLButtonElement> = forwardRef((props, ref) => {\n  const { children } = props;\n\n  const { getReferenceProps, isOpen, handleOpen, refs, toggletipId, triggerClassName, color } = useToggletipContext();\n  const childrenRef = (children as any).ref;\n  const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);\n\n  if (React.isValidElement(children)) {\n    return (\n      <StyledToggletipTrigger\n        {...getReferenceProps({\n          ref: triggerRef,\n          ...props,\n          'aria-describedby': toggletipId,\n        })}\n        type=\"button\"\n        aria-expanded={isOpen}\n        onClick={undefined}\n        onKeyDown={(event: React.KeyboardEvent<HTMLButtonElement>) => {\n          if (event.key === 'Enter' || event.key === ' ' || event.key === 'Spacebar' || event.code === 'Space') {\n            event.preventDefault();\n            if (props.onClick) {\n              props.onClick(event as never);\n            } else {\n              handleOpen(!isOpen);\n            }\n          }\n        }}\n        className={classNames(triggerClassName)}\n      >\n        {React.cloneElement(children as ReactElement, {\n          ...children.props,\n          isActive: isOpen,\n          color: color ?? children.props.color,\n        })}\n      </StyledToggletipTrigger>\n    );\n  }\n\n  return null;\n});\nToggletipTrigger.className = CLASSNAME;\nToggletipTrigger.displayName = COMPONENT_NAME;\n"],"names":["StyledToggletipTrigger","styled","button","focusRing","COMPONENT_NAME","CLASSNAME","ToggletipTrigger","forwardRef","props","ref","children","getReferenceProps","isOpen","handleOpen","refs","toggletipId","triggerClassName","color","useToggletipContext","childrenRef","triggerRef","useMergeRefs","setReference","React","isValidElement","createElement","_extends","_objectSpread","type","onClick","undefined","onKeyDown","event","key","code","preventDefault","className","classNames","cloneElement","isActive","displayName"],"mappings":";;;;;;;;AAIA;AACA;AACA;AACO,MAAMA,sBAAsB,GAAGC,MAAM,CAACC,MAAoC,CAAA;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,SAAU,CAAA;AACd,CAAC;;ACVD,MAAMC,cAAc,GAAG,kBAAkB,CAAA;AACzC,MAAMC,SAAS,GAAG,2BAA2B,CAAA;;AAE7C;AACA;AACA;AACO,MAAMC,gBAAgE,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EACzG,MAAM;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAGF,KAAK,CAAA;EAE1B,MAAM;IAAEG,iBAAiB;IAAEC,MAAM;IAAEC,UAAU;IAAEC,IAAI;IAAEC,WAAW;IAAEC,gBAAgB;AAAEC,IAAAA,KAAAA;GAAO,GAAGC,mBAAmB,EAAE,CAAA;AACnH,EAAA,MAAMC,WAAW,GAAIT,QAAQ,CAASD,GAAG,CAAA;AACzC,EAAA,MAAMW,UAAU,GAAGC,YAAY,CAAC,CAACP,IAAI,CAACQ,YAAY,EAAEb,GAAG,EAAEU,WAAW,CAAC,CAAC,CAAA;AAEtE,EAAA,kBAAII,KAAK,CAACC,cAAc,CAACd,QAAQ,CAAC,EAAE;AAClC,IAAA,oBACEa,KAAA,CAAAE,aAAA,CAACzB,sBAAsB,EAAA0B,QAAA,CAAA,EAAA,EACjBf,iBAAiB,CAAAgB,cAAA,CAAAA,cAAA,CAAA;AACnBlB,MAAAA,GAAG,EAAEW,UAAAA;AAAU,KAAA,EACZZ,KAAK,CAAA,EAAA,EAAA,EAAA;AACR,MAAA,kBAAkB,EAAEO,WAAAA;AAAW,KAAA,CAChC,CAAC,EAAA;AACFa,MAAAA,IAAI,EAAC,QAAQ;AACb,MAAA,eAAA,EAAehB,MAAO;AACtBiB,MAAAA,OAAO,EAAEC,SAAU;MACnBC,SAAS,EAAGC,KAA6C,IAAK;QAC5D,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAID,KAAK,CAACC,GAAG,KAAK,GAAG,IAAID,KAAK,CAACC,GAAG,KAAK,UAAU,IAAID,KAAK,CAACE,IAAI,KAAK,OAAO,EAAE;UACpGF,KAAK,CAACG,cAAc,EAAE,CAAA;UACtB,IAAI3B,KAAK,CAACqB,OAAO,EAAE;AACjBrB,YAAAA,KAAK,CAACqB,OAAO,CAACG,KAAc,CAAC,CAAA;AAC/B,WAAC,MAAM;YACLnB,UAAU,CAAC,CAACD,MAAM,CAAC,CAAA;AACrB,WAAA;AACF,SAAA;OACA;MACFwB,SAAS,EAAEC,UAAU,CAACrB,gBAAgB,CAAA;AAAE,KAAA,CAAA,eAEvCO,KAAK,CAACe,YAAY,CAAC5B,QAAQ,EAAAiB,cAAA,CAAAA,cAAA,CAAA,EAAA,EACvBjB,QAAQ,CAACF,KAAK,CAAA,EAAA,EAAA,EAAA;AACjB+B,MAAAA,QAAQ,EAAE3B,MAAM;MAChBK,KAAK,EAAEA,KAAK,KAAA,IAAA,IAALA,KAAK,KAAA,KAAA,CAAA,GAALA,KAAK,GAAIP,QAAQ,CAACF,KAAK,CAACS,KAAAA;AAAK,KAAA,CACrC,CACqB,CAAC,CAAA;AAE7B,GAAA;AAEA,EAAA,OAAO,IAAI,CAAA;AACb,CAAC,EAAC;AACFX,gBAAgB,CAAC8B,SAAS,GAAG/B,SAAS,CAAA;AACtCC,gBAAgB,CAACkC,WAAW,GAAGpC,cAAc;;;;"}

package/_internal/types.js

@@ -1,7 +1,7 @@
 import { b as _extends, _ as _objectSpread2 } from './_rollupPluginBabelHelpers.js';
 import React, { forwardRef, useContext } from 'react';
 import { useMergeRefs, FloatingPortal } from '@floating-ui/react';
-import { baseContainer, Theme, AppContainerContext, useTheme } from '@redsift/design-system';
+import { baseContainer, Theme, getContainerStylingTransientProps, AppContainerContext, useTheme } from '@redsift/design-system';
 import styled, { css } from 'styled-components';
 import classNames from 'classnames';
 import { u as useTooltipContext } from './useTooltipContext.js';
@@ -134,12 +134,16 @@ const CLASSNAME = 'redsift-tooltip-content';
  * The TooltipContent component.
  */
 const TooltipContent = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    transientProps,
+    otherProps
+  } = getContainerStylingTransientProps(props);
   const {
     children,
     className,
     style,
     theme: propsTheme
-  } = props;
+  } = otherProps;
   const appContainerState = useContext(AppContainerContext);
   const {
     getFloatingProps,
@@ -173,7 +177,7 @@ const TooltipContent = /*#__PURE__*/forwardRef((props, ref) => {
     className: classNames(TooltipContent.className, className),
     ref: popoverRef,
     $theme: theme
-  }, getFloatingProps(props), {
+  }, getFloatingProps(otherProps), transientProps, {
     style: _objectSpread2({
       position: strategy,
       top: y !== null && y !== void 0 ? y : 0,