carbon-addons-iot-react 4.1.21 → 4.1.22

package/es/components/HotspotEditorModal/HotspotEditorModal.js

@@ -23,7 +23,7 @@ import React__default, { useMemo, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { ContentSwitcher, Switch, InlineNotification, InlineLoading, Tabs, TabList, Tab, TabPanels, TabPanel } from '@carbon/react';
 import update from 'immutability-helper';
-import { gray50, red50, green50, blue50 } from '@carbon/colors';
+import { gray50, red50, green50, blue50, cyan50, magenta50, purple50, teal50, yellow50, orange50 } from '@carbon/colors';
 import warning from 'warning';
 import { ColorPropType, HotspotIconPropType } from '../../constants/SharedPropTypes.js';
 import ImageHotspots from '../ImageCard/ImageHotspots.js';
@@ -54,6 +54,24 @@ var selectableColors = [{
 }, {
   carbonColor: blue50,
   name: 'blue'
+}, {
+  carbonColor: cyan50,
+  name: 'cyan'
+}, {
+  carbonColor: magenta50,
+  name: 'magenta'
+}, {
+  carbonColor: purple50,
+  name: 'purple'
+}, {
+  carbonColor: teal50,
+  name: 'teal'
+}, {
+  carbonColor: yellow50,
+  name: 'yellow'
+}, {
+  carbonColor: orange50,
+  name: 'orange'
 }];
 var propTypes = {
   /** an object where the keys are available dimensions and the values are the values available for those dimensions
@@ -655,7 +673,7 @@ HotspotEditorModal.__docgenInfo = {
     },
     "backgroundColors": {
       "defaultValue": {
-        "value": "[\n  { carbonColor: gray50, name: 'gray' },\n  { carbonColor: red50, name: 'red' },\n  { carbonColor: green50, name: 'green' },\n  { carbonColor: blue50, name: 'blue' },\n]",
+        "value": "[\n  { carbonColor: gray50, name: 'gray' },\n  { carbonColor: red50, name: 'red' },\n  { carbonColor: green50, name: 'green' },\n  { carbonColor: blue50, name: 'blue' },\n  { carbonColor: cyan50, name: 'cyan' },\n  { carbonColor: magenta50, name: 'magenta' },\n  { carbonColor: purple50, name: 'purple' },\n  { carbonColor: teal50, name: 'teal' },\n  { carbonColor: yellow50, name: 'yellow' },\n  { carbonColor: orange50, name: 'orange' },\n]",
         "computed": false
       },
       "description": "Array of selectable color objects for text hotspot background",
@@ -670,7 +688,7 @@ HotspotEditorModal.__docgenInfo = {
     },
     "borderColors": {
       "defaultValue": {
-        "value": "[\n  { carbonColor: gray50, name: 'gray' },\n  { carbonColor: red50, name: 'red' },\n  { carbonColor: green50, name: 'green' },\n  { carbonColor: blue50, name: 'blue' },\n]",
+        "value": "[\n  { carbonColor: gray50, name: 'gray' },\n  { carbonColor: red50, name: 'red' },\n  { carbonColor: green50, name: 'green' },\n  { carbonColor: blue50, name: 'blue' },\n  { carbonColor: cyan50, name: 'cyan' },\n  { carbonColor: magenta50, name: 'magenta' },\n  { carbonColor: purple50, name: 'purple' },\n  { carbonColor: teal50, name: 'teal' },\n  { carbonColor: yellow50, name: 'yellow' },\n  { carbonColor: orange50, name: 'orange' },\n]",
         "computed": false
       },
       "description": "Array of selectable color objects for text hotspot border",
@@ -778,7 +796,7 @@ HotspotEditorModal.__docgenInfo = {
     },
     "fontColors": {
       "defaultValue": {
-        "value": "[\n  { carbonColor: gray50, name: 'gray' },\n  { carbonColor: red50, name: 'red' },\n  { carbonColor: green50, name: 'green' },\n  { carbonColor: blue50, name: 'blue' },\n]",
+        "value": "[\n  { carbonColor: gray50, name: 'gray' },\n  { carbonColor: red50, name: 'red' },\n  { carbonColor: green50, name: 'green' },\n  { carbonColor: blue50, name: 'blue' },\n  { carbonColor: cyan50, name: 'cyan' },\n  { carbonColor: magenta50, name: 'magenta' },\n  { carbonColor: purple50, name: 'purple' },\n  { carbonColor: teal50, name: 'teal' },\n  { carbonColor: yellow50, name: 'yellow' },\n  { carbonColor: orange50, name: 'orange' },\n]",
         "computed": false
       },
       "description": "Array of selectable color objects for text hotspot font",
@@ -1183,4 +1201,4 @@ HotspotEditorModal.__docgenInfo = {
 };
 var HotspotEditorModal$1 = HotspotEditorModal;
 
-export { HotspotEditorModal$1 as default };
+export { HotspotEditorModal$1 as default, selectableColors };

package/es/components/HotspotEditorModal/HotspotTextStyleTab/HotspotTextStyleTab.js

@@ -1,4 +1,5 @@
 import _merge from '../../../node_modules/lodash-es/merge.js';
+import 'core-js/modules/es.array.concat.js';
 import 'core-js/modules/es.array.find.js';
 import 'core-js/modules/es.number.constructor.js';
 import 'core-js/modules/es.object.to-string.js';
@@ -6,14 +7,15 @@ import 'core-js/modules/es.string.bold.js';
 import 'core-js/modules/es.string.italics.js';
 import React__default from 'react';
 import PropTypes from 'prop-types';
-import { IconSwitch, NumberInput } from '@carbon/react';
+import { unstable_FeatureFlags, IconSwitch, NumberInput } from '@carbon/react';
 import { settings } from '../../../constants/Settings.js';
 import ColorDropdown from '../../ColorDropdown/ColorDropdown.js';
 import Button from '../../Button/Button.js';
 import { isNumberValidForMinMax } from '../../../utils/componentUtilityFunctions.js';
 import { TextBold, TextItalic, TextUnderline, TrashCan, InformationFilled } from '@carbon/icons-react';
 
-var iotPrefix = settings.iotPrefix;
+var iotPrefix = settings.iotPrefix,
+  prefix = settings.prefix;
 var colorPropType = PropTypes.shape({
   carbonColor: PropTypes.string,
   name: PropTypes.string
@@ -204,7 +206,11 @@ var HotspotTextStyleTab = function HotspotTextStyleTab(_ref) {
     onSubmit: preventFormSubmission,
     className: "".concat(iotPrefix, "--hotspot-text-style-tab__form")
   }, /*#__PURE__*/React__default.createElement("div", {
-    className: "".concat(iotPrefix, "--hotspot-text-style-tab__text-style")
+    className: "".concat(iotPrefix, "--hotspot-text-style-tab__row")
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(prefix, "--content-switcher ").concat(prefix, "--content-switcher--icon-only")
+  }, /*#__PURE__*/React__default.createElement(unstable_FeatureFlags, {
+    enableV12DynamicFloatingStyles: true
   }, /*#__PURE__*/React__default.createElement(IconSwitch, {
     disabled: hasNonEditableContent,
     onClick: function onClick() {
@@ -246,7 +252,7 @@ var HotspotTextStyleTab = function HotspotTextStyleTab(_ref) {
     renderIcon: TextUnderline,
     index: 2,
     light: light
-  })), /*#__PURE__*/React__default.createElement("div", {
+  })))), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(iotPrefix, "--hotspot-text-style-tab__row")
   }, /*#__PURE__*/React__default.createElement(ColorDropdown, {
     disabled: hasNonEditableContent,

package/lib/components/CardEditor/CardEditForm/CardEditFormItems/ImageCardFormItems/ImageCardFormContent.js

@@ -134,7 +134,7 @@ var ImageCardFormItems = function ImageCardFormItems(_ref) {
     handleCloseHotspotEditor();
     onChange(cardConfigWithHotspots);
   }, [handleCloseHotspotEditor, onChange]);
-  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, isHotspotModalShowing ? /*#__PURE__*/React__default.default.createElement(HotspotEditorModal, {
+  return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, isHotspotModalShowing ? /*#__PURE__*/React__default.default.createElement(HotspotEditorModal.default, {
     cardConfig: cardConfig,
     displayOption: (_cardConfig$content = cardConfig.content) === null || _cardConfig$content === void 0 ? void 0 : _cardConfig$content.displayOption,
     getValidDataItems: getValidDataItems,

package/lib/components/HotspotEditorModal/HotspotEditorModal.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
@@ -69,6 +71,24 @@ var selectableColors = [{
 }, {
   carbonColor: colors.blue50,
   name: 'blue'
+}, {
+  carbonColor: colors.cyan50,
+  name: 'cyan'
+}, {
+  carbonColor: colors.magenta50,
+  name: 'magenta'
+}, {
+  carbonColor: colors.purple50,
+  name: 'purple'
+}, {
+  carbonColor: colors.teal50,
+  name: 'teal'
+}, {
+  carbonColor: colors.yellow50,
+  name: 'yellow'
+}, {
+  carbonColor: colors.orange50,
+  name: 'orange'
 }];
 var propTypes = {
   /** an object where the keys are available dimensions and the values are the values available for those dimensions
@@ -670,7 +690,7 @@ HotspotEditorModal.__docgenInfo = {
     },
     "backgroundColors": {
       "defaultValue": {
-        "value": "[\n  { carbonColor: gray50, name: 'gray' },\n  { carbonColor: red50, name: 'red' },\n  { carbonColor: green50, name: 'green' },\n  { carbonColor: blue50, name: 'blue' },\n]",
+        "value": "[\n  { carbonColor: gray50, name: 'gray' },\n  { carbonColor: red50, name: 'red' },\n  { carbonColor: green50, name: 'green' },\n  { carbonColor: blue50, name: 'blue' },\n  { carbonColor: cyan50, name: 'cyan' },\n  { carbonColor: magenta50, name: 'magenta' },\n  { carbonColor: purple50, name: 'purple' },\n  { carbonColor: teal50, name: 'teal' },\n  { carbonColor: yellow50, name: 'yellow' },\n  { carbonColor: orange50, name: 'orange' },\n]",
         "computed": false
       },
       "description": "Array of selectable color objects for text hotspot background",
@@ -685,7 +705,7 @@ HotspotEditorModal.__docgenInfo = {
     },
     "borderColors": {
       "defaultValue": {
-        "value": "[\n  { carbonColor: gray50, name: 'gray' },\n  { carbonColor: red50, name: 'red' },\n  { carbonColor: green50, name: 'green' },\n  { carbonColor: blue50, name: 'blue' },\n]",
+        "value": "[\n  { carbonColor: gray50, name: 'gray' },\n  { carbonColor: red50, name: 'red' },\n  { carbonColor: green50, name: 'green' },\n  { carbonColor: blue50, name: 'blue' },\n  { carbonColor: cyan50, name: 'cyan' },\n  { carbonColor: magenta50, name: 'magenta' },\n  { carbonColor: purple50, name: 'purple' },\n  { carbonColor: teal50, name: 'teal' },\n  { carbonColor: yellow50, name: 'yellow' },\n  { carbonColor: orange50, name: 'orange' },\n]",
         "computed": false
       },
       "description": "Array of selectable color objects for text hotspot border",
@@ -793,7 +813,7 @@ HotspotEditorModal.__docgenInfo = {
     },
     "fontColors": {
       "defaultValue": {
-        "value": "[\n  { carbonColor: gray50, name: 'gray' },\n  { carbonColor: red50, name: 'red' },\n  { carbonColor: green50, name: 'green' },\n  { carbonColor: blue50, name: 'blue' },\n]",
+        "value": "[\n  { carbonColor: gray50, name: 'gray' },\n  { carbonColor: red50, name: 'red' },\n  { carbonColor: green50, name: 'green' },\n  { carbonColor: blue50, name: 'blue' },\n  { carbonColor: cyan50, name: 'cyan' },\n  { carbonColor: magenta50, name: 'magenta' },\n  { carbonColor: purple50, name: 'purple' },\n  { carbonColor: teal50, name: 'teal' },\n  { carbonColor: yellow50, name: 'yellow' },\n  { carbonColor: orange50, name: 'orange' },\n]",
         "computed": false
       },
       "description": "Array of selectable color objects for text hotspot font",
@@ -1198,4 +1218,5 @@ HotspotEditorModal.__docgenInfo = {
 };
 var HotspotEditorModal$1 = HotspotEditorModal;
 
-module.exports = HotspotEditorModal$1;
+exports.default = HotspotEditorModal$1;
+exports.selectableColors = selectableColors;

package/lib/components/HotspotEditorModal/HotspotTextStyleTab/HotspotTextStyleTab.js

@@ -1,6 +1,7 @@
 'use strict';
 
 var merge = require('../../../node_modules/lodash-es/merge.js');
+require('core-js/modules/es.array.concat.js');
 require('core-js/modules/es.array.find.js');
 require('core-js/modules/es.number.constructor.js');
 require('core-js/modules/es.object.to-string.js');
@@ -20,7 +21,8 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
 
-var iotPrefix = Settings.settings.iotPrefix;
+var iotPrefix = Settings.settings.iotPrefix,
+  prefix = Settings.settings.prefix;
 var colorPropType = PropTypes__default.default.shape({
   carbonColor: PropTypes__default.default.string,
   name: PropTypes__default.default.string
@@ -211,7 +213,11 @@ var HotspotTextStyleTab = function HotspotTextStyleTab(_ref) {
     onSubmit: preventFormSubmission,
     className: "".concat(iotPrefix, "--hotspot-text-style-tab__form")
   }, /*#__PURE__*/React__default.default.createElement("div", {
-    className: "".concat(iotPrefix, "--hotspot-text-style-tab__text-style")
+    className: "".concat(iotPrefix, "--hotspot-text-style-tab__row")
+  }, /*#__PURE__*/React__default.default.createElement("div", {
+    className: "".concat(prefix, "--content-switcher ").concat(prefix, "--content-switcher--icon-only")
+  }, /*#__PURE__*/React__default.default.createElement(react.unstable_FeatureFlags, {
+    enableV12DynamicFloatingStyles: true
   }, /*#__PURE__*/React__default.default.createElement(react.IconSwitch, {
     disabled: hasNonEditableContent,
     onClick: function onClick() {
@@ -253,7 +259,7 @@ var HotspotTextStyleTab = function HotspotTextStyleTab(_ref) {
     renderIcon: iconsReact.TextUnderline,
     index: 2,
     light: light
-  })), /*#__PURE__*/React__default.default.createElement("div", {
+  })))), /*#__PURE__*/React__default.default.createElement("div", {
     className: "".concat(iotPrefix, "--hotspot-text-style-tab__row")
   }, /*#__PURE__*/React__default.default.createElement(ColorDropdown, {
     disabled: hasNonEditableContent,

package/lib/css/carbon-addons-iot-react.css

@@ -7274,30 +7274,6 @@ html[dir=rtl] .cds--list-box__label .iot--color-dropdown__item {
   padding-right: 5rem;
   background: var(--cds-field-02, #f4f4f4);
 }
-.iot--hotspot-text-style-tab__text-style button:first-of-type,
-.iot--hotspot-text-style-tab__text-style button:last-of-type {
-  border-radius: 0;
-}
-.iot--hotspot-text-style-tab__text-style button:first-of-type {
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
-}
-.iot--hotspot-text-style-tab__text-style button:last-of-type {
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-html[dir=rtl] .iot--hotspot-text-style-tab__text-style button:first-of-type,
-html[dir=rtl] .iot--hotspot-text-style-tab__text-style button:last-of-type {
-  border-radius: 0;
-}
-html[dir=rtl] .iot--hotspot-text-style-tab__text-style button:first-of-type {
-  border-top-right-radius: 5px;
-  border-bottom-right-radius: 5px;
-}
-html[dir=rtl] .iot--hotspot-text-style-tab__text-style button:last-of-type {
-  border-top-left-radius: 5px;
-  border-bottom-left-radius: 5px;
-}
 .iot--hotspot-text-style-tab__dropdown {
   width: 100%;
 }