@ntbjs/react-components 2.0.1-rc.31 → 2.0.2-rc.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (36) hide show
  1. package/build/data/Badge/Badge.js +6 -6
  2. package/build/data/Badge/Badge.js.map +1 -1
  3. package/build/data/Badge/Badge.styled.js +10 -11
  4. package/build/data/Badge/Badge.styled.js.map +1 -1
  5. package/build/inputs/CompactTextInput/CompactTextInput.js +2 -2
  6. package/build/inputs/CompactTextInput/CompactTextInput.js.map +1 -1
  7. package/build/inputs/CompactTextInput/CompactTextInput.styled.js +107 -117
  8. package/build/inputs/CompactTextInput/CompactTextInput.styled.js.map +1 -1
  9. package/build/inputs/MultiLevelCheckboxSelect/MultiLevelCheckboxSelect.js.map +1 -1
  10. package/build/inputs/MultiSelect/MultiSelect.js +163 -103
  11. package/build/inputs/MultiSelect/MultiSelect.js.map +1 -1
  12. package/build/inputs/MultiSelect/MultiSelect.styled.js +123 -111
  13. package/build/inputs/MultiSelect/MultiSelect.styled.js.map +1 -1
  14. package/build/inputs/Radio/Radio.js +13 -4
  15. package/build/inputs/Radio/Radio.js.map +1 -1
  16. package/build/inputs/Radio/Radio.styled.js +40 -23
  17. package/build/inputs/Radio/Radio.styled.js.map +1 -1
  18. package/build/inputs/TextArea/TextArea.js +5 -5
  19. package/build/inputs/TextArea/TextArea.js.map +1 -1
  20. package/build/inputs/TextArea/TextArea.styled.js +48 -56
  21. package/build/inputs/TextArea/TextArea.styled.js.map +1 -1
  22. package/build/styles/.config.scss +2 -2
  23. package/build/utils/defaultTheme.js +10 -1
  24. package/build/utils/defaultTheme.js.map +1 -1
  25. package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.js +8 -8
  26. package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.js.map +1 -1
  27. package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.styled.js +2 -2
  28. package/build/widgets/AssetGallery/AssetGalleryBase/AssetGalleryCompactCard/AssetGalleryCompactCard.styled.js.map +1 -1
  29. package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js +2 -2
  30. package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.js.map +1 -1
  31. package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.js +7 -7
  32. package/build/widgets/ContextMenu/ContextMenuItem/ContextMenuItem.styled.js.map +1 -1
  33. package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.styled.js +0 -4
  34. package/build/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.styled.js.map +1 -1
  35. package/package.json +11 -4
  36. package/styles/.config.scss +2 -2
