@ntbjs/react-components 2.0.14 → 3.0.0-rc.2

package/build/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.js

@@ -1,9 +1,8 @@
-import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from 'prop-types';
 import { AssetPreviewTopBar as AssetPreviewTopBar$1, BackButtonContainer, BackHoverEffect, LeftText, ButtonsContainer } from './AssetPreviewTopBar.styled.js';
 import { ReactComponent as SvgArrowBack } from '../../../icons/arrow-back.svg.js';
 import { ReactComponent as SvgClose } from '../../../icons/close.svg.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 const AssetPreviewTopBar = React__default.forwardRef(function AssetPreviewTopBar({
   onBackButtonClick,
@@ -16,29 +15,29 @@ const AssetPreviewTopBar = React__default.forwardRef(function AssetPreviewTopBar
   disabled,
   ...props
 }, forwardedRef) {
-  return React__default.createElement(AssetPreviewTopBar$1, _extends({
+  return jsxs(AssetPreviewTopBar$1, {
     ref: forwardedRef,
     $shadow: shadow,
     $border: border,
-    disabled: disabled
-  }, props), React__default.createElement(BackButtonContainer, {
-    onClick: onBackButtonClick,
-    disabled: disabled
-  }, backButtonAsClose ? React__default.createElement(React__default.Fragment, null, React__default.createElement(SvgClose, null), backButtonText) : React__default.createElement(BackHoverEffect, null, React__default.createElement(SvgArrowBack, null), backButtonText)), leftText && React__default.createElement(LeftText, null, leftText), Array.isArray(buttons) && React__default.createElement(ButtonsContainer, null, buttons.map((button, index) => React__default.createElement("span", {
-    key: 'topBarButton-' + index
-  }, button))));
+    disabled: disabled,
+    ...props,
+    children: [jsx(BackButtonContainer, {
+      onClick: onBackButtonClick,
+      disabled: disabled,
+      children: backButtonAsClose ? jsxs(Fragment, {
+        children: [jsx(SvgClose, {}), backButtonText]
+      }) : jsxs(BackHoverEffect, {
+        children: [jsx(SvgArrowBack, {}), backButtonText]
+      })
+    }), leftText && jsx(LeftText, {
+      children: leftText
+    }), Array.isArray(buttons) && jsx(ButtonsContainer, {
+      children: buttons.map((button, index) => jsx("span", {
+        children: button
+      }, 'topBarButton-' + index))
+    })]
+  });
 });
-AssetPreviewTopBar.propTypes = process.env.NODE_ENV !== "production" ? {
-  onBackButtonClick: PropTypes.func.isRequired,
-  backButtonText: PropTypes.string.isRequired,
-  disabled: PropTypes.bool,
-  backButtonAsClose: PropTypes.bool,
-  leftText: PropTypes.string,
-  shadow: PropTypes.bool,
-  border: PropTypes.bool,
-  buttons: PropTypes.arrayOf(PropTypes.node)
-} : {};
-AssetPreviewTopBar.defaultProps = {};
 
 export { AssetPreviewTopBar as default };
 //# sourceMappingURL=AssetPreviewTopBar.js.map

package/build/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetPreviewTopBar.js","sources":["../../../../src/components/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './AssetPreviewTopBar.styled';\n\nimport { ReactComponent as IconArrowBack } from '../../../../icons/arrow-back.svg';\nimport { ReactComponent as IconClose } from '../../../../icons/close.svg';\n\n/**\n * Top bar for asset preview.\n *\n * ### Import\n *\n * ``` js\n * import { AssetPreviewTopBar } from '@ntbjs/react-components/widgets'\n * // or\n * import AssetPreviewTopBar from '@ntbjs/react-components/AssetPreview/AssetPreviewTopBar'\n * ```\n * \n * ### Usage example\n * \n * ``` js\nconst button1 = <ActionButton key=\"btn1\"icon={<IconAddCircle />} />;\nconst button2 = <Button key=\"btn2\" secondary={true}>Edit</Button>;\nconst button3 = <Button key=\"btn3\" secondary={true}>Share</Button>;\nconst button4 = <Button key=\"btn4\">Download</Button>;\n\nconst topBar = <AssetPreviewTopBar backButtonText={t{\"Back\"}} onBackButtonClick={() => {}} buttons={[button1, button2, button3, button4]} />;\n * ```\n */\nconst AssetPreviewTopBar = React.forwardRef(function AssetPreviewTopBar(\n  {\n    onBackButtonClick,\n    backButtonText,\n    backButtonAsClose,\n    leftText,\n    buttons,\n    shadow,\n    border,\n    disabled,\n    ...props\n  },\n  forwardedRef\n) {\n  return (\n    <S.AssetPreviewTopBar\n      ref={forwardedRef}\n      $shadow={shadow}\n      $border={border}\n      disabled={disabled}\n      {...props}\n    >\n      <S.BackButtonContainer onClick={onBackButtonClick} disabled={disabled}>\n        {backButtonAsClose ? (\n          <>\n            <IconClose />\n            {backButtonText}\n          </>\n        ) : (\n          <S.BackHoverEffect>\n            <IconArrowBack />\n            {backButtonText}\n          </S.BackHoverEffect>\n        )}\n      </S.BackButtonContainer>\n      {leftText && <S.LeftText>{leftText}</S.LeftText>}\n      {Array.isArray(buttons) && (\n        <S.ButtonsContainer>\n          {buttons.map((button, index) => (\n            <span key={'topBarButton-' + index}>{button}</span>\n          ))}\n        </S.ButtonsContainer>\n      )}\n    </S.AssetPreviewTopBar>\n  );\n});\n\nAssetPreviewTopBar.propTypes = {\n  /**\n   * On-click function for the back button\n   */\n  onBackButtonClick: PropTypes.func.isRequired,\n\n  /**\n   * Translatable text for the back button\n   */\n  backButtonText: PropTypes.string.isRequired,\n\n  /**\n   * Disable the back button\n   */\n  disabled: PropTypes.bool,\n\n  /**\n   * Display the back button as an X instead of an arrow\n   */\n  backButtonAsClose: PropTypes.bool,\n\n  /**\n   * Text to be displayed grayed out after the \"Back\" text – e.g. \"Asset selected\" in gallery\n   */\n  leftText: PropTypes.string,\n\n  /**\n   * Add a shadow on the bottom border of the top bar – e.g. in gallery view\n   */\n  shadow: PropTypes.bool,\n  /**\n   * Add a border on the bottom of the top bar\n   */\n  border: PropTypes.bool,\n\n  /**\n   * `Array` of buttons to be placed on the right side of the top bar\n   */\n  buttons: PropTypes.arrayOf(PropTypes.node)\n};\n\nAssetPreviewTopBar.defaultProps = {};\n\nexport default AssetPreviewTopBar;\n"],"names":["AssetPreviewTopBar","React","forwardRef","onBackButtonClick","backButtonText","backButtonAsClose","leftText","buttons","shadow","border","disabled","props","forwardedRef","createElement","S","_extends","ref","$shadow","$border","onClick","Fragment","IconClose","IconArrowBack","Array","isArray","map","button","index","key","propTypes","process","env","NODE_ENV","PropTypes","func","isRequired","string","bool","arrayOf","node","defaultProps"],"mappings":";;;;;;;AA6BMA,MAAAA,kBAAkB,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,kBAAkBA,CACrE;EACEG,iBAAiB;EACjBC,cAAc;EACdC,iBAAiB;EACjBC,QAAQ;EACRC,OAAO;EACPC,MAAM;EACNC,MAAM;EACNC,QAAQ;EACR,GAAGC,KAAAA;AACL,CAAC,EACDC,YAAY,EACZ;EACA,OACEX,cAAA,CAAAY,aAAA,CAACC,oBAAoB,EAAAC,QAAA,CAAA;AACnBC,IAAAA,GAAG,EAAEJ,YAAa;AAClBK,IAAAA,OAAO,EAAET,MAAO;AAChBU,IAAAA,OAAO,EAAET,MAAO;AAChBC,IAAAA,QAAQ,EAAEA,QAAAA;GACNC,EAAAA,KAAK,GAETV,cAAA,CAAAY,aAAA,CAACC,mBAAqB,EAAA;AAACK,IAAAA,OAAO,EAAEhB,iBAAkB;AAACO,IAAAA,QAAQ,EAAEA,QAAAA;AAAS,GAAA,EACnEL,iBAAiB,GAChBJ,cAAA,CAAAY,aAAA,CAAAZ,cAAA,CAAAmB,QAAA,EAAA,IAAA,EACEnB,cAAA,CAAAY,aAAA,CAACQ,QAAS,EAAA,IAAE,CAAC,EACZjB,cACD,CAAC,GAEHH,cAAA,CAAAY,aAAA,CAACC,eAAiB,EAAA,IAAA,EAChBb,cAAA,CAAAY,aAAA,CAACS,YAAa,MAAE,CAAC,EAChBlB,cACgB,CAEA,CAAC,EACvBE,QAAQ,IAAIL,cAAA,CAAAY,aAAA,CAACC,QAAU,EAAER,IAAAA,EAAAA,QAAqB,CAAC,EAC/CiB,KAAK,CAACC,OAAO,CAACjB,OAAO,CAAC,IACrBN,cAAA,CAAAY,aAAA,CAACC,gBAAkB,QAChBP,OAAO,CAACkB,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK,KACzB1B,cAAA,CAAAY,aAAA,CAAA,MAAA,EAAA;IAAMe,GAAG,EAAE,eAAe,GAAGD,KAAAA;AAAM,GAAA,EAAED,MAAa,CACnD,CACiB,CAEF,CAAC,CAAA;AAE3B,CAAC,EAAC;AAEF1B,kBAAkB,CAAC6B,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;AAI7B7B,EAAAA,iBAAiB,EAAE8B,SAAS,CAACC,IAAI,CAACC,UAAU;AAK5C/B,EAAAA,cAAc,EAAE6B,SAAS,CAACG,MAAM,CAACD,UAAU;EAK3CzB,QAAQ,EAAEuB,SAAS,CAACI,IAAI;EAKxBhC,iBAAiB,EAAE4B,SAAS,CAACI,IAAI;EAKjC/B,QAAQ,EAAE2B,SAAS,CAACG,MAAM;EAK1B5B,MAAM,EAAEyB,SAAS,CAACI,IAAI;EAItB5B,MAAM,EAAEwB,SAAS,CAACI,IAAI;AAKtB9B,EAAAA,OAAO,EAAE0B,SAAS,CAACK,OAAO,CAACL,SAAS,CAACM,IAAI,CAAA;AAC3C,CAAC,GAAA,EAAA,CAAA;AAEDvC,kBAAkB,CAACwC,YAAY,GAAG,EAAE;;;;"}
+{"version":3,"file":"AssetPreviewTopBar.js","sources":["../../../../src/components/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.tsx"],"sourcesContent":["import React from 'react';\nimport * as S from './AssetPreviewTopBar.styled';\n\nimport { ReactComponent as IconArrowBack } from '../../../../icons/arrow-back.svg';\nimport { ReactComponent as IconClose } from '../../../../icons/close.svg';\n\ntype AssetPreviewTopBarOwnProps = {\n  /**\n   * On-click function for the back button\n   */\n  onBackButtonClick: (...args: any[]) => any;\n  /**\n   * Translatable text for the back button\n   */\n  backButtonText: string;\n  /**\n   * Disable the back button\n   */\n  disabled?: boolean;\n  /**\n   * Display the back button as an X instead of an arrow\n   */\n  backButtonAsClose?: boolean;\n  /**\n   * Text to be displayed grayed out after the \"Back\" text – e.g. \"Asset selected\" in gallery\n   */\n  leftText?: string;\n  /**\n   * Add a shadow on the bottom border of the top bar – e.g. in gallery view\n   */\n  shadow?: boolean;\n  /**\n   * Add a border on the bottom of the top bar\n   */\n  border?: boolean;\n  /**\n   * `Array` of buttons to be placed on the right side of the top bar\n   */\n  buttons?: React.ReactNode[];\n};\n\n// Omit before & — a bare intersection narrows colliding props instead of overriding them.\ntype Props = Omit<\n  React.ComponentPropsWithoutRef<typeof S.AssetPreviewTopBar>,\n  keyof AssetPreviewTopBarOwnProps\n> &\n  AssetPreviewTopBarOwnProps;\n\n/**\n * Top bar for asset preview.\n *\n * ### Import\n *\n * ``` js\n * import { AssetPreviewTopBar } from '@ntbjs/react-components/widgets'\n * // or\n * import AssetPreviewTopBar from '@ntbjs/react-components/AssetPreview/AssetPreviewTopBar'\n * ```\n * \n * ### Usage example\n * \n * ``` js\nconst button1 = <ActionButton key=\"btn1\"icon={<IconAddCircle />} />;\nconst button2 = <Button key=\"btn2\" secondary={true}>Edit</Button>;\nconst button3 = <Button key=\"btn3\" secondary={true}>Share</Button>;\nconst button4 = <Button key=\"btn4\">Download</Button>;\n\nconst topBar = <AssetPreviewTopBar backButtonText={t{\"Back\"}} onBackButtonClick={() => {}} buttons={[button1, button2, button3, button4]} />;\n * ```\n */\nconst AssetPreviewTopBar = React.forwardRef<any, Props>(function AssetPreviewTopBar(\n  {\n    onBackButtonClick,\n    backButtonText,\n    backButtonAsClose,\n    leftText,\n    buttons,\n    shadow,\n    border,\n    disabled,\n    ...props\n  },\n  forwardedRef\n) {\n  return (\n    <S.AssetPreviewTopBar\n      ref={forwardedRef}\n      $shadow={shadow}\n      $border={border}\n      disabled={disabled}\n      {...props}\n    >\n      <S.BackButtonContainer onClick={onBackButtonClick} disabled={disabled}>\n        {backButtonAsClose ? (\n          <>\n            <IconClose />\n            {backButtonText}\n          </>\n        ) : (\n          <S.BackHoverEffect>\n            <IconArrowBack />\n            {backButtonText}\n          </S.BackHoverEffect>\n        )}\n      </S.BackButtonContainer>\n      {leftText && <S.LeftText>{leftText}</S.LeftText>}\n      {Array.isArray(buttons) && (\n        <S.ButtonsContainer>\n          {buttons.map((button, index) => (\n            <span key={'topBarButton-' + index}>{button}</span>\n          ))}\n        </S.ButtonsContainer>\n      )}\n    </S.AssetPreviewTopBar>\n  );\n});\n\nexport default AssetPreviewTopBar;\n"],"names":["AssetPreviewTopBar","React","forwardRef","onBackButtonClick","backButtonText","backButtonAsClose","leftText","buttons","shadow","border","disabled","props","forwardedRef","_jsxs","S","ref","$shadow","$border","children","_jsx","onClick","_Fragment","IconClose","IconArrowBack","Array","isArray","map","button","index"],"mappings":";;;;;;AAsEA,MAAMA,kBAAkB,GAAGC,cAAK,CAACC,UAAU,CAAa,SAASF,kBAAkBA,CACjF;EACEG,iBAAiB;EACjBC,cAAc;EACdC,iBAAiB;EACjBC,QAAQ;EACRC,OAAO;EACPC,MAAM;EACNC,MAAM;EACNC,QAAQ;EACR,GAAGC;AACL,CAAC,EACDC,YAAY,EACZ;AACA,EAAA,OACEC,IAAA,CAACC,oBAAoB,EAAA;AACnBC,IAAAA,GAAG,EAAEH,YAAa;AAClBI,IAAAA,OAAO,EAAER,MAAO;AAChBS,IAAAA,OAAO,EAAER,MAAO;AAChBC,IAAAA,QAAQ,EAAEA,QAAS;AAAA,IAAA,GACfC,KAAK;AAAAO,IAAAA,QAAA,EAAA,CAETC,GAAA,CAACL,mBAAqB,EAAA;AAACM,MAAAA,OAAO,EAAEjB,iBAAkB;AAACO,MAAAA,QAAQ,EAAEA,QAAS;AAAAQ,MAAAA,QAAA,EACnEb,iBAAiB,GAChBQ,IAAA,CAAAQ,QAAA,EAAA;AAAAH,QAAAA,QAAA,GACEC,GAAA,CAACG,QAAS,EAAA,EAAE,CAAC,EACZlB,cAAc;AAAA,OACf,CAAC,GAEHS,IAAA,CAACC,eAAiB,EAAA;AAAAI,QAAAA,QAAA,GAChBC,GAAA,CAACI,YAAa,EAAA,EAAE,CAAC,EAChBnB,cAAc;OACE;KAEA,CAAC,EACvBE,QAAQ,IAAIa,GAAA,CAACL,QAAU,EAAA;AAAAI,MAAAA,QAAA,EAAEZ;AAAQ,KAAa,CAAC,EAC/CkB,KAAK,CAACC,OAAO,CAAClB,OAAO,CAAC,IACrBY,GAAA,CAACL,gBAAkB,EAAA;MAAAI,QAAA,EAChBX,OAAO,CAACmB,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK,KACzBT,GAAA,CAAA,MAAA,EAAA;AAAAD,QAAAA,QAAA,EAAqCS;OAAM,EAAhC,eAAe,GAAGC,KAAqB,CACnD;AAAC,KACgB,CACrB;AAAA,GACmB,CAAC;AAE3B,CAAC;;;;"}