@@ -1 +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 <span>{title}</span>\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,EAAA,IAAA,EAAER,IAAsB,CAAC,EAClDH,cAAA,CAAAU,aAAA,eAAOR,KAAY,CAAC,EACnBG,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;;;;"}
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;;;;"}
@@ -25,11 +25,6 @@ const ContextMenuItem = styled.span.withConfig({
25
25
  padding-left: 28px;
26
26
  `}
27
27
 
28
- :not(:last-of-type) {
29
- border-bottom: 1px solid;
30
-
31
- ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200'))}
32
- }
33
28
 
34
29
  :last-of-type {
35
30
  height: 32px;
@@ -78,9 +73,14 @@ const SublevelIconContainer = styled.span.withConfig({
78
73
  padding-left: 24px;
79
74
 
80
75
  svg {
81
- height: 12px;
76
+ height: 6px;
77
+ width: 6px;
82
78
  }
83
79
  `;
80
+ const Label = styled.span`
81
+ align-items: center;
82
+ display: flex;
83
+ `;
84
84
 
85
- export { ContextMenuItem, IconContainer, SublevelIconContainer };
85
+ export { ContextMenuItem, IconContainer, Label, SublevelIconContainer };
86
86
  //# sourceMappingURL=ContextMenuItem.styled.js.map
@@ -1 +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 :not(:last-of-type) {\n border-bottom: 1px solid;\n\n ${props =>\n props.theme.themeProp(\n 'border-color',\n props.theme.getColor('gray-600'),\n props.theme.getColor('gray-200')\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: 12px;\n }\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"],"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,eAAe,GAAGC,MAAM,CAACC,IAAI,CACvCC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA,eAAA,EAAiBC,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACC,iBAAiB,CAAA;AACvD;AACA;AACA;AACA;AACA,WAAaF,EAAAA,KAAK,IAAKA,KAAK,CAACG,cAAc,GAAG,OAAO,GAAG,cAAe,CAAA;AACvE;AACA,EAAIH,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACG,SAAS,CACnB,OAAO,EACPJ,KAAK,CAACC,KAAK,CAACI,QAAQ,CAAC,UAAU,CAAC,EAChCL,KAAK,CAACC,KAAK,CAACI,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACL;AACA,EAAIL,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACG,SAAS,CAAC,kBAAkB,EAAEJ,KAAK,CAACC,KAAK,CAACI,QAAQ,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC,CAAA;AACnG;AACA,EAAA,EAAIL,KAAK,IACL,CAACA,KAAK,CAACM,KAAK,IACZC,GAAG,CAAA;AACP;AACA,IAAK,CAAA,CAAA;AACL;AACA;AACA;AACA;AACA,IAAMP,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACG,SAAS,CACnB,cAAc,EACdJ,KAAK,CAACC,KAAK,CAACI,QAAQ,CAAC,UAAU,CAAC,EAChCL,KAAK,CAACC,KAAK,CAACI,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAML,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACG,SAAS,CACnB,kBAAkB,EAClBJ,KAAK,CAACC,KAAK,CAACI,QAAQ,CAAC,UAAU,CAAC,EAChCL,KAAK,CAACC,KAAK,CAACI,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACP;AACA;AACA,EAAIL,EAAAA,KAAK,IACLA,KAAK,CAACQ,yBAAyB,IAC/BR,KAAK,CAACS,YAAY,CAAC,CAAC,CAAC,IACrBT,KAAK,CAACS,YAAY,CAAC,CAAC,CAAC,IACrBF,GAAG,CAAA;AACP;AACA,QAAUP,EAAAA,KAAK,IAAIA,KAAK,CAACC,KAAK,CAACG,SAAS,CAAC,OAAO,EAAEJ,KAAK,CAACU,WAAW,CAAC,CAAC,CAAC,EAAEV,KAAK,CAACU,WAAW,CAAC,CAAC,CAAC,CAAC,CAAA;AAC7F;AACA,IAAK,CAAA,CAAA;AACL;AACA,EAAIV,EAAAA,KAAK,IACLA,KAAK,CAACW,sBAAsB,IAC5BX,KAAK,CAACW,sBAAsB,CAAC,CAAC,CAAC,IAC/BX,KAAK,CAACW,sBAAsB,CAAC,CAAC,CAAC,IAC/BJ,GAAG,CAAA;AACP;AACA,QAAUP,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACG,SAAS,CACnB,kBAAkB,EAClBJ,KAAK,CAACW,sBAAsB,CAAC,CAAC,CAAC,EAC/BX,KAAK,CAACW,sBAAsB,CAAC,CAAC,CAChC,CAAC,CAAA;AACX;AACA,IAAK,CAAA,CAAA;AACL,EAAC;AAEM,MAAMC,aAAa,GAAGjB,MAAM,CAACC,IAAI,CACrCC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAC;AAEM,MAAMc,qBAAqB,GAAGlB,MAAM,CAACC,IAAI,CAC7CC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}
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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"}
@@ -7,11 +7,7 @@ const shouldForwardProp = prop => {
7
7
  const ContextMenuItemsGroup = styled.div.withConfig({
8
8
  shouldForwardProp
9
9
  }).attrs(applyDefaultTheme)`
10
- :not(:last-child) {
11
- border-bottom: 1px solid;
12
10
 
13
- ${props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), props.theme.getColor('gray-200'))}
14
- }
15
11
 
16
12
  > * {
17
13
  border-bottom: none !important;
@@ -1 +1 @@
1
- {"version":3,"file":"ContextMenuItemsGroup.styled.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.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 ContextMenuItemsGroup = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n :not(:last-child) {\n border-bottom: 1px solid;\n\n ${props =>\n props.theme.themeProp(\n 'border-color',\n props.theme.getColor('gray-600'),\n props.theme.getColor('gray-200')\n )}\n }\n\n > * {\n border-bottom: none !important;\n }\n\n > *:not(:last-child) {\n height: 32px;\n }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","ContextMenuItemsGroup","styled","div","withConfig","attrs","applyDefaultTheme","props","theme","themeProp","getColor"],"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,qBAAqB,GAAGC,MAAM,CAACC,GAAG,CAC5CC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA,IAAMC,EAAAA,KAAK,IACLA,KAAK,CAACC,KAAK,CAACC,SAAS,CACnB,cAAc,EACdF,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CAAC,EAChCH,KAAK,CAACC,KAAK,CAACE,QAAQ,CAAC,UAAU,CACjC,CAAC,CAAA;AACP;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}
1
+ {"version":3,"file":"ContextMenuItemsGroup.styled.js","sources":["../../../../src/components/widgets/ContextMenu/ContextMenuItemsGroup/ContextMenuItemsGroup.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 ContextMenuItemsGroup = styled.div\n .withConfig({\n shouldForwardProp\n })\n .attrs(applyDefaultTheme)`\n\n\n > * {\n border-bottom: none !important;\n }\n\n > *:not(:last-child) {\n height: 32px;\n }\n`;\n"],"names":["shouldForwardProp","prop","startsWith","ContextMenuItemsGroup","styled","div","withConfig","attrs","applyDefaultTheme"],"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,qBAAqB,GAAGC,MAAM,CAACC,GAAG,CAC5CC,UAAU,CAAC;AACVN,EAAAA,iBAAAA;AACF,CAAC,CAAC,CACDO,KAAK,CAACC,iBAAiB,CAAC,CAAA;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ntbjs/react-components",
3
- "version": "2.0.1-rc.31",
3
+ "version": "2.0.2-rc.10",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
@@ -46,9 +46,14 @@
46
46
  },
47
47
  "homepage": "https://bitbucket.org/NTB-NO/react-components/src/master/",
48
48
  "engines": {
49
- "node": ">=24.0.0",
49
+ "node": ">=20.0.0",
50
50
  "npm": ">=10.0.0"
51
51
  },
52
+ "peerDependencies": {
53
+ "react": ">=16.8.0",
54
+ "react-dom": ">=16.8.0",
55
+ "styled-components": ">=5.0.0"
56
+ },
52
57
  "devDependencies": {
53
58
  "@babel/core": "^7.28.5",
54
59
  "@babel/eslint-parser": "^7.13.14",
@@ -80,6 +85,8 @@
80
85
  "madge": "^8.0.0",
81
86
  "postcss": "^8.3.0",
82
87
  "prop-types": "^15.7.2",
88
+ "react": "^19.2.4",
89
+ "react-dom": "^19.2.4",
83
90
  "rollup": "^2.50.6",
84
91
  "rollup-plugin-copy": "^3.3.0",
85
92
  "rollup-plugin-delete": "^2.0.0",
@@ -91,6 +98,7 @@
91
98
  "sass": "^1.97.2",
92
99
  "sass-loader": "^10.1.1",
93
100
  "storybook": "^10.1.11",
101
+ "styled-components": "^6.1.19",
94
102
  "url-loader": "^4.1.1"
95
103
  },
96
104
  "dependencies": {
@@ -106,7 +114,6 @@
106
114
  "react-select": "^5.10.2",
107
115
  "react-select-async-paginate": "^0.7.11",
108
116
  "react-spinners": "^0.17.0",
109
- "resize-observer-polyfill": "^1.5.1",
110
- "styled-components": "^6.1.19"
117
+ "resize-observer-polyfill": "^1.5.1"
111
118
  }
112
119
  }
@@ -1,7 +1,7 @@
1
1
  /**
2
2
  * Colors
3
3
  */
4
- export const colors = {
4
+ $colors: (
5
5
  'orange-600': #634e01,
6
6
  'orange-500': #ff9900,
7
7
  'orange-400': #ffcb7e,
@@ -35,4 +35,4 @@ export const colors = {
35
35
  'signal-green-400': #a3ffe0,
36
36
  'black': #202435,
37
37
  'white': #ffffff
38
- };
38
+ );