package/build/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.styled.js

@@ -6,83 +6,32 @@ const shouldForwardProp = prop => {
 };
 const AssetPreviewTopBar = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  box-sizing: border-box;
-  align-items: center;
-  border-bottom: ${props => props.$border ? `1px solid` : `none`};
-  color: inherit;
-  display: flex;
-  font-family: ${props => props.theme.primaryFontFamily};
-  font-weight: 400;
-  min-height: 72px;
-  padding: 0 24px;
-  width: 100%;
-
-  ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200'))}
-
-  ${props => props.$shadow && props.theme.themeProp('box-shadow', '0 -2px 12px #505050', '0 -3px 12px #b0b6b9')}
-
-      ${props => props.disabled && css`
-          cursor: not-allowed;
-        `}
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "AssetPreviewTopBarstyled__AssetPreviewTopBar",
+  componentId: "sc-176gs3e-0"
+})(["box-sizing:border-box;align-items:center;border-bottom:", ";color:inherit;display:flex;font-family:", ";font-weight:400;min-height:72px;padding:0 24px;width:100%;", " ", " ", ""], props => props.$border ? `1px solid` : `none`, props => props.theme.primaryFontFamily, props => props.theme.themeProp('border-color', props.theme.getColor('gray-800'), props.theme.getColor('gray-200')), props => props.$shadow && props.theme.themeProp('box-shadow', '0 -2px 12px #505050', '0 -3px 12px #b0b6b9'), props => props.disabled && css(["cursor:not-allowed;"]));
 const BackButtonContainer = styled.a.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  align-items: center;
-  display: flex;
-  font-size: 1.125rem;
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900'))};
-
-  ${props => props.disabled && css`
-      opacity: 0.5;
-      pointer-events: none;
-    `}
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  > svg {
-    height: 24px;
-    margin-right: 16px;
-    width: 24px;
-  }
-`;
-const BackHoverEffect = styled.div`
-  display: inline-flex;
-  align-items: center;
-
-  > svg {
-    height: 24px;
-    margin-right: 16px;
-    width: 24px;
-    transition: transform 0.3s ease-in-out;
-  }
-
-  &:hover > svg {
-    transform: translateX(-2px);
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "AssetPreviewTopBarstyled__BackButtonContainer",
+  componentId: "sc-176gs3e-1"
+})(["align-items:center;display:flex;font-size:1.125rem;", ";", " &:hover{cursor:pointer;}> svg{height:24px;margin-right:16px;width:24px;}"], props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-900')), props => props.disabled && css(["opacity:0.5;pointer-events:none;"]));
+const BackHoverEffect = styled.div.withConfig({
+  displayName: "AssetPreviewTopBarstyled__BackHoverEffect",
+  componentId: "sc-176gs3e-2"
+})(["display:inline-flex;align-items:center;> svg{height:24px;margin-right:16px;width:24px;transition:transform 0.3s ease-in-out;}&:hover > svg{transform:translateX(-2px);}"]);
 const LeftText = styled.span.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  font-size: 1.125rem;
-  margin-left: 16px;
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400'))};
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "AssetPreviewTopBarstyled__LeftText",
+  componentId: "sc-176gs3e-3"
+})(["font-size:1.125rem;margin-left:16px;", ";"], props => props.theme.themeProp('color', props.theme.getColor('gray-500'), props.theme.getColor('gray-400')));
 const ButtonsContainer = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  align-items: center;
-  display: flex;
-  margin-left: auto;
-
-  > span {
-    margin-left: 16px;
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "AssetPreviewTopBarstyled__ButtonsContainer",
+  componentId: "sc-176gs3e-4"
+})(["align-items:center;display:flex;margin-left:auto;> span{margin-left:16px;}"]);
 
 export { AssetPreviewTopBar, BackButtonContainer, BackHoverEffect, ButtonsContainer, LeftText };
 //# sourceMappingURL=AssetPreviewTopBar.styled.js.map

package/build/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"AssetPreviewTopBar.styled.js","sources":["../../../../src/components/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const AssetPreviewTopBar = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  box-sizing: border-box;\n  align-items: center;\n  border-bottom: ${props => (props.$border ? `1px solid` : `none`)};\n  color: inherit;\n  display: flex;\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-weight: 400;\n  min-height: 72px;\n  padding: 0 24px;\n  width: 100%;\n\n  ${props =>\n    props.theme.themeProp(\n      'border-color',\n      props.theme.getColor('gray-800'),\n      props.theme.getColor('gray-200')\n    )}\n\n  ${props =>\n    props.$shadow &&\n    props.theme.themeProp('box-shadow', '0 -2px 12px #505050', '0 -3px 12px #b0b6b9')}\n\n      ${props =>\n        props.disabled &&\n        css`\n          cursor: not-allowed;\n        `}\n`;\n\nexport const BackButtonContainer = styled.a\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  align-items: center;\n  display: flex;\n  font-size: 1.125rem;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-900')\n    )};\n\n  ${props =>\n    props.disabled &&\n    css`\n      opacity: 0.5;\n      pointer-events: none;\n    `}\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  > svg {\n    height: 24px;\n    margin-right: 16px;\n    width: 24px;\n  }\n`;\n\nexport const BackHoverEffect = styled.div`\n  display: inline-flex;\n  align-items: center;\n\n  > svg {\n    height: 24px;\n    margin-right: 16px;\n    width: 24px;\n    transition: transform 0.3s ease-in-out;\n  }\n\n  &:hover > svg {\n    transform: translateX(-2px);\n  }\n`;\n\nexport const LeftText = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-size: 1.125rem;\n  margin-left: 16px;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-500'),\n      props.theme.getColor('gray-400')\n    )};\n`;\n\nexport const ButtonsContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  align-items: center;\n  display: flex;\n  margin-left: auto;\n\n  > span {\n    margin-left: 16px;\n  }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","AssetPreviewTopBar","styled","div","withConfig","attrs","applyDefaultTheme","props","$border","theme","primaryFontFamily","themeProp","getColor","$shadow","disabled","css","BackButtonContainer","a","BackHoverEffect","LeftText","span","ButtonsContainer"],"mappings":";;;AAGA,MAAMA,iBAAiB,GAAGC,IAAI,IAAI;EAChC,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC,CAAA;AAClD,CAAC,CAAA;AAEM,MAAMC,kBAAkB,GAAGC,MAAM,CAACC,GAAG,CACzCC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA,iBAAmBC,EAAAA,KAAK,IAAKA,KAAK,CAACC,OAAO,GAAG,CAAA,SAAA,CAAW,GAAG,CAAO,IAAA,CAAA,CAAA;AAClE;AACA;AACA,eAAA,EAAiBD,KAAK,IAAIA,KAAK,CAACE,KAAK,CAACC,iBAAiB,CAAA;AACvD;AACA;AACA;AACA;AACA;AACA,EAAIH,EAAAA,KAAK,IACLA,KAAK,CAACE,KAAK,CAACE,SAAS,CACnB,cAAc,EACdJ,KAAK,CAACE,KAAK,CAACG,QAAQ,CAAC,UAAU,CAAC,EAChCL,KAAK,CAACE,KAAK,CAACG,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACL;AACA,EAAA,EAAIL,KAAK,IACLA,KAAK,CAACM,OAAO,IACbN,KAAK,CAACE,KAAK,CAACE,SAAS,CAAC,YAAY,EAAE,qBAAqB,EAAE,qBAAqB,CAAC,CAAA;AACrF;AACA,MAAA,EAAQJ,KAAK,IACLA,KAAK,CAACO,QAAQ,IACdC,GAAG,CAAA;AACX;AACA,QAAS,CAAA,CAAA;AACT,EAAC;AAEM,MAAMC,mBAAmB,GAAGd,MAAM,CAACe,CAAC,CACxCb,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA,EAAIC,EAAAA,KAAK,IACLA,KAAK,CAACE,KAAK,CAACE,SAAS,CACnB,OAAO,EACPJ,KAAK,CAACE,KAAK,CAACG,QAAQ,CAAC,UAAU,CAAC,EAChCL,KAAK,CAACE,KAAK,CAACG,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACL;AACA,EAAA,EAAIL,KAAK,IACLA,KAAK,CAACO,QAAQ,IACdC,GAAG,CAAA;AACP;AACA;AACA,IAAK,CAAA,CAAA;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;AAEYG,MAAAA,eAAe,GAAGhB,MAAM,CAACC,GAAG,CAAA;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;AAEM,MAAMgB,QAAQ,GAAGjB,MAAM,CAACkB,IAAI,CAChChB,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA,EAAIC,EAAAA,KAAK,IACLA,KAAK,CAACE,KAAK,CAACE,SAAS,CACnB,OAAO,EACPJ,KAAK,CAACE,KAAK,CAACG,QAAQ,CAAC,UAAU,CAAC,EAChCL,KAAK,CAACE,KAAK,CAACG,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACL,EAAC;AAEM,MAAMS,gBAAgB,GAAGnB,MAAM,CAACC,GAAG,CACvCC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}
+{"version":3,"file":"AssetPreviewTopBar.styled.js","sources":["../../../../src/components/widgets/AssetPreview/AssetPreviewTopBar/AssetPreviewTopBar.styled.ts"],"sourcesContent":["// $-prefixed props are transient and never reach the DOM.\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../../utils/defaultTheme';\n\n/**\n * `disabled` — greys out the back button. Not transient; present in baseline as bare boolean attribute.\n */\ninterface AssetPreviewTopBarDisabledStyleProps {\n  disabled?: boolean;\n}\n\n/**\n * Props passed by `AssetPreviewTopBar.tsx` to `<S.AssetPreviewTopBar>`.\n */\nexport interface AssetPreviewTopBarStyleProps extends AssetPreviewTopBarDisabledStyleProps {\n  /** Swaps `border-bottom` between `1px solid` and `none`. */\n  $border?: boolean;\n  /** Shadow; evaluated as `props.$shadow && props.theme.themeProp(…)` to produce valid Interpolation. */\n  $shadow?: boolean;\n}\n\n// Single-argument to stay compatible with styled-components v5.1 and v6. Annotation required despite noImplicitAny being off.\nconst shouldForwardProp = (prop: string): boolean => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const AssetPreviewTopBar = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<AssetPreviewTopBarStyleProps>(applyDefaultTheme)`\n  box-sizing: border-box;\n  align-items: center;\n  border-bottom: ${props => (props.$border ? `1px solid` : `none`)};\n  color: inherit;\n  display: flex;\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-weight: 400;\n  min-height: 72px;\n  padding: 0 24px;\n  width: 100%;\n\n  ${props =>\n    props.theme.themeProp(\n      'border-color',\n      props.theme.getColor('gray-800'),\n      props.theme.getColor('gray-200')\n    )}\n\n  ${props =>\n    props.$shadow &&\n    props.theme.themeProp('box-shadow', '0 -2px 12px #505050', '0 -3px 12px #b0b6b9')}\n\n      ${props =>\n        props.disabled &&\n        css`\n          cursor: not-allowed;\n        `}\n`;\n\nexport const BackButtonContainer = styled.a\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<AssetPreviewTopBarDisabledStyleProps>(applyDefaultTheme)`\n  align-items: center;\n  display: flex;\n  font-size: 1.125rem;\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-900')\n    )};\n\n  ${props =>\n    props.disabled &&\n    css`\n      opacity: 0.5;\n      pointer-events: none;\n    `}\n\n  &:hover {\n    cursor: pointer;\n  }\n\n  > svg {\n    height: 24px;\n    margin-right: 16px;\n    width: 24px;\n  }\n`;\n\nexport const BackHoverEffect = styled.div`\n  display: inline-flex;\n  align-items: center;\n\n  > svg {\n    height: 24px;\n    margin-right: 16px;\n    width: 24px;\n    transition: transform 0.3s ease-in-out;\n  }\n\n  &:hover > svg {\n    transform: translateX(-2px);\n  }\n`;\n\nexport const LeftText = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-size: 1.125rem;\n  margin-left: 16px;\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-500'),\n      props.theme.getColor('gray-400')\n    )};\n`;\n\nexport const ButtonsContainer = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  align-items: center;\n  display: flex;\n  margin-left: auto;\n\n  > span {\n    margin-left: 16px;\n  }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","AssetPreviewTopBar","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","$border","theme","primaryFontFamily","themeProp","getColor","$shadow","disabled","css","BackButtonContainer","a","BackHoverEffect","LeftText","span","ButtonsContainer"],"mappings":";;;AAsBA,MAAMA,iBAAiB,GAAIC,IAAY,IAAc;EACnD,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC;AAClD,CAAC;AAEM,MAAMC,kBAAkB,GAAGC,MAAM,CAACC,GAAG,CACzCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAA+BC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,8CAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,yDAAA,EAAA,0CAAA,EAAA,6DAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EAGtCC,KAAK,IAAKA,KAAK,CAACC,OAAO,GAAG,CAAA,SAAA,CAAW,GAAG,CAAA,IAAA,CAAO,EAGjDD,KAAK,IAAIA,KAAK,CAACE,KAAK,CAACC,iBAAiB,EAMnDH,KAAK,IACLA,KAAK,CAACE,KAAK,CAACE,SAAS,CACnB,cAAc,EACdJ,KAAK,CAACE,KAAK,CAACG,QAAQ,CAAC,UAAU,CAAC,EAChCL,KAAK,CAACE,KAAK,CAACG,QAAQ,CAAC,UAAU,CACjC,CAAC,EAEDL,KAAK,IACLA,KAAK,CAACM,OAAO,IACbN,KAAK,CAACE,KAAK,CAACE,SAAS,CAAC,YAAY,EAAE,qBAAqB,EAAE,qBAAqB,CAAC,EAE7EJ,KAAK,IACLA,KAAK,CAACO,QAAQ,IACdC,GAAG,yBAEF;AAGF,MAAMC,mBAAmB,GAAGhB,MAAM,CAACiB,CAAC,CACxCf,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAAuCC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,+CAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,qDAAA,EAAA,GAAA,EAAA,2EAAA,CAAA,EAI7DC,KAAK,IACLA,KAAK,CAACE,KAAK,CAACE,SAAS,CACnB,OAAO,EACPJ,KAAK,CAACE,KAAK,CAACG,QAAQ,CAAC,UAAU,CAAC,EAChCL,KAAK,CAACE,KAAK,CAACG,QAAQ,CAAC,UAAU,CACjC,CAAC,EAEDL,KAAK,IACLA,KAAK,CAACO,QAAQ,IACdC,GAAG,sCAGF;MAaQG,eAAe,GAAGlB,MAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAG,WAAA,EAAA,2CAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,yKAAA,CAAA;AAgBlC,MAAMa,QAAQ,GAAGnB,MAAM,CAACoB,IAAI,CAChClB,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,oCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,sCAAA,EAAA,GAAA,CAAA,EAIvBC,KAAK,IACLA,KAAK,CAACE,KAAK,CAACE,SAAS,CACnB,OAAO,EACPJ,KAAK,CAACE,KAAK,CAACG,QAAQ,CAAC,UAAU,CAAC,EAChCL,KAAK,CAACE,KAAK,CAACG,QAAQ,CAAC,UAAU,CACjC,CAAC;AAGE,MAAMS,gBAAgB,GAAGrB,MAAM,CAACC,GAAG,CACvCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,4CAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,4EAAA,CAAA;;;;"}

package/build/widgets/ContextMenu/ContextMenu.js

@@ -1,23 +1,24 @@
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from 'prop-types';
+import { useFloatingTree, FloatingTree } from '@floating-ui/react';
 import { ContextMenu as ContextMenu$1 } from './ContextMenu.styled.js';
+import { jsx } from 'react/jsx-runtime';
 
 const ContextMenu = React__default.forwardRef(function ContextMenu({
   children,
   ...props
 }, forwardedRef) {
   const filteredProps = Object.fromEntries(Object.entries(props).filter(([key]) => key !== 'sublevel'));
-  return React__default.createElement(ContextMenu$1, _extends({
-    ref: forwardedRef
-  }, filteredProps, {
-    role: "menu"
-  }), children);
+  const hasTree = useFloatingTree() !== null;
+  const menu = jsx(ContextMenu$1, {
+    ref: forwardedRef,
+    ...filteredProps,
+    role: "menu",
+    children: children
+  });
+  return hasTree ? menu : jsx(FloatingTree, {
+    children: menu
+  });
 });
-ContextMenu.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: PropTypes.any
-} : {};
-ContextMenu.defaultProps = {};
 
 export { ContextMenu as default };
 //# sourceMappingURL=ContextMenu.js.map

package/build/widgets/ContextMenu/ContextMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.js","sources":["../../../src/components/widgets/ContextMenu/ContextMenu.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './ContextMenu.styled';\n\n/**\n * This component wraps around an array of `ContextMenuItems` to display a context menu.\n *\n * In most use-cases, the `ContextMenu` will be wrapped in a `Popover` to provide the functionality for opening/closing and placing the menu.\n * In such cases, send the `ContextMenu` to the `Popover` as its `content` prop.\n *\n * The context menu and sublevels will automatically adjust their placement in relation to the element that opens it\n * based on available space if the provided placement doesn't work. See the `Popover` documentation for further instructions on placement.\n *\n * ### Import\n *\n * ``` js\n * import { ContextMenu } from '@ntbjs/react-components/widgets'\n * // or\n * import ContextMenu from '@ntbjs/react-components/widgets/ContextMenu'\n * ```\n * \n * ### Usage examples \n * #### Plain context menu\n * \n * ``` js\n\nconst item1 = <ContextMenuItem title=\"Download\" onClick={onClickEffect} key=\"item-1\" />;\nconst item2 = <ContextMenuItem title=\"Delete\" icon={<IconDelete />} onClick={onClickEffect} key=\"item-2\" />;\n\n<Popover content={<ContextMenu {...args}>{[item1, itemGroup1, item2]}</ContextMenu>} contextMenu={true}>\n  Click here to open\n</Popover>\n```\n * \n * #### Context menu with grouped items\n * Use the `ContextMenuItemsGroup` component to group menu items together. Grouped items will not show borders\n * between themselves, indicating that their actions are related.\n * \n * ``` js\n\nconst item1 = <ContextMenuItem title=\"Download\" onClick={onClickEffect} key=\"item-1\" />;\nconst item2 = <ContextMenuItem title=\"Delete\" icon={<IconDelete />} onClick={onClickEffect} key=\"item-2\" />;\n\nconst groupItem1 = <ContextMenuItem title=\"Edit in Mediebank\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"group-item-1\" />:\nconst groupItem2 = <ContextMenuItem title=\"Edit in Photoshop\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"group-item-2\" />;\nconst groupItem3 = <ContextMenuItem title=\"Edit in Illustrator\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"group-item-3\" />;\n\nconst itemGroup1 = <ContextMenuItemsGroup key=\"item-group-1\">{[groupItem1, groupItem2, groupItem3]}</ContextMenuItemsGroup>;\n\n<Popover content={<ContextMenu {...args}>{[item1, itemGroup1, item2]}</ContextMenu>} contextMenu={true}>\n  Click here to open\n</Popover>\n```\n * \n * #### Context menu with sublevels\n * Wrap a `ContextMenuItem` in a `Popover` and pass it a `ContextMenu` as child to create a sublevel/submenu. \n * A sublevel will by default be placed adjacent and aligned with the `ContextMenuItem` which opens it,\n * and adjust automatically based on available space.\n * \n * Set the `contextMenu` and `contextMenuSublevel` props of the `Popover` containing the sublevel to `true`.\n * \n * Set the `opensSublevel` prop of the `ContextMenuItem` containing the sublevel to `true`.\n * \n * ``` js\n\nconst item1 = <ContextMenuItem title=\"Download\" onClick={onClickEffect} key=\"item-1\" />;\nconst item2 = <ContextMenuItem title=\"Delete\" icon={<IconDelete />} onClick={onClickEffect} hoverBackgroundColors={['#fbeae6', '#fbeae6']} key=\"item-2\" />;\n\nconst subItem1 = <ContextMenuItem title=\"Edit in Mediebank\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"sub-item-1\" />\nconst subItem2 = <ContextMenuItem title=\"Edit in Photoshop\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"sub-item-2\" />\nconst subItem3 = <ContextMenuItem title=\"Edit in Illustrator\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"sub-item-3\" />\n\nconst itemWithSublevel = (\n  <Popover\n    content={\n      <ContextMenu sublevel={true}>\n        {[subItem1, subItem2, subItem3, subItem4, subItem5]}\n      </ContextMenu>\n    }\n    contextMenu={true}\n    contextMenuSublevel={true}\n    key=\"item-3\"\n  >\n    <ContextMenuItem title=\"Open level 2\" opensSublevel={true} />\n  </Popover>\n);\n\n<Popover content={<ContextMenu {...args}>{[item1, item2, itemWithSublevel]}</ContextMenu>} contextMenu={true}>\n  Click here to open\n</Popover>\n```\n * \n * \n * #### Context menu from a dropdown button\n * When used with a dropdown button, the `Button` component takes care of wrapping the menu items in a `Popover`.\n * Just pass the array of `ContextMenuItems` directly into the `Button` as its children.\n * \n * ``` js\n\nconst item1 = <ContextMenuItem title=\"Edit in Mediebank\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"item-1\" />;\nconst item2 = <ContextMenuItem title=\"Edit in Photoshop\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"item-2\" />;\nconst item3 = <ContextMenuItem title=\"Edit in Illustrator\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"item-3\" />;\n\n<Button onClick={onClickEffect} dropdownItems={<ContextMenu {...args}>{[item1, item2, item3, item4, item5]}</ContextMenu>}>\n  Button text\n</Button>\n```\n *\n */\nconst ContextMenu = React.forwardRef(function ContextMenu({ children, ...props }, forwardedRef) {\n  const filteredProps = Object.fromEntries(\n    Object.entries(props).filter(([key]) => key !== 'sublevel')\n  );\n\n  return (\n    <S.ContextMenu ref={forwardedRef} {...filteredProps} role=\"menu\">\n      {children}\n    </S.ContextMenu>\n  );\n});\n\nContextMenu.propTypes = {\n  /**\n   * An array containing nodes of the `ContextMenuItem` component\n   */\n  children: PropTypes.any\n};\n\nContextMenu.defaultProps = {};\n\nexport default ContextMenu;\n"],"names":["ContextMenu","React","forwardRef","children","props","forwardedRef","filteredProps","Object","fromEntries","entries","filter","key","createElement","S","_extends","ref","role","propTypes","process","env","NODE_ENV","PropTypes","any","defaultProps"],"mappings":";;;;;AA6GMA,MAAAA,WAAW,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,WAAWA,CAAC;EAAEG,QAAQ;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAAEC,YAAY,EAAE;EAC9F,MAAMC,aAAa,GAAGC,MAAM,CAACC,WAAW,CACtCD,MAAM,CAACE,OAAO,CAACL,KAAK,CAAC,CAACM,MAAM,CAAC,CAAC,CAACC,GAAG,CAAC,KAAKA,GAAG,KAAK,UAAU,CAC5D,CAAC,CAAA;EAED,OACEV,cAAA,CAAAW,aAAA,CAACC,aAAa,EAAAC,QAAA,CAAA;AAACC,IAAAA,GAAG,EAAEV,YAAAA;AAAa,GAAA,EAAKC,aAAa,EAAA;AAAEU,IAAAA,IAAI,EAAC,MAAA;AAAM,GAAA,CAAA,EAC7Db,QACY,CAAC,CAAA;AAEpB,CAAC,EAAC;AAEFH,WAAW,CAACiB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;EAItBjB,QAAQ,EAAEkB,SAAS,CAACC,GAAAA;AACtB,CAAC,GAAA,EAAA,CAAA;AAEDtB,WAAW,CAACuB,YAAY,GAAG,EAAE;;;;"}
+{"version":3,"file":"ContextMenu.js","sources":["../../../src/components/widgets/ContextMenu/ContextMenu.tsx"],"sourcesContent":["import React from 'react';\n\nimport { FloatingTree, useFloatingTree } from '@floating-ui/react';\n\nimport * as S from './ContextMenu.styled';\n\ntype ContextMenuOwnProps = {\n  /**\n   * An array containing nodes of the `ContextMenuItem` component\n   */\n  children?: any;\n  /**\n   * Marks this menu as the sublevel/submenu of another context menu. This is a documented public prop that is currently a no-op; removing it is an API break.\n   */\n  sublevel?: boolean;\n};\n\n// Omit before & — a bare intersection narrows colliding props instead of overriding them.\ntype Props = Omit<React.ComponentPropsWithoutRef<typeof S.ContextMenu>, keyof ContextMenuOwnProps> &\n  ContextMenuOwnProps;\n\n/**\n * This component wraps around an array of `ContextMenuItems` to display a context menu.\n *\n * In most use-cases, the `ContextMenu` will be wrapped in a `Popover` to provide the functionality for opening/closing and placing the menu.\n * In such cases, send the `ContextMenu` to the `Popover` as its `content` prop.\n *\n * The context menu and sublevels will automatically adjust their placement in relation to the element that opens it\n * based on available space if the provided placement doesn't work. See the `Popover` documentation for further instructions on placement.\n *\n * ### Import\n *\n * ``` js\n * import { ContextMenu } from '@ntbjs/react-components/widgets'\n * // or\n * import ContextMenu from '@ntbjs/react-components/widgets/ContextMenu'\n * ```\n * \n * ### Usage examples \n * #### Plain context menu\n * \n * ``` js\n\nconst item1 = <ContextMenuItem title=\"Download\" onClick={onClickEffect} key=\"item-1\" />;\nconst item2 = <ContextMenuItem title=\"Delete\" icon={<IconDelete />} onClick={onClickEffect} key=\"item-2\" />;\n\n<Popover content={<ContextMenu {...args}>{[item1, itemGroup1, item2]}</ContextMenu>} contextMenu={true}>\n  Click here to open\n</Popover>\n```\n * \n * #### Context menu with grouped items\n * Use the `ContextMenuItemsGroup` component to group menu items together. Grouped items will not show borders\n * between themselves, indicating that their actions are related.\n * \n * ``` js\n\nconst item1 = <ContextMenuItem title=\"Download\" onClick={onClickEffect} key=\"item-1\" />;\nconst item2 = <ContextMenuItem title=\"Delete\" icon={<IconDelete />} onClick={onClickEffect} key=\"item-2\" />;\n\nconst groupItem1 = <ContextMenuItem title=\"Edit in Mediebank\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"group-item-1\" />:\nconst groupItem2 = <ContextMenuItem title=\"Edit in Photoshop\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"group-item-2\" />;\nconst groupItem3 = <ContextMenuItem title=\"Edit in Illustrator\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"group-item-3\" />;\n\nconst itemGroup1 = <ContextMenuItemsGroup key=\"item-group-1\">{[groupItem1, groupItem2, groupItem3]}</ContextMenuItemsGroup>;\n\n<Popover content={<ContextMenu {...args}>{[item1, itemGroup1, item2]}</ContextMenu>} contextMenu={true}>\n  Click here to open\n</Popover>\n```\n * \n * #### Context menu with sublevels\n * Wrap a `ContextMenuItem` in a `Popover` and pass it a `ContextMenu` as child to create a sublevel/submenu. \n * A sublevel will by default be placed adjacent and aligned with the `ContextMenuItem` which opens it,\n * and adjust automatically based on available space.\n * \n * Set the `contextMenu` and `contextMenuSublevel` props of the `Popover` containing the sublevel to `true`.\n * \n * Set the `opensSublevel` prop of the `ContextMenuItem` containing the sublevel to `true`.\n * \n * ``` js\n\nconst item1 = <ContextMenuItem title=\"Download\" onClick={onClickEffect} key=\"item-1\" />;\nconst item2 = <ContextMenuItem title=\"Delete\" icon={<IconDelete />} onClick={onClickEffect} hoverBackgroundColors={['#fbeae6', '#fbeae6']} key=\"item-2\" />;\n\nconst subItem1 = <ContextMenuItem title=\"Edit in Mediebank\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"sub-item-1\" />\nconst subItem2 = <ContextMenuItem title=\"Edit in Photoshop\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"sub-item-2\" />\nconst subItem3 = <ContextMenuItem title=\"Edit in Illustrator\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"sub-item-3\" />\n\nconst itemWithSublevel = (\n  <Popover\n    content={\n      <ContextMenu sublevel={true}>\n        {[subItem1, subItem2, subItem3, subItem4, subItem5]}\n      </ContextMenu>\n    }\n    contextMenu={true}\n    contextMenuSublevel={true}\n    key=\"item-3\"\n  >\n    <ContextMenuItem title=\"Open level 2\" opensSublevel={true} />\n  </Popover>\n);\n\n<Popover content={<ContextMenu {...args}>{[item1, item2, itemWithSublevel]}</ContextMenu>} contextMenu={true}>\n  Click here to open\n</Popover>\n```\n * \n * \n * #### Context menu from a dropdown button\n * When used with a dropdown button, the `Button` component takes care of wrapping the menu items in a `Popover`.\n * Just pass the array of `ContextMenuItems` directly into the `Button` as its children.\n * \n * ``` js\n\nconst item1 = <ContextMenuItem title=\"Edit in Mediebank\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"item-1\" />;\nconst item2 = <ContextMenuItem title=\"Edit in Photoshop\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"item-2\" />;\nconst item3 = <ContextMenuItem title=\"Edit in Illustrator\" icon={<IconDesignServices />} onClick={onClickEffect} key=\"item-3\" />;\n\n<Button onClick={onClickEffect} dropdownItems={<ContextMenu {...args}>{[item1, item2, item3, item4, item5]}</ContextMenu>}>\n  Button text\n</Button>\n```\n *\n */\nconst ContextMenu = React.forwardRef<any, Props>(function ContextMenu(\n  { children, ...props },\n  forwardedRef\n) {\n  const filteredProps = Object.fromEntries(\n    Object.entries(props).filter(([key]) => key !== 'sublevel')\n  );\n\n  // Only root menu creates FloatingTree; submenus reuse ancestor's tree. With 3+ levels it prevents closing submenu children; with 2 levels (all current usage) it's inert.\n  const hasTree = useFloatingTree() !== null;\n\n  const menu = (\n    <S.ContextMenu ref={forwardedRef} {...filteredProps} role=\"menu\">\n      {children}\n    </S.ContextMenu>\n  );\n\n  return hasTree ? menu : <FloatingTree>{menu}</FloatingTree>;\n});\n\nexport default ContextMenu;\n"],"names":["ContextMenu","React","forwardRef","children","props","forwardedRef","filteredProps","Object","fromEntries","entries","filter","key","hasTree","useFloatingTree","menu","_jsx","S","ref","role","FloatingTree"],"mappings":";;;;;AA8HA,MAAMA,WAAW,GAAGC,cAAK,CAACC,UAAU,CAAa,SAASF,WAAWA,CACnE;EAAEG,QAAQ;EAAE,GAAGC;AAAM,CAAC,EACtBC,YAAY,EACZ;EACA,MAAMC,aAAa,GAAGC,MAAM,CAACC,WAAW,CACtCD,MAAM,CAACE,OAAO,CAACL,KAAK,CAAC,CAACM,MAAM,CAAC,CAAC,CAACC,GAAG,CAAC,KAAKA,GAAG,KAAK,UAAU,CAC5D,CAAC;AAGD,EAAA,MAAMC,OAAO,GAAGC,eAAe,EAAE,KAAK,IAAI;AAE1C,EAAA,MAAMC,IAAI,GACRC,GAAA,CAACC,aAAa,EAAA;AAACC,IAAAA,GAAG,EAAEZ,YAAa;AAAA,IAAA,GAAKC,aAAa;AAAEY,IAAAA,IAAI,EAAC,MAAM;AAAAf,IAAAA,QAAA,EAC7DA;AAAQ,GACI,CAChB;AAED,EAAA,OAAOS,OAAO,GAAGE,IAAI,GAAGC,GAAA,CAACI,YAAY,EAAA;AAAAhB,IAAAA,QAAA,EAAEW;AAAI,GAAe,CAAC;AAC7D,CAAC;;;;"}

package/build/widgets/ContextMenu/ContextMenu.styled.js

@@ -6,10 +6,10 @@ const shouldForwardProp = prop => {
 };
 const ContextMenu = styled.div.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  font-family: ${props => props.theme.primaryFontFamily};
-  padding: 3px 0;
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "ContextMenustyled__ContextMenu",
+  componentId: "sc-11pdycr-0"
+})(["font-family:", ";padding:3px 0;"], props => props.theme.primaryFontFamily);
 
 export { ContextMenu };
 //# sourceMappingURL=ContextMenu.styled.js.map

package/build/widgets/ContextMenu/ContextMenu.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenu.styled.js","sources":["../../../src/components/widgets/ContextMenu/ContextMenu.styled.js"],"sourcesContent":["import styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const ContextMenu = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-family: ${props => props.theme.primaryFontFamily};\n  padding: 3px 0;\n`;\n"],"names":["shouldForwardProp","prop","startsWith","ContextMenu","styled","div","withConfig","attrs","applyDefaultTheme","props","theme","primaryFontFamily"],"mappings":";;;AAGA,MAAMA,iBAAiB,GAAGC,IAAI,IAAI;EAChC,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC,CAAA;AAClD,CAAC,CAAA;AAEM,MAAMC,WAAW,GAAGC,MAAM,CAACC,GAAG,CAClCC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B,eAAA,EAAiBC,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,iBAAiB,CAAA;AACvD;AACA;;;;"}
+{"version":3,"file":"ContextMenu.styled.js","sources":["../../../src/components/widgets/ContextMenu/ContextMenu.styled.ts"],"sourcesContent":["// No components read props, so no transient-prop types to declare.\nimport styled from 'styled-components';\nimport { applyDefaultTheme } from '../../../utils/defaultTheme';\n\n// Single-argument to stay compatible with styled-components v5.1 and v6. Annotation required despite noImplicitAny being off.\nconst shouldForwardProp = (prop: string): boolean => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const ContextMenu = styled.div\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  font-family: ${props => props.theme.primaryFontFamily};\n  padding: 3px 0;\n`;\n"],"names":["shouldForwardProp","prop","startsWith","ContextMenu","styled","div","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","theme","primaryFontFamily"],"mappings":";;;AAKA,MAAMA,iBAAiB,GAAIC,IAAY,IAAc;EACnD,OAAOA,IAAI,KAAK,OAAO,IAAI,CAACA,IAAI,CAACC,UAAU,CAAC,GAAG,CAAC;AAClD,CAAC;AAEM,MAAMC,WAAW,GAAGC,MAAM,CAACC,GAAG,CAClCC,UAAU,CAAC;AACVN,EAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAAF,UAAA,CAAA;EAAAG,WAAA,EAAA,gCAAA;EAAAC,WAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,cAAA,EAAA,iBAAA,CAAA,EACVC,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,iBAAiB;;;;"}

package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js

@@ -1,44 +1,36 @@
-import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from 'prop-types';
 import { ContextMenuItem as ContextMenuItem$1, IconContainer, Label, SublevelIconContainer } from './ContextMenuItem.styled.js';
 import { ReactComponent as SvgTriangleRight } from '../../../icons/triangle-right.svg.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
 const ContextMenuItem = React__default.forwardRef(function ContextMenuItem({
   title,
-  icon,
+  icon = undefined,
   onClickEffect,
-  opensSublevel,
-  hoverColors,
-  hoverBackgroundColors,
+  opensSublevel = false,
+  hoverColors = undefined,
+  hoverBackgroundColors = undefined,
   ...props
 }, forwardedRef) {
-  return React__default.createElement(ContextMenuItem$1, _extends({
+  return jsxs(ContextMenuItem$1, {
     ref: forwardedRef,
     $icon: icon,
     onClick: onClickEffect,
     $hoverColors: hoverColors,
     $hoverBackgroundColors: hoverBackgroundColors,
     $openssublevel: opensSublevel,
-    className: opensSublevel ? 'context-menu-item opens-sublevel' : 'context-menu-item'
-  }, props, {
-    role: "menuitem"
-  }), icon && React__default.createElement(IconContainer, null, icon), React__default.createElement(Label, null, title), opensSublevel && React__default.createElement(SublevelIconContainer, null, React__default.createElement(SvgTriangleRight, null)));
+    className: opensSublevel ? 'context-menu-item opens-sublevel' : 'context-menu-item',
+    ...props,
+    role: "menuitem",
+    children: [icon && jsx(IconContainer, {
+      children: icon
+    }), jsx(Label, {
+      children: title
+    }), opensSublevel && jsx(SublevelIconContainer, {
+      children: jsx(SvgTriangleRight, {})
+    })]
+  });
 });
-ContextMenuItem.propTypes = process.env.NODE_ENV !== "production" ? {
-  title: PropTypes.string.isRequired,
-  icon: PropTypes.element,
-  onClickEffect: PropTypes.func,
-  opensSublevel: PropTypes.bool,
-  hoverColors: PropTypes.arrayOf(PropTypes.string),
-  hoverBackgroundColors: PropTypes.arrayOf(PropTypes.string)
-} : {};
-ContextMenuItem.defaultProps = {
-  icon: undefined,
-  hoverColors: undefined,
-  hoverBackgroundColors: undefined,
-  opensSublevel: false
-};
 
 export { ContextMenuItem as default };
 //# sourceMappingURL=ContextMenuItem.js.map

package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuItem.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './ContextMenuItem.styled';\n\nimport { ReactComponent as TriangleRightIcon } from '../../../../icons/triangle-right.svg';\n\n/**\n * Single context menu item.\n *\n * See the documentation for `ContextMenu` for usage examples.\n *\n * ### Import\n *\n * ``` js\n * import { ContextMenuItem } from '@ntbjs/react-components/widgets/ContextMenu'\n * // or\n * import ContextMenuItem from '@ntbjs/react-components/widgets/ContextMenu/ContextMenuItem'\n * ```\n */\nconst ContextMenuItem = React.forwardRef(function ContextMenuItem(\n  { title, icon, onClickEffect, opensSublevel, hoverColors, hoverBackgroundColors, ...props },\n  forwardedRef\n) {\n  return (\n    <S.ContextMenuItem\n      ref={forwardedRef}\n      $icon={icon}\n      onClick={onClickEffect}\n      $hoverColors={hoverColors}\n      $hoverBackgroundColors={hoverBackgroundColors}\n      $openssublevel={opensSublevel}\n      className={opensSublevel ? 'context-menu-item opens-sublevel' : 'context-menu-item'}\n      {...props}\n      role=\"menuitem\"\n    >\n      {icon && <S.IconContainer>{icon}</S.IconContainer>}\n      <S.Label>{title}</S.Label>\n      {opensSublevel && (\n        <S.SublevelIconContainer>\n          <TriangleRightIcon />\n        </S.SublevelIconContainer>\n      )}\n    </S.ContextMenuItem>\n  );\n});\n\nContextMenuItem.propTypes = {\n  /**\n   * Menu item text\n   */\n  title: PropTypes.string.isRequired,\n\n  /**\n   * Optional icon (left side)\n   */\n  icon: PropTypes.element,\n\n  /**\n   * Function to trigger when the item is clicked\n   */\n  onClickEffect: PropTypes.func,\n\n  /**\n   * Whether the `ContextMenuItem` opens another `ContextMenu`\n   */\n  opensSublevel: PropTypes.bool,\n\n  /**\n   * Array of custom hover text/icon color in the form of hex-strings (e.g. `'#FFFFFF'`).\n   * Must contain two colors, where the first is for dark-mode and the second is for light-mode.\n   */\n  hoverColors: PropTypes.arrayOf(PropTypes.string),\n\n  /**\n   * Array of custom hover background colors in the form of hex-strings (e.g. `'#FFFFFF'`).\n   * Must contain two colors, where the first is for dark-mode and the second is for light-mode.\n   */\n  hoverBackgroundColors: PropTypes.arrayOf(PropTypes.string)\n};\n\nContextMenuItem.defaultProps = {\n  icon: undefined,\n  hoverColors: undefined,\n  hoverBackgroundColors: undefined,\n  opensSublevel: false\n};\n\nexport default ContextMenuItem;\n"],"names":["ContextMenuItem","React","forwardRef","title","icon","onClickEffect","opensSublevel","hoverColors","hoverBackgroundColors","props","forwardedRef","createElement","S","_extends","ref","$icon","onClick","$hoverColors","$hoverBackgroundColors","$openssublevel","className","role","TriangleRightIcon","propTypes","process","env","NODE_ENV","PropTypes","string","isRequired","element","func","bool","arrayOf","defaultProps","undefined"],"mappings":";;;;;;AAmBMA,MAAAA,eAAe,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,eAAeA,CAC/D;EAAEG,KAAK;EAAEC,IAAI;EAAEC,aAAa;EAAEC,aAAa;EAAEC,WAAW;EAAEC,qBAAqB;EAAE,GAAGC,KAAAA;AAAM,CAAC,EAC3FC,YAAY,EACZ;EACA,OACET,cAAA,CAAAU,aAAA,CAACC,iBAAiB,EAAAC,QAAA,CAAA;AAChBC,IAAAA,GAAG,EAAEJ,YAAa;AAClBK,IAAAA,KAAK,EAAEX,IAAK;AACZY,IAAAA,OAAO,EAAEX,aAAc;AACvBY,IAAAA,YAAY,EAAEV,WAAY;AAC1BW,IAAAA,sBAAsB,EAAEV,qBAAsB;AAC9CW,IAAAA,cAAc,EAAEb,aAAc;AAC9Bc,IAAAA,SAAS,EAAEd,aAAa,GAAG,kCAAkC,GAAG,mBAAA;AAAoB,GAAA,EAChFG,KAAK,EAAA;AACTY,IAAAA,IAAI,EAAC,UAAA;AAAU,GAAA,CAAA,EAEdjB,IAAI,IAAIH,cAAA,CAAAU,aAAA,CAACC,aAAe,QAAER,IAAsB,CAAC,EAClDH,cAAA,CAAAU,aAAA,CAACC,KAAO,EAAA,IAAA,EAAET,KAAe,CAAC,EACzBG,aAAa,IACZL,cAAA,CAAAU,aAAA,CAACC,qBAAuB,EACtBX,IAAAA,EAAAA,cAAA,CAAAU,aAAA,CAACW,gBAAiB,EAAE,IAAA,CACG,CAEV,CAAC,CAAA;AAExB,CAAC,EAAC;AAEFtB,eAAe,CAACuB,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;AAI1BvB,EAAAA,KAAK,EAAEwB,SAAS,CAACC,MAAM,CAACC,UAAU;EAKlCzB,IAAI,EAAEuB,SAAS,CAACG,OAAO;EAKvBzB,aAAa,EAAEsB,SAAS,CAACI,IAAI;EAK7BzB,aAAa,EAAEqB,SAAS,CAACK,IAAI;EAM7BzB,WAAW,EAAEoB,SAAS,CAACM,OAAO,CAACN,SAAS,CAACC,MAAM,CAAC;AAMhDpB,EAAAA,qBAAqB,EAAEmB,SAAS,CAACM,OAAO,CAACN,SAAS,CAACC,MAAM,CAAA;AAC3D,CAAC,GAAA,EAAA,CAAA;AAED5B,eAAe,CAACkC,YAAY,GAAG;AAC7B9B,EAAAA,IAAI,EAAE+B,SAAS;AACf5B,EAAAA,WAAW,EAAE4B,SAAS;AACtB3B,EAAAA,qBAAqB,EAAE2B,SAAS;AAChC7B,EAAAA,aAAa,EAAE,KAAA;AACjB,CAAC;;;;"}
+{"version":3,"file":"ContextMenuItem.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.tsx"],"sourcesContent":["import React from 'react';\nimport * as S from './ContextMenuItem.styled';\n\nimport { ReactComponent as TriangleRightIcon } from '../../../../icons/triangle-right.svg';\n\ntype ContextMenuItemOwnProps = {\n  /**\n   * Menu item text\n   */\n  title: string;\n  /**\n   * Optional icon (left side)\n   */\n  icon?: React.ReactElement<any>;\n  /**\n   * Function to trigger when the item is clicked\n   */\n  onClickEffect?: (...args: any[]) => any;\n  /**\n   * Whether the `ContextMenuItem` opens another `ContextMenu`\n   */\n  opensSublevel?: boolean;\n  /**\n   * Array of custom hover text/icon color in the form of hex-strings (e.g. `'#FFFFFF'`).\n   * Must contain two colors, where the first is for dark-mode and the second is for light-mode.\n   */\n  hoverColors?: string[];\n  /**\n   * Array of custom hover background colors in the form of hex-strings (e.g. `'#FFFFFF'`).\n   * Must contain two colors, where the first is for dark-mode and the second is for light-mode.\n   */\n  hoverBackgroundColors?: string[];\n};\n\n// Omit before & — a bare intersection narrows colliding props instead of overriding them.\ntype Props = Omit<\n  React.ComponentPropsWithoutRef<typeof S.ContextMenuItem>,\n  keyof ContextMenuItemOwnProps\n> &\n  ContextMenuItemOwnProps;\n\n/**\n * Single context menu item.\n *\n * See the documentation for `ContextMenu` for usage examples.\n *\n * ### Import\n *\n * ``` js\n * import { ContextMenuItem } from '@ntbjs/react-components/widgets/ContextMenu'\n * // or\n * import ContextMenuItem from '@ntbjs/react-components/widgets/ContextMenu/ContextMenuItem'\n * ```\n */\nconst ContextMenuItem = React.forwardRef<any, Props>(function ContextMenuItem(\n  {\n    title,\n    icon = undefined,\n    onClickEffect,\n    opensSublevel = false,\n    hoverColors = undefined,\n    hoverBackgroundColors = undefined,\n    ...props\n  },\n  forwardedRef\n) {\n  return (\n    <S.ContextMenuItem\n      ref={forwardedRef}\n      $icon={icon}\n      onClick={onClickEffect}\n      $hoverColors={hoverColors}\n      $hoverBackgroundColors={hoverBackgroundColors}\n      $openssublevel={opensSublevel}\n      className={opensSublevel ? 'context-menu-item opens-sublevel' : 'context-menu-item'}\n      {...props}\n      role=\"menuitem\"\n    >\n      {icon && <S.IconContainer>{icon}</S.IconContainer>}\n      <S.Label>{title}</S.Label>\n      {opensSublevel && (\n        <S.SublevelIconContainer>\n          <TriangleRightIcon />\n        </S.SublevelIconContainer>\n      )}\n    </S.ContextMenuItem>\n  );\n});\n\nexport default ContextMenuItem;\n"],"names":["ContextMenuItem","React","forwardRef","title","icon","undefined","onClickEffect","opensSublevel","hoverColors","hoverBackgroundColors","props","forwardedRef","_jsxs","S","ref","$icon","onClick","$hoverColors","$hoverBackgroundColors","$openssublevel","className","role","children","_jsx","TriangleRightIcon"],"mappings":";;;;;AAsDA,MAAMA,eAAe,GAAGC,cAAK,CAACC,UAAU,CAAa,SAASF,eAAeA,CAC3E;EACEG,KAAK;AACLC,EAAAA,IAAI,GAAGC,SAAS;EAChBC,aAAa;AACbC,EAAAA,aAAa,GAAG,KAAK;AACrBC,EAAAA,WAAW,GAAGH,SAAS;AACvBI,EAAAA,qBAAqB,GAAGJ,SAAS;EACjC,GAAGK;AACL,CAAC,EACDC,YAAY,EACZ;AACA,EAAA,OACEC,IAAA,CAACC,iBAAiB,EAAA;AAChBC,IAAAA,GAAG,EAAEH,YAAa;AAClBI,IAAAA,KAAK,EAAEX,IAAK;AACZY,IAAAA,OAAO,EAAEV,aAAc;AACvBW,IAAAA,YAAY,EAAET,WAAY;AAC1BU,IAAAA,sBAAsB,EAAET,qBAAsB;AAC9CU,IAAAA,cAAc,EAAEZ,aAAc;AAC9Ba,IAAAA,SAAS,EAAEb,aAAa,GAAG,kCAAkC,GAAG,mBAAoB;AAAA,IAAA,GAChFG,KAAK;AACTW,IAAAA,IAAI,EAAC,UAAU;AAAAC,IAAAA,QAAA,GAEdlB,IAAI,IAAImB,GAAA,CAACV,aAAe,EAAA;AAAAS,MAAAA,QAAA,EAAElB;AAAI,KAAkB,CAAC,EAClDmB,GAAA,CAACV,KAAO,EAAA;AAAAS,MAAAA,QAAA,EAAEnB;KAAe,CAAC,EACzBI,aAAa,IACZgB,GAAA,CAACV,qBAAuB,EAAA;AAAAS,MAAAA,QAAA,EACtBC,GAAA,CAACC,gBAAiB,EAAA,EAAE;AAAC,KACE,CAC1B;AAAA,GACgB,CAAC;AAExB,CAAC;;;;"}

package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.js

@@ -6,81 +6,26 @@ const shouldForwardProp = prop => {
 };
 const ContextMenuItem = styled.span.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  align-items: center;
-  cursor: pointer;
-  display: flex;
-  font-family: ${props => props.theme.primaryFontFamily};
-  font-size: 0.875rem;
-  font-weight: normal;
-  height: 31px;
-  min-width: 160px;
-  padding: ${props => props.$openssublevel ? '0 8px' : '0 28px 0 8px'};
-
-  ${props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))}
-
-  ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-700'), '#FEFEFE')}
-
-  ${props => !props.$icon && css`
-      padding-left: 28px;
-    `}
-
-
-  :last-of-type {
-    height: 32px;
-  }
-
-  &:hover {
-    cursor: pointer;
-
-    ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200'))}
-  }
-
-  ${props => props.$openssublevelhoverColors && props.$hoverColors[0] && props.$hoverColors[1] && css`
-      &&:hover {
-        ${props => props.theme.themeProp('color', props.hoverColors[0], props.hoverColors[1])}
-      }
-    `}
-
-  ${props => props.$hoverBackgroundColors && props.$hoverBackgroundColors[0] && props.$hoverBackgroundColors[1] && css`
-      &&:hover {
-        ${props => props.theme.themeProp('background-color', props.$hoverBackgroundColors[0], props.$hoverBackgroundColors[1])}
-      }
-    `}
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "ContextMenuItemstyled__ContextMenuItem",
+  componentId: "sc-8s6zvg-0"
+})(["align-items:center;cursor:pointer;display:flex;font-family:", ";font-size:0.875rem;font-weight:normal;height:31px;min-width:160px;padding:", ";", " ", " ", " :last-of-type{height:32px;}&:hover{cursor:pointer;", "}", " ", ""], props => props.theme.primaryFontFamily, props => props.$openssublevel ? '0 8px' : '0 28px 0 8px', props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700')), props => props.theme.themeProp('background-color', props.theme.getColor('gray-700'), '#FEFEFE'), props => !props.$icon && css(["padding-left:28px;"]), props => props.theme.themeProp('background-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200')), props => props.$hoverColors && props.$hoverColors[0] && props.$hoverColors[1] && css(["&&:hover{", "}"], props => props.theme.themeProp('color', props.$hoverColors[0], props.$hoverColors[1])), props => props.$hoverBackgroundColors && props.$hoverBackgroundColors[0] && props.$hoverBackgroundColors[1] && css(["&&:hover{", "}"], props => props.theme.themeProp('background-color', props.$hoverBackgroundColors[0], props.$hoverBackgroundColors[1])));
 const IconContainer = styled.span.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  align-items: center;
-  display: flex;
-  height: fit-content;
-  max-width: 12px;
-  margin-right: 8px;
-
-  svg {
-    height: 12px;
-  }
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "ContextMenuItemstyled__IconContainer",
+  componentId: "sc-8s6zvg-1"
+})(["align-items:center;display:flex;height:fit-content;max-width:12px;margin-right:8px;svg{height:12px;}"]);
 const SublevelIconContainer = styled.span.withConfig({
   shouldForwardProp
-}).attrs(applyDefaultTheme)`
-  align-items: center;
-  display: flex;
-  height: fit-content;
-  max-width: 12px;
-  margin-left: auto;
-  margin-right: 8px;
-  padding-left: 24px;
-
-  svg {
-     height: 6px;
-    width: 6px;
-  }
-`;
-const Label = styled.span`
-  align-items: center;
-  display: flex;
-`;
+}).attrs(applyDefaultTheme).withConfig({
+  displayName: "ContextMenuItemstyled__SublevelIconContainer",
+  componentId: "sc-8s6zvg-2"
+})(["align-items:center;display:flex;height:fit-content;max-width:12px;margin-left:auto;margin-right:8px;padding-left:24px;svg{height:6px;width:6px;}"]);
+const Label = styled.span.withConfig({
+  displayName: "ContextMenuItemstyled__Label",
+  componentId: "sc-8s6zvg-3"
+})(["align-items:center;display:flex;"]);
 
 export { ContextMenuItem, IconContainer, Label, SublevelIconContainer };
 //# sourceMappingURL=ContextMenuItem.styled.js.map

package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuItem.styled.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.js"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../../utils/defaultTheme';\n\nconst shouldForwardProp = prop => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const ContextMenuItem = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-size: 0.875rem;\n  font-weight: normal;\n  height: 31px;\n  min-width: 160px;\n  padding: ${props => (props.$openssublevel ? '0 8px' : '0 28px 0 8px')};\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-700')\n    )}\n\n  ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-700'), '#FEFEFE')}\n\n  ${props =>\n    !props.$icon &&\n    css`\n      padding-left: 28px;\n    `}\n\n\n  :last-of-type {\n    height: 32px;\n  }\n\n  &:hover {\n    cursor: pointer;\n\n    ${props =>\n      props.theme.themeProp(\n        'background-color',\n        props.theme.getColor('gray-600'),\n        props.theme.getColor('gray-200')\n      )}\n  }\n\n  ${props =>\n    props.$openssublevelhoverColors &&\n    props.$hoverColors[0] &&\n    props.$hoverColors[1] &&\n    css`\n      &&:hover {\n        ${props => props.theme.themeProp('color', props.hoverColors[0], props.hoverColors[1])}\n      }\n    `}\n\n  ${props =>\n    props.$hoverBackgroundColors &&\n    props.$hoverBackgroundColors[0] &&\n    props.$hoverBackgroundColors[1] &&\n    css`\n      &&:hover {\n        ${props =>\n          props.theme.themeProp(\n            'background-color',\n            props.$hoverBackgroundColors[0],\n            props.$hoverBackgroundColors[1]\n          )}\n      }\n    `}\n`;\n\nexport const IconContainer = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  align-items: center;\n  display: flex;\n  height: fit-content;\n  max-width: 12px;\n  margin-right: 8px;\n\n  svg {\n    height: 12px;\n  }\n`;\n\nexport const SublevelIconContainer = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  align-items: center;\n  display: flex;\n  height: fit-content;\n  max-width: 12px;\n  margin-left: auto;\n  margin-right: 8px;\n  padding-left: 24px;\n\n  svg {\n     height: 6px;\n    width: 6px;\n  }\n`;\n\nexport const Label = styled.span`\n  align-items: center;\n  display: flex;\n`;\n"],"names":["shouldForwardProp","prop","startsWith","ContextMenuItem","styled","span","withConfig","attrs","applyDefaultTheme","props","theme","primaryFontFamily","$openssublevel","themeProp","getColor","$icon","css","$openssublevelhoverColors","$hoverColors","hoverColors","$hoverBackgroundColors","IconContainer","SublevelIconContainer","Label"],"mappings":"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"}
+{"version":3,"file":"ContextMenuItem.styled.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.ts"],"sourcesContent":["// Fixed defect: guard and rule both now read $hoverColors (was run-together $openssublevelhoverColors and props.hoverColors).\nimport styled, { css } from 'styled-components';\nimport { applyDefaultTheme } from '../../../../utils/defaultTheme';\n\nimport type { ReactElement } from 'react';\n\n/**\n * Props passed by `ContextMenuItem.tsx` to `<S.ContextMenuItem>`.\n */\nexport interface ContextMenuItemStyleProps {\n  /** React element, read for presence only. */\n  $icon?: ReactElement<any>;\n  /** Selects right-hand padding (sublevel items have their own chevron). */\n  $openssublevel?: boolean;\n  /** `[darkModeColor, lightModeColor]` hex strings. */\n  $hoverColors?: string[];\n  /** Same shape as `$hoverColors`. */\n  $hoverBackgroundColors?: string[];\n}\n\n// Single-argument to stay compatible with styled-components v5.1 and v6. Annotation required despite noImplicitAny being off.\nconst shouldForwardProp = (prop: string): boolean => {\n  return prop !== 'theme' && !prop.startsWith('$');\n};\n\nexport const ContextMenuItem = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs<ContextMenuItemStyleProps>(applyDefaultTheme)`\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  font-family: ${props => props.theme.primaryFontFamily};\n  font-size: 0.875rem;\n  font-weight: normal;\n  height: 31px;\n  min-width: 160px;\n  padding: ${props => (props.$openssublevel ? '0 8px' : '0 28px 0 8px')};\n\n  ${props =>\n    props.theme.themeProp(\n      'color',\n      props.theme.getColor('gray-100'),\n      props.theme.getColor('gray-700')\n    )}\n\n  ${props => props.theme.themeProp('background-color', props.theme.getColor('gray-700'), '#FEFEFE')}\n\n  ${props =>\n    !props.$icon &&\n    css`\n      padding-left: 28px;\n    `}\n\n\n  :last-of-type {\n    height: 32px;\n  }\n\n  &:hover {\n    cursor: pointer;\n\n    ${props =>\n      props.theme.themeProp(\n        'background-color',\n        props.theme.getColor('gray-600'),\n        props.theme.getColor('gray-200')\n      )}\n  }\n\n  ${props =>\n    props.$hoverColors &&\n    props.$hoverColors[0] &&\n    props.$hoverColors[1] &&\n    css<Pick<ContextMenuItemStyleProps, '$hoverColors'>>`\n      &&:hover {\n        ${props => props.theme.themeProp('color', props.$hoverColors[0], props.$hoverColors[1])}\n      }\n    `}\n\n  ${props =>\n    props.$hoverBackgroundColors &&\n    props.$hoverBackgroundColors[0] &&\n    props.$hoverBackgroundColors[1] &&\n    css<Pick<ContextMenuItemStyleProps, '$hoverBackgroundColors'>>`\n      &&:hover {\n        ${props =>\n          props.theme.themeProp(\n            'background-color',\n            props.$hoverBackgroundColors[0],\n            props.$hoverBackgroundColors[1]\n          )}\n      }\n    `}\n`;\n\nexport const IconContainer = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  align-items: center;\n  display: flex;\n  height: fit-content;\n  max-width: 12px;\n  margin-right: 8px;\n\n  svg {\n    height: 12px;\n  }\n`;\n\nexport const SublevelIconContainer = styled.span\n  .withConfig({\n    shouldForwardProp\n  })\n  .attrs(applyDefaultTheme)`\n  align-items: center;\n  display: flex;\n  height: fit-content;\n  max-width: 12px;\n  margin-left: auto;\n  margin-right: 8px;\n  padding-left: 24px;\n\n  svg {\n     height: 6px;\n    width: 6px;\n  }\n`;\n\nexport const Label = styled.span`\n  align-items: center;\n  display: flex;\n`;\n"],"names":["shouldForwardProp","prop","startsWith","ContextMenuItem","styled","span","withConfig","attrs","applyDefaultTheme","displayName","componentId","props","theme","primaryFontFamily","$openssublevel","themeProp","getColor","$icon","css","$hoverColors","$hoverBackgroundColors","IconContainer","SublevelIconContainer","Label"],"mappings":"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"}

package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.js

@@ -1,22 +1,18 @@
-import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
-import PropTypes from 'prop-types';
 import { ContextMenuItemsGroup as ContextMenuItemsGroup$1 } from './ContextMenuItemsGroup.styled.js';
+import { jsx } from 'react/jsx-runtime';
 
 const ContextMenuItemsGroup = React__default.forwardRef(function ContextMenuItemsGroup({
   children,
   ...props
 }, forwardedRef) {
-  return React__default.createElement(ContextMenuItemsGroup$1, _extends({
-    ref: forwardedRef
-  }, props, {
-    role: "group"
-  }), children);
+  return jsx(ContextMenuItemsGroup$1, {
+    ref: forwardedRef,
+    ...props,
+    role: "group",
+    children: children
+  });
 });
-ContextMenuItemsGroup.propTypes = process.env.NODE_ENV !== "production" ? {
-  children: PropTypes.arrayOf(PropTypes.node)
-} : {};
-ContextMenuItemsGroup.defaultProps = {};
 
 export { ContextMenuItemsGroup as default };
 //# sourceMappingURL=ContextMenuItemsGroup.js.map

package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContextMenuItemsGroup.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport * as S from './ContextMenuItemsGroup.styled';\n\n/**\n * Simple wrapper for a group of context menu items. These will be displayed without a border between each item.\n *\n * See the documentation for `ContextMenu` for an example.\n *\n * ### Import\n *\n * ``` js\n * import { ContextMenuItemsGroup } from '@ntbjs/react-components/widgets/ContextMenu'\n * // or\n * import ContextMenuItemsGroup from '@ntbjs/react-components/widgets/ContextMenu/ContextMenuItemsGroup'\n * ```\n *\n */\nconst ContextMenuItemsGroup = React.forwardRef(function ContextMenuItemsGroup(\n  { children, ...props },\n  forwardedRef\n) {\n  return (\n    <S.ContextMenuItemsGroup ref={forwardedRef} {...props} role=\"group\">\n      {children}\n    </S.ContextMenuItemsGroup>\n  );\n});\n\nContextMenuItemsGroup.propTypes = {\n  /**\n   * An array containing nodes of the `ContextMenuItem` component\n   */\n  children: PropTypes.arrayOf(PropTypes.node)\n};\n\nContextMenuItemsGroup.defaultProps = {};\n\nexport default ContextMenuItemsGroup;\n"],"names":["ContextMenuItemsGroup","React","forwardRef","children","props","forwardedRef","createElement","S","_extends","ref","role","propTypes","process","env","NODE_ENV","PropTypes","arrayOf","node","defaultProps"],"mappings":";;;;;AAkBMA,MAAAA,qBAAqB,GAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,qBAAqBA,CAC3E;EAAEG,QAAQ;EAAE,GAAGC,KAAAA;AAAM,CAAC,EACtBC,YAAY,EACZ;EACA,OACEJ,cAAA,CAAAK,aAAA,CAACC,uBAAuB,EAAAC,QAAA,CAAA;AAACC,IAAAA,GAAG,EAAEJ,YAAAA;AAAa,GAAA,EAAKD,KAAK,EAAA;AAAEM,IAAAA,IAAI,EAAC,OAAA;AAAO,GAAA,CAAA,EAChEP,QACsB,CAAC,CAAA;AAE9B,CAAC,EAAC;AAEFH,qBAAqB,CAACW,SAAS,GAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA,KAAG,YAAA,GAAA;AAIhCX,EAAAA,QAAQ,EAAEY,SAAS,CAACC,OAAO,CAACD,SAAS,CAACE,IAAI,CAAA;AAC5C,CAAC,GAAA,EAAA,CAAA;AAEDjB,qBAAqB,CAACkB,YAAY,GAAG,EAAE;;;;"}
+{"version":3,"file":"ContextMenuItemsGroup.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.tsx"],"sourcesContent":["import React from 'react';\nimport * as S from './ContextMenuItemsGroup.styled';\n\ntype ContextMenuItemsGroupOwnProps = {\n  /**\n   * Nodes of the `ContextMenuItem` component — one, or an array.\n   */\n  children?: React.ReactNode;\n};\n\n// Omit before & — a bare intersection narrows colliding props instead of overriding them.\ntype Props = Omit<\n  React.ComponentPropsWithoutRef<typeof S.ContextMenuItemsGroup>,\n  keyof ContextMenuItemsGroupOwnProps\n> &\n  ContextMenuItemsGroupOwnProps;\n\n/**\n * Simple wrapper for a group of context menu items. These will be displayed without a border between each item.\n *\n * See the documentation for `ContextMenu` for an example.\n *\n * ### Import\n *\n * ``` js\n * import { ContextMenuItemsGroup } from '@ntbjs/react-components/widgets/ContextMenu'\n * // or\n * import ContextMenuItemsGroup from '@ntbjs/react-components/widgets/ContextMenu/ContextMenuItemsGroup'\n * ```\n *\n */\nconst ContextMenuItemsGroup = React.forwardRef<any, Props>(function ContextMenuItemsGroup(\n  { children, ...props },\n  forwardedRef\n) {\n  return (\n    <S.ContextMenuItemsGroup ref={forwardedRef} {...props} role=\"group\">\n      {children}\n    </S.ContextMenuItemsGroup>\n  );\n});\n\nexport default ContextMenuItemsGroup;\n"],"names":["ContextMenuItemsGroup","React","forwardRef","children","props","forwardedRef","_jsx","S","ref","role"],"mappings":";;;;AA+BA,MAAMA,qBAAqB,GAAGC,cAAK,CAACC,UAAU,CAAa,SAASF,qBAAqBA,CACvF;EAAEG,QAAQ;EAAE,GAAGC;AAAM,CAAC,EACtBC,YAAY,EACZ;AACA,EAAA,OACEC,GAAA,CAACC,uBAAuB,EAAA;AAACC,IAAAA,GAAG,EAAEH,YAAa;AAAA,IAAA,GAAKD,KAAK;AAAEK,IAAAA,IAAI,EAAC,OAAO;AAAAN,IAAAA,QAAA,EAChEA;AAAQ,GACc,CAAC;AAE9B,CAAC;;;;"}