@webex/cc-components 1.28.0-ccwidgets.59 → 1.28.0-ccwidgets.60

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 (4) hide show
  1. package/dist/index.js +13 -2
  2. package/dist/types/components/UserState/constant.d.ts +5 -0
  3. package/dist/wc.js +13 -2
  4. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -2889,7 +2889,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
2889
2889
  /***/ ((module, __webpack_exports__, __webpack_require__) => {
2890
2890
 
2891
2891
  "use strict";
2892
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../node_modules/css-loader/dist/runtime/api.js */ \"../../../node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.user-state-container {\n position: relative;\n width: 100%; /* Ensure the select trigger takes the full width of its parent */\n display: flex;\n align-items: center;\n justify-content: space-between; /* Space out the elements within the select trigger */\n}\n\n.select-trigger .md-select {\n width: 100%; /* Ensure the SelectNext component takes the full width of its parent */\n}\n\n.elapsedTime {\n position: absolute;\n right: 2rem; /* Adjusted to leave space for the arrow icon */\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n z-index: 1;\n color: var(--mds-color-theme-text-primary-normal);\n white-space: nowrap; /* Prevent the text from wrapping */\n padding: 0 0.5rem; /* Add some padding */\n border-radius: 0.25rem; /* Add some border radius */\n}\n\n.state-name {\n color: var(--mds-color-theme-text-primary-normal);\n}\n.state-name.rona {\n color: var(--mds-color-theme-text-error-normal);\n}\n.state-name.custom {\n color: var(--mds-color-theme-text-warning-normal);\n}\n\n.elapsedTime-disabled {\n color: #ccc;\n}\n\n.item-container {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.hide-this {\n display: none;\n}\n\n.state-icon {\n --mdc-icon-fill-color: var(--mds-color-theme-indicator-stable);\n}\n.state-icon.idle {\n --mdc-icon-fill-color: var(--mds-color-theme-indicator-locked);\n}\n.state-icon.rona {\n --mdc-icon-fill-color: var(--mds-color-theme-outline-cancel-normal);\n}\n.state-icon.custom {\n --mdc-icon-fill-color: var(--mds-color-theme-text-team-gold-hover);\n}\n\n.state-select {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-success-normal);\n}\n.state-select .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-success-normal);\n}\n.state-select.idle {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-primary-active);\n}\n.state-select.idle .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-secondary-normal);\n}\n.state-select.rona {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-error-active);\n}\n.state-select.rona .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-error-normal);\n border: 1px solid var(--mds-color-theme-outline-cancel-normal);\n}\n.state-select.custom {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-warning-active);\n}\n.state-select.custom .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-warning-normal);\n border: 1px solid var(--mds-color-theme-text-team-gold-hover);\n}\n.state-select.available {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-success-normal);\n}\n.state-select.available .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-success-normal);\n border: 1px solid var(--mds-color-theme-outline-join-normal);\n}\n.state-select .md-select-popover ul li[data-key^=hide-] {\n display: none;\n}\n.state-select .item-container.selected.available .state-icon {\n --mdc-icon-fill-color: var(--mds-color-theme-outline-join-normal);\n}\n.state-select .item-container.selected.available .state-name {\n color: var(--mds-color-theme-outline-join-normal);\n}\n.state-select .item-container.selected.idle .state-icon {\n --mdc-icon-fill-color: var(--mds-color-theme-text-primary-normal);\n}\n.state-select .item-container.selected.idle .state-name {\n color: var(--mds-color-theme-text-primary-normal);\n}\n\n.select-arrow-icon {\n position: absolute;\n right: 1rem; /* Adjusted to leave space for the arrow icon */\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n z-index: 1;\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/user-state.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
2892
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../node_modules/css-loader/dist/runtime/api.js */ \"../../../node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.user-state-container {\n position: relative;\n width: 100%; /* Ensure the select trigger takes the full width of its parent */\n display: flex;\n align-items: center;\n justify-content: space-between; /* Space out the elements within the select trigger */\n}\n\n.select-trigger .md-select {\n width: 100%; /* Ensure the SelectNext component takes the full width of its parent */\n}\n\n.elapsedTime {\n position: absolute;\n right: 2rem; /* Adjusted to leave space for the arrow icon */\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n z-index: 1;\n color: var(--mds-color-theme-text-primary-normal);\n white-space: nowrap; /* Prevent the text from wrapping */\n padding: 0 0.5rem; /* Add some padding */\n border-radius: 0.25rem; /* Add some border radius */\n}\n\n.state-name {\n color: var(--mds-color-theme-text-primary-normal);\n}\n.state-name.rona {\n color: var(--mds-color-theme-text-error-normal);\n}\n.state-name.custom {\n color: var(--mds-color-theme-text-warning-normal);\n}\n\n.elapsedTime-disabled {\n color: #ccc;\n}\n\n.item-container {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.hide-this {\n display: none;\n}\n\n.state-icon {\n --mdc-icon-fill-color: var(--mds-color-theme-indicator-stable);\n}\n.state-icon.idle {\n --mdc-icon-fill-color: var(--mds-color-theme-indicator-locked);\n}\n.state-icon.rona {\n --mdc-icon-fill-color: var(--mds-color-theme-outline-cancel-normal);\n}\n.state-icon.custom {\n --mdc-icon-fill-color: var(--mds-color-theme-text-team-gold-hover);\n}\n\n.state-select {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-success-normal);\n}\n.state-select .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-success-normal);\n}\n.state-select.idle {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-primary-active);\n}\n.state-select.idle .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-secondary-normal);\n}\n.state-select.rona {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-error-active);\n}\n.state-select.rona .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-error-normal);\n border: 1px solid var(--mds-color-theme-outline-cancel-normal);\n}\n.state-select.custom {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-warning-active);\n}\n.state-select.custom .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-warning-normal);\n border: 1px solid var(--mds-color-theme-text-team-gold-hover);\n}\n.state-select.available {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-success-normal);\n}\n.state-select.available .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-success-normal);\n border: 1px solid var(--mds-color-theme-outline-join-normal);\n}\n.state-select .md-select-popover ul li[data-key^=hide-] {\n display: none;\n}\n.state-select .item-container.selected.available .state-icon {\n --mdc-icon-fill-color: var(--mds-color-theme-outline-join-normal);\n}\n.state-select .item-container.selected.available .state-name {\n color: var(--mds-color-theme-outline-join-normal);\n}\n.state-select .item-container.selected.idle .state-icon {\n --mdc-icon-fill-color: var(--mds-color-theme-text-primary-normal);\n}\n.state-select .item-container.selected.idle .state-name {\n color: var(--mds-color-theme-text-primary-normal);\n}\n\n.select-arrow-icon {\n position: absolute;\n right: 1rem; /* Adjusted to leave space for the arrow icon */\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n z-index: 1;\n}\n\n.tooltip.md-modal-container-wrapper {\n color: var(--mds-color-theme-inverted-text-primary-normal);\n background-color: var(--mds-color-theme-inverted-background-normal) !important;\n max-width: 19rem;\n}\n\n.tooltip .md-modal-container-arrow-wrapper .md-modal-arrow-svg path {\n fill: var(--mds-color-theme-inverted-background-normal) !important;\n}\n\n.tooltip-text {\n text-align: center;\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/user-state.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
2893
2893
 
2894
2894
  /***/ }),
2895
2895
 
@@ -3146,6 +3146,17 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n\n\n
3146
3146
 
3147
3147
  /***/ }),
3148
3148
 
3149
+ /***/ "./src/components/UserState/constant.ts":
3150
+ /*!**********************************************!*\
3151
+ !*** ./src/components/UserState/constant.ts ***!
3152
+ \**********************************************/
3153
+ /***/ ((__unused_webpack_module, exports) => {
3154
+
3155
+ "use strict";
3156
+ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.userStateLabels = void 0;\nexports.userStateLabels = {\n availableTooltip: 'Availability State',\n customWithAvailableTooltip: 'You are currently engaged in an interaction and in the Available state.',\n customWithIdleStateTooltip: 'You are currently engaged in an interaction and in the idle state {{currentState}}.',\n};\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/constant.ts?");
3157
+
3158
+ /***/ }),
3159
+
3149
3160
  /***/ "./src/components/UserState/user-state.tsx":
3150
3161
  /*!*************************************************!*\
3151
3162
  !*** ./src/components/UserState/user-state.tsx ***!
@@ -3153,7 +3164,7 @@ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\n\n\n
3153
3164
  /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
3154
3165
 
3155
3166
  "use strict";
3156
- eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\nconst user_state_types_1 = __webpack_require__(/*! ./user-state.types */ \"./src/components/UserState/user-state.types.ts\");\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\n__webpack_require__(/*! ./user-state.scss */ \"./src/components/UserState/user-state.scss\");\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst collections_1 = __webpack_require__(/*! @react-stately/collections */ \"../../../node_modules/@react-stately/collections/dist/main.js\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst UserStateComponent = (props) => {\n const { idleCodes, setAgentStatus, isSettingAgentStatus, elapsedTime, lastIdleStateChangeElapsedTime, currentState, customState, } = props;\n const previousSelectableState = (0, react_1.useMemo)(() => {\n var _a, _b;\n return (_b = (_a = idleCodes.find((code) => code.id !== user_state_types_1.AgentUserState.RONA && code.id !== user_state_types_1.AgentUserState.Engaged)) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '0';\n }, [idleCodes]);\n let selectedKey;\n if (customState) {\n selectedKey = `hide-${customState.developerName}`;\n }\n else {\n selectedKey = currentState;\n }\n const items = customState\n ? [{ name: customState.name, id: `hide-${customState.developerName}`, developerName: customState.developerName }]\n : [];\n for (const item of idleCodes) {\n if (item.name === user_state_types_1.AgentUserState.RONA && item.id === currentState) {\n selectedKey = `hide-${item.id}`;\n }\n if (item.name === user_state_types_1.AgentUserState.RONA && item.id !== currentState) {\n continue; // Skip RONA unless it matches the current state\n }\n items.push(Object.assign(Object.assign({}, item), { id: item.name === user_state_types_1.AgentUserState.RONA ? `hide-${item.id}` : item.id }));\n }\n const getDropdownClass = () => {\n if (customState) {\n return 'custom'; // Custom state class\n }\n if (currentState === '0') {\n return '';\n }\n for (const item of idleCodes) {\n if (item.id === currentState && item.name === user_state_types_1.AgentUserState.RONA) {\n return 'rona';\n }\n }\n return 'idle';\n };\n const getIconStyle = (item) => {\n if (item.developerName) {\n return { class: 'custom', iconName: 'busy-presence-light' };\n }\n switch (item.id) {\n case '0':\n return { class: 'available', iconName: 'active-presence-small-filled' };\n case item.name === user_state_types_1.AgentUserState.RONA && item.id:\n return { class: 'rona', iconName: 'dnd-presence-filled' };\n default:\n return { class: 'idle', iconName: 'recents-presence-filled' };\n }\n };\n // Sorts the dropdown items by keeping 'Available' at the top and sorting the rest alphabetically by name\n const sortedItems = [\n ...items.filter((item) => item.name === user_state_types_1.AgentUserState.Available),\n ...items.filter((item) => item.name !== user_state_types_1.AgentUserState.Available).sort((a, b) => a.name.localeCompare(b.name)),\n ];\n return (react_1.default.createElement(\"div\", { className: \"user-state-container\" },\n react_1.default.createElement(react_collaboration_1.SelectNext, { label: \"\", \"aria-label\": \"user-state\", direction: \"bottom\", onSelectionChange: (key) => {\n const cleanKey = key.startsWith('hide-') ? key.substring(5) : key;\n setAgentStatus(cleanKey);\n }, showBorder: true, selectedKey: selectedKey, items: sortedItems, className: `state-select ${getDropdownClass()}` }, (item) => {\n var _a;\n const isRonaOrEngaged = [user_state_types_1.AgentUserState.RONA, user_state_types_1.AgentUserState.Engaged].includes(((_a = idleCodes.find((code) => code.id === currentState)) === null || _a === void 0 ? void 0 : _a.name) || '');\n const shouldHighlight = currentState === item.id || (isRonaOrEngaged && item.id === previousSelectableState);\n return (react_1.default.createElement(collections_1.Item, { key: item.id, textValue: item.name },\n react_1.default.createElement(\"div\", { className: `item-container ${shouldHighlight ? `selected ${getIconStyle(item).class}` : ''}` },\n react_1.default.createElement(react_2.Icon, { name: getIconStyle(item).iconName, title: \"\", className: `state-icon ${getIconStyle(item).class}` }),\n react_1.default.createElement(react_collaboration_1.Text, { className: `state-name ${getIconStyle(item).class}`, tagName: 'small' }, item.name))));\n }),\n !customState && (react_1.default.createElement(\"span\", { className: `elapsedTime ${isSettingAgentStatus ? 'elapsedTime-disabled' : ''}` },\n lastIdleStateChangeElapsedTime >= 0 ? (0, utils_1.formatTime)(lastIdleStateChangeElapsedTime) + ' / ' : '',\n (0, utils_1.formatTime)(elapsedTime))),\n react_1.default.createElement(react_2.Icon, { className: \"select-arrow-icon\", name: \"arrow-down-bold\", title: \"\" })));\n};\nexports[\"default\"] = UserStateComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/user-state.tsx?");
3167
+ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\nconst user_state_types_1 = __webpack_require__(/*! ./user-state.types */ \"./src/components/UserState/user-state.types.ts\");\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\n__webpack_require__(/*! ./user-state.scss */ \"./src/components/UserState/user-state.scss\");\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst collections_1 = __webpack_require__(/*! @react-stately/collections */ \"../../../node_modules/@react-stately/collections/dist/main.js\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst constant_1 = __webpack_require__(/*! ./constant */ \"./src/components/UserState/constant.ts\");\nconst UserStateComponent = (props) => {\n const { idleCodes, setAgentStatus, isSettingAgentStatus, elapsedTime, lastIdleStateChangeElapsedTime, currentState, customState, } = props;\n const previousSelectableState = (0, react_1.useMemo)(() => {\n var _a, _b;\n return (_b = (_a = idleCodes.find((code) => code.id !== user_state_types_1.AgentUserState.RONA && code.id !== user_state_types_1.AgentUserState.Engaged)) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '0';\n }, [idleCodes]);\n let selectedKey;\n if (customState) {\n selectedKey = `hide-${customState.developerName}`;\n }\n else {\n selectedKey = currentState;\n }\n const items = customState\n ? [{ name: customState.name, id: `hide-${customState.developerName}`, developerName: customState.developerName }]\n : [];\n for (const item of idleCodes) {\n if (item.name === user_state_types_1.AgentUserState.RONA && item.id === currentState) {\n selectedKey = `hide-${item.id}`;\n }\n if (item.name === user_state_types_1.AgentUserState.RONA && item.id !== currentState) {\n continue; // Skip RONA unless it matches the current state\n }\n items.push(Object.assign(Object.assign({}, item), { id: item.name === user_state_types_1.AgentUserState.RONA ? `hide-${item.id}` : item.id }));\n }\n const getDropdownClass = () => {\n if (customState) {\n return 'custom'; // Custom state class\n }\n if (currentState === '0') {\n return '';\n }\n for (const item of idleCodes) {\n if (item.id === currentState && item.name === user_state_types_1.AgentUserState.RONA) {\n return 'rona';\n }\n }\n return 'idle';\n };\n const getIconStyle = (item) => {\n if (item.developerName) {\n return { class: 'custom', iconName: 'busy-presence-light' };\n }\n switch (item.id) {\n case '0':\n return { class: 'available', iconName: 'active-presence-small-filled' };\n case item.name === user_state_types_1.AgentUserState.RONA && item.id:\n return { class: 'rona', iconName: 'dnd-presence-filled' };\n default:\n return { class: 'idle', iconName: 'recents-presence-filled' };\n }\n };\n const getTooltipText = () => {\n if (customState && customState.developerName === 'ENGAGED') {\n const currentStateObj = idleCodes.find((item) => item.id === currentState);\n if (currentStateObj.name === user_state_types_1.AgentUserState.Available) {\n return constant_1.userStateLabels.customWithAvailableTooltip;\n }\n else {\n return constant_1.userStateLabels.customWithIdleStateTooltip.replace(/{{.*?}}/g, currentStateObj.name);\n }\n }\n return constant_1.userStateLabels.availableTooltip;\n };\n // Sorts the dropdown items by keeping 'Available' at the top and sorting the rest alphabetically by name\n const sortedItems = [\n ...items.filter((item) => item.name === user_state_types_1.AgentUserState.Available),\n ...items.filter((item) => item.name !== user_state_types_1.AgentUserState.Available).sort((a, b) => a.name.localeCompare(b.name)),\n ];\n return (react_1.default.createElement(\"div\", { className: \"user-state-container\" },\n react_1.default.createElement(react_collaboration_1.SelectNext, { id: \"user-state-tooltip\", label: \"\", \"aria-label\": \"user-state\", direction: \"bottom\", onSelectionChange: (key) => {\n const cleanKey = key.startsWith('hide-') ? key.substring(5) : key;\n setAgentStatus(cleanKey);\n }, showBorder: true, selectedKey: selectedKey, items: sortedItems, className: `state-select ${getDropdownClass()}` }, (item) => {\n var _a;\n const isRonaOrEngaged = [user_state_types_1.AgentUserState.RONA, user_state_types_1.AgentUserState.Engaged].includes(((_a = idleCodes.find((code) => code.id === currentState)) === null || _a === void 0 ? void 0 : _a.name) || '');\n const shouldHighlight = currentState === item.id || (isRonaOrEngaged && item.id === previousSelectableState);\n return (react_1.default.createElement(collections_1.Item, { key: item.id, textValue: item.name },\n react_1.default.createElement(\"div\", { className: `item-container ${shouldHighlight ? `selected ${getIconStyle(item).class}` : ''}` },\n react_1.default.createElement(react_2.Icon, { name: getIconStyle(item).iconName, title: \"\", className: `state-icon ${getIconStyle(item).class}` }),\n react_1.default.createElement(react_collaboration_1.Text, { className: `state-name ${getIconStyle(item).class}`, tagName: 'small' }, item.name))));\n }),\n react_1.default.createElement(react_2.Tooltip, { placement: \"bottom\", color: \"contrast\", delay: \"0, 0\", className: \"tooltip\", triggerID: \"user-state-tooltip\" },\n react_1.default.createElement(react_collaboration_1.Text, { tagName: \"small\", className: \"tooltip-text\" }, getTooltipText())),\n !customState && (react_1.default.createElement(\"span\", { className: `elapsedTime ${isSettingAgentStatus ? 'elapsedTime-disabled' : ''}` },\n lastIdleStateChangeElapsedTime >= 0 ? (0, utils_1.formatTime)(lastIdleStateChangeElapsedTime) + ' / ' : '',\n (0, utils_1.formatTime)(elapsedTime))),\n react_1.default.createElement(react_2.Icon, { className: \"select-arrow-icon\", name: \"arrow-down-bold\", title: \"\" })));\n};\nexports[\"default\"] = UserStateComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/user-state.tsx?");
3157
3168
 
3158
3169
  /***/ }),
3159
3170
 
package/dist/types/components/UserState/constant.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ export declare const userStateLabels: {
2
+ availableTooltip: string;
3
+ customWithAvailableTooltip: string;
4
+ customWithIdleStateTooltip: string;
5
+ };
package/dist/wc.js CHANGED
@@ -2889,7 +2889,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
2889
2889
  /***/ ((module, __webpack_exports__, __webpack_require__) => {
2890
2890
 
2891
2891
  "use strict";
2892
- eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../node_modules/css-loader/dist/runtime/api.js */ \"../../../node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.user-state-container {\n position: relative;\n width: 100%; /* Ensure the select trigger takes the full width of its parent */\n display: flex;\n align-items: center;\n justify-content: space-between; /* Space out the elements within the select trigger */\n}\n\n.select-trigger .md-select {\n width: 100%; /* Ensure the SelectNext component takes the full width of its parent */\n}\n\n.elapsedTime {\n position: absolute;\n right: 2rem; /* Adjusted to leave space for the arrow icon */\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n z-index: 1;\n color: var(--mds-color-theme-text-primary-normal);\n white-space: nowrap; /* Prevent the text from wrapping */\n padding: 0 0.5rem; /* Add some padding */\n border-radius: 0.25rem; /* Add some border radius */\n}\n\n.state-name {\n color: var(--mds-color-theme-text-primary-normal);\n}\n.state-name.rona {\n color: var(--mds-color-theme-text-error-normal);\n}\n.state-name.custom {\n color: var(--mds-color-theme-text-warning-normal);\n}\n\n.elapsedTime-disabled {\n color: #ccc;\n}\n\n.item-container {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.hide-this {\n display: none;\n}\n\n.state-icon {\n --mdc-icon-fill-color: var(--mds-color-theme-indicator-stable);\n}\n.state-icon.idle {\n --mdc-icon-fill-color: var(--mds-color-theme-indicator-locked);\n}\n.state-icon.rona {\n --mdc-icon-fill-color: var(--mds-color-theme-outline-cancel-normal);\n}\n.state-icon.custom {\n --mdc-icon-fill-color: var(--mds-color-theme-text-team-gold-hover);\n}\n\n.state-select {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-success-normal);\n}\n.state-select .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-success-normal);\n}\n.state-select.idle {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-primary-active);\n}\n.state-select.idle .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-secondary-normal);\n}\n.state-select.rona {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-error-active);\n}\n.state-select.rona .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-error-normal);\n border: 1px solid var(--mds-color-theme-outline-cancel-normal);\n}\n.state-select.custom {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-warning-active);\n}\n.state-select.custom .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-warning-normal);\n border: 1px solid var(--mds-color-theme-text-team-gold-hover);\n}\n.state-select.available {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-success-normal);\n}\n.state-select.available .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-success-normal);\n border: 1px solid var(--mds-color-theme-outline-join-normal);\n}\n.state-select .md-select-popover ul li[data-key^=hide-] {\n display: none;\n}\n.state-select .item-container.selected.available .state-icon {\n --mdc-icon-fill-color: var(--mds-color-theme-outline-join-normal);\n}\n.state-select .item-container.selected.available .state-name {\n color: var(--mds-color-theme-outline-join-normal);\n}\n.state-select .item-container.selected.idle .state-icon {\n --mdc-icon-fill-color: var(--mds-color-theme-text-primary-normal);\n}\n.state-select .item-container.selected.idle .state-name {\n color: var(--mds-color-theme-text-primary-normal);\n}\n\n.select-arrow-icon {\n position: absolute;\n right: 1rem; /* Adjusted to leave space for the arrow icon */\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n z-index: 1;\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/user-state.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
2892
+ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */ \"default\": () => (__WEBPACK_DEFAULT_EXPORT__)\n/* harmony export */ });\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../../../../../../node_modules/css-loader/dist/runtime/noSourceMaps.js */ \"../../../node_modules/css-loader/dist/runtime/noSourceMaps.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../../../../../../node_modules/css-loader/dist/runtime/api.js */ \"../../../node_modules/css-loader/dist/runtime/api.js\");\n/* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);\n// Imports\n\n\nvar ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, `.user-state-container {\n position: relative;\n width: 100%; /* Ensure the select trigger takes the full width of its parent */\n display: flex;\n align-items: center;\n justify-content: space-between; /* Space out the elements within the select trigger */\n}\n\n.select-trigger .md-select {\n width: 100%; /* Ensure the SelectNext component takes the full width of its parent */\n}\n\n.elapsedTime {\n position: absolute;\n right: 2rem; /* Adjusted to leave space for the arrow icon */\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n z-index: 1;\n color: var(--mds-color-theme-text-primary-normal);\n white-space: nowrap; /* Prevent the text from wrapping */\n padding: 0 0.5rem; /* Add some padding */\n border-radius: 0.25rem; /* Add some border radius */\n}\n\n.state-name {\n color: var(--mds-color-theme-text-primary-normal);\n}\n.state-name.rona {\n color: var(--mds-color-theme-text-error-normal);\n}\n.state-name.custom {\n color: var(--mds-color-theme-text-warning-normal);\n}\n\n.elapsedTime-disabled {\n color: #ccc;\n}\n\n.item-container {\n display: flex;\n align-items: center;\n gap: 0.25rem;\n}\n\n.hide-this {\n display: none;\n}\n\n.state-icon {\n --mdc-icon-fill-color: var(--mds-color-theme-indicator-stable);\n}\n.state-icon.idle {\n --mdc-icon-fill-color: var(--mds-color-theme-indicator-locked);\n}\n.state-icon.rona {\n --mdc-icon-fill-color: var(--mds-color-theme-outline-cancel-normal);\n}\n.state-icon.custom {\n --mdc-icon-fill-color: var(--mds-color-theme-text-team-gold-hover);\n}\n\n.state-select {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-success-normal);\n}\n.state-select .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-success-normal);\n}\n.state-select.idle {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-primary-active);\n}\n.state-select.idle .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-secondary-normal);\n}\n.state-select.rona {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-error-active);\n}\n.state-select.rona .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-error-normal);\n border: 1px solid var(--mds-color-theme-outline-cancel-normal);\n}\n.state-select.custom {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-warning-active);\n}\n.state-select.custom .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-warning-normal);\n border: 1px solid var(--mds-color-theme-text-team-gold-hover);\n}\n.state-select.available {\n width: 100%;\n --mds-color-theme-background-primary-active: var(--mds-color-theme-background-alert-success-normal);\n}\n.state-select.available .md-select-dropdown-input {\n background-color: var(--mds-color-theme-background-alert-success-normal);\n border: 1px solid var(--mds-color-theme-outline-join-normal);\n}\n.state-select .md-select-popover ul li[data-key^=hide-] {\n display: none;\n}\n.state-select .item-container.selected.available .state-icon {\n --mdc-icon-fill-color: var(--mds-color-theme-outline-join-normal);\n}\n.state-select .item-container.selected.available .state-name {\n color: var(--mds-color-theme-outline-join-normal);\n}\n.state-select .item-container.selected.idle .state-icon {\n --mdc-icon-fill-color: var(--mds-color-theme-text-primary-normal);\n}\n.state-select .item-container.selected.idle .state-name {\n color: var(--mds-color-theme-text-primary-normal);\n}\n\n.select-arrow-icon {\n position: absolute;\n right: 1rem; /* Adjusted to leave space for the arrow icon */\n top: 50%;\n transform: translateY(-50%);\n display: flex;\n align-items: center;\n pointer-events: none;\n z-index: 1;\n}\n\n.tooltip.md-modal-container-wrapper {\n color: var(--mds-color-theme-inverted-text-primary-normal);\n background-color: var(--mds-color-theme-inverted-background-normal) !important;\n max-width: 19rem;\n}\n\n.tooltip .md-modal-container-arrow-wrapper .md-modal-arrow-svg path {\n fill: var(--mds-color-theme-inverted-background-normal) !important;\n}\n\n.tooltip-text {\n text-align: center;\n}`, \"\"]);\n// Exports\n/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/user-state.scss?../../../node_modules/css-loader/dist/cjs.js!../../../node_modules/sass-loader/dist/cjs.js");
2893
2893
 
2894
2894
  /***/ }),
2895
2895
 
@@ -3124,6 +3124,17 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
3124
3124
 
3125
3125
  /***/ }),
3126
3126
 
3127
+ /***/ "./src/components/UserState/constant.ts":
3128
+ /*!**********************************************!*\
3129
+ !*** ./src/components/UserState/constant.ts ***!
3130
+ \**********************************************/
3131
+ /***/ ((__unused_webpack_module, exports) => {
3132
+
3133
+ "use strict";
3134
+ eval("\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nexports.userStateLabels = void 0;\nexports.userStateLabels = {\n availableTooltip: 'Availability State',\n customWithAvailableTooltip: 'You are currently engaged in an interaction and in the Available state.',\n customWithIdleStateTooltip: 'You are currently engaged in an interaction and in the idle state {{currentState}}.',\n};\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/constant.ts?");
3135
+
3136
+ /***/ }),
3137
+
3127
3138
  /***/ "./src/components/UserState/user-state.tsx":
3128
3139
  /*!*************************************************!*\
3129
3140
  !*** ./src/components/UserState/user-state.tsx ***!
@@ -3131,7 +3142,7 @@ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ?
3131
3142
  /***/ (function(__unused_webpack_module, exports, __webpack_require__) {
3132
3143
 
3133
3144
  "use strict";
3134
- eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\nconst user_state_types_1 = __webpack_require__(/*! ./user-state.types */ \"./src/components/UserState/user-state.types.ts\");\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\n__webpack_require__(/*! ./user-state.scss */ \"./src/components/UserState/user-state.scss\");\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst collections_1 = __webpack_require__(/*! @react-stately/collections */ \"../../../node_modules/@react-stately/collections/dist/main.js\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst UserStateComponent = (props) => {\n const { idleCodes, setAgentStatus, isSettingAgentStatus, elapsedTime, lastIdleStateChangeElapsedTime, currentState, customState, } = props;\n const previousSelectableState = (0, react_1.useMemo)(() => {\n var _a, _b;\n return (_b = (_a = idleCodes.find((code) => code.id !== user_state_types_1.AgentUserState.RONA && code.id !== user_state_types_1.AgentUserState.Engaged)) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '0';\n }, [idleCodes]);\n let selectedKey;\n if (customState) {\n selectedKey = `hide-${customState.developerName}`;\n }\n else {\n selectedKey = currentState;\n }\n const items = customState\n ? [{ name: customState.name, id: `hide-${customState.developerName}`, developerName: customState.developerName }]\n : [];\n for (const item of idleCodes) {\n if (item.name === user_state_types_1.AgentUserState.RONA && item.id === currentState) {\n selectedKey = `hide-${item.id}`;\n }\n if (item.name === user_state_types_1.AgentUserState.RONA && item.id !== currentState) {\n continue; // Skip RONA unless it matches the current state\n }\n items.push(Object.assign(Object.assign({}, item), { id: item.name === user_state_types_1.AgentUserState.RONA ? `hide-${item.id}` : item.id }));\n }\n const getDropdownClass = () => {\n if (customState) {\n return 'custom'; // Custom state class\n }\n if (currentState === '0') {\n return '';\n }\n for (const item of idleCodes) {\n if (item.id === currentState && item.name === user_state_types_1.AgentUserState.RONA) {\n return 'rona';\n }\n }\n return 'idle';\n };\n const getIconStyle = (item) => {\n if (item.developerName) {\n return { class: 'custom', iconName: 'busy-presence-light' };\n }\n switch (item.id) {\n case '0':\n return { class: 'available', iconName: 'active-presence-small-filled' };\n case item.name === user_state_types_1.AgentUserState.RONA && item.id:\n return { class: 'rona', iconName: 'dnd-presence-filled' };\n default:\n return { class: 'idle', iconName: 'recents-presence-filled' };\n }\n };\n // Sorts the dropdown items by keeping 'Available' at the top and sorting the rest alphabetically by name\n const sortedItems = [\n ...items.filter((item) => item.name === user_state_types_1.AgentUserState.Available),\n ...items.filter((item) => item.name !== user_state_types_1.AgentUserState.Available).sort((a, b) => a.name.localeCompare(b.name)),\n ];\n return (react_1.default.createElement(\"div\", { className: \"user-state-container\" },\n react_1.default.createElement(react_collaboration_1.SelectNext, { label: \"\", \"aria-label\": \"user-state\", direction: \"bottom\", onSelectionChange: (key) => {\n const cleanKey = key.startsWith('hide-') ? key.substring(5) : key;\n setAgentStatus(cleanKey);\n }, showBorder: true, selectedKey: selectedKey, items: sortedItems, className: `state-select ${getDropdownClass()}` }, (item) => {\n var _a;\n const isRonaOrEngaged = [user_state_types_1.AgentUserState.RONA, user_state_types_1.AgentUserState.Engaged].includes(((_a = idleCodes.find((code) => code.id === currentState)) === null || _a === void 0 ? void 0 : _a.name) || '');\n const shouldHighlight = currentState === item.id || (isRonaOrEngaged && item.id === previousSelectableState);\n return (react_1.default.createElement(collections_1.Item, { key: item.id, textValue: item.name },\n react_1.default.createElement(\"div\", { className: `item-container ${shouldHighlight ? `selected ${getIconStyle(item).class}` : ''}` },\n react_1.default.createElement(react_2.Icon, { name: getIconStyle(item).iconName, title: \"\", className: `state-icon ${getIconStyle(item).class}` }),\n react_1.default.createElement(react_collaboration_1.Text, { className: `state-name ${getIconStyle(item).class}`, tagName: 'small' }, item.name))));\n }),\n !customState && (react_1.default.createElement(\"span\", { className: `elapsedTime ${isSettingAgentStatus ? 'elapsedTime-disabled' : ''}` },\n lastIdleStateChangeElapsedTime >= 0 ? (0, utils_1.formatTime)(lastIdleStateChangeElapsedTime) + ' / ' : '',\n (0, utils_1.formatTime)(elapsedTime))),\n react_1.default.createElement(react_2.Icon, { className: \"select-arrow-icon\", name: \"arrow-down-bold\", title: \"\" })));\n};\nexports[\"default\"] = UserStateComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/user-state.tsx?");
3145
+ eval("\nvar __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n var desc = Object.getOwnPropertyDescriptor(m, k);\n if (!desc || (\"get\" in desc ? !m.__esModule : desc.writable || desc.configurable)) {\n desc = { enumerable: true, get: function() { return m[k]; } };\n }\n Object.defineProperty(o, k2, desc);\n}) : (function(o, m, k, k2) {\n if (k2 === undefined) k2 = k;\n o[k2] = m[k];\n}));\nvar __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {\n Object.defineProperty(o, \"default\", { enumerable: true, value: v });\n}) : function(o, v) {\n o[\"default\"] = v;\n});\nvar __importStar = (this && this.__importStar) || function (mod) {\n if (mod && mod.__esModule) return mod;\n var result = {};\n if (mod != null) for (var k in mod) if (k !== \"default\" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);\n __setModuleDefault(result, mod);\n return result;\n};\nObject.defineProperty(exports, \"__esModule\", ({ value: true }));\nconst react_1 = __importStar(__webpack_require__(/*! react */ \"react\"));\nconst user_state_types_1 = __webpack_require__(/*! ./user-state.types */ \"./src/components/UserState/user-state.types.ts\");\nconst utils_1 = __webpack_require__(/*! ../../utils */ \"./src/utils/index.ts\");\n__webpack_require__(/*! ./user-state.scss */ \"./src/components/UserState/user-state.scss\");\nconst react_collaboration_1 = __webpack_require__(/*! @momentum-ui/react-collaboration */ \"@momentum-ui/react-collaboration\");\nconst collections_1 = __webpack_require__(/*! @react-stately/collections */ \"../../../node_modules/@react-stately/collections/dist/main.js\");\nconst react_2 = __webpack_require__(/*! @momentum-design/components/dist/react */ \"../../../node_modules/@momentum-design/components/dist/react/index.js\");\nconst constant_1 = __webpack_require__(/*! ./constant */ \"./src/components/UserState/constant.ts\");\nconst UserStateComponent = (props) => {\n const { idleCodes, setAgentStatus, isSettingAgentStatus, elapsedTime, lastIdleStateChangeElapsedTime, currentState, customState, } = props;\n const previousSelectableState = (0, react_1.useMemo)(() => {\n var _a, _b;\n return (_b = (_a = idleCodes.find((code) => code.id !== user_state_types_1.AgentUserState.RONA && code.id !== user_state_types_1.AgentUserState.Engaged)) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : '0';\n }, [idleCodes]);\n let selectedKey;\n if (customState) {\n selectedKey = `hide-${customState.developerName}`;\n }\n else {\n selectedKey = currentState;\n }\n const items = customState\n ? [{ name: customState.name, id: `hide-${customState.developerName}`, developerName: customState.developerName }]\n : [];\n for (const item of idleCodes) {\n if (item.name === user_state_types_1.AgentUserState.RONA && item.id === currentState) {\n selectedKey = `hide-${item.id}`;\n }\n if (item.name === user_state_types_1.AgentUserState.RONA && item.id !== currentState) {\n continue; // Skip RONA unless it matches the current state\n }\n items.push(Object.assign(Object.assign({}, item), { id: item.name === user_state_types_1.AgentUserState.RONA ? `hide-${item.id}` : item.id }));\n }\n const getDropdownClass = () => {\n if (customState) {\n return 'custom'; // Custom state class\n }\n if (currentState === '0') {\n return '';\n }\n for (const item of idleCodes) {\n if (item.id === currentState && item.name === user_state_types_1.AgentUserState.RONA) {\n return 'rona';\n }\n }\n return 'idle';\n };\n const getIconStyle = (item) => {\n if (item.developerName) {\n return { class: 'custom', iconName: 'busy-presence-light' };\n }\n switch (item.id) {\n case '0':\n return { class: 'available', iconName: 'active-presence-small-filled' };\n case item.name === user_state_types_1.AgentUserState.RONA && item.id:\n return { class: 'rona', iconName: 'dnd-presence-filled' };\n default:\n return { class: 'idle', iconName: 'recents-presence-filled' };\n }\n };\n const getTooltipText = () => {\n if (customState && customState.developerName === 'ENGAGED') {\n const currentStateObj = idleCodes.find((item) => item.id === currentState);\n if (currentStateObj.name === user_state_types_1.AgentUserState.Available) {\n return constant_1.userStateLabels.customWithAvailableTooltip;\n }\n else {\n return constant_1.userStateLabels.customWithIdleStateTooltip.replace(/{{.*?}}/g, currentStateObj.name);\n }\n }\n return constant_1.userStateLabels.availableTooltip;\n };\n // Sorts the dropdown items by keeping 'Available' at the top and sorting the rest alphabetically by name\n const sortedItems = [\n ...items.filter((item) => item.name === user_state_types_1.AgentUserState.Available),\n ...items.filter((item) => item.name !== user_state_types_1.AgentUserState.Available).sort((a, b) => a.name.localeCompare(b.name)),\n ];\n return (react_1.default.createElement(\"div\", { className: \"user-state-container\" },\n react_1.default.createElement(react_collaboration_1.SelectNext, { id: \"user-state-tooltip\", label: \"\", \"aria-label\": \"user-state\", direction: \"bottom\", onSelectionChange: (key) => {\n const cleanKey = key.startsWith('hide-') ? key.substring(5) : key;\n setAgentStatus(cleanKey);\n }, showBorder: true, selectedKey: selectedKey, items: sortedItems, className: `state-select ${getDropdownClass()}` }, (item) => {\n var _a;\n const isRonaOrEngaged = [user_state_types_1.AgentUserState.RONA, user_state_types_1.AgentUserState.Engaged].includes(((_a = idleCodes.find((code) => code.id === currentState)) === null || _a === void 0 ? void 0 : _a.name) || '');\n const shouldHighlight = currentState === item.id || (isRonaOrEngaged && item.id === previousSelectableState);\n return (react_1.default.createElement(collections_1.Item, { key: item.id, textValue: item.name },\n react_1.default.createElement(\"div\", { className: `item-container ${shouldHighlight ? `selected ${getIconStyle(item).class}` : ''}` },\n react_1.default.createElement(react_2.Icon, { name: getIconStyle(item).iconName, title: \"\", className: `state-icon ${getIconStyle(item).class}` }),\n react_1.default.createElement(react_collaboration_1.Text, { className: `state-name ${getIconStyle(item).class}`, tagName: 'small' }, item.name))));\n }),\n react_1.default.createElement(react_2.Tooltip, { placement: \"bottom\", color: \"contrast\", delay: \"0, 0\", className: \"tooltip\", triggerID: \"user-state-tooltip\" },\n react_1.default.createElement(react_collaboration_1.Text, { tagName: \"small\", className: \"tooltip-text\" }, getTooltipText())),\n !customState && (react_1.default.createElement(\"span\", { className: `elapsedTime ${isSettingAgentStatus ? 'elapsedTime-disabled' : ''}` },\n lastIdleStateChangeElapsedTime >= 0 ? (0, utils_1.formatTime)(lastIdleStateChangeElapsedTime) + ' / ' : '',\n (0, utils_1.formatTime)(elapsedTime))),\n react_1.default.createElement(react_2.Icon, { className: \"select-arrow-icon\", name: \"arrow-down-bold\", title: \"\" })));\n};\nexports[\"default\"] = UserStateComponent;\n\n\n//# sourceURL=webpack://@webex/cc-components/./src/components/UserState/user-state.tsx?");
3135
3146
 
3136
3147
  /***/ }),
3137
3148
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@webex/cc-components",
3
3
  "description": "Webex Contact Center UI Components Library for your custom contact center solutions",
4
- "version": "1.28.0-ccwidgets.59",
4
+ "version": "1.28.0-ccwidgets.60",
5
5
  "main": "dist/index.js",
6
6
  "publishConfig": {
7
7
  "access": "public"
@@ -25,7 +25,7 @@
25
25
  },
26
26
  "dependencies": {
27
27
  "@r2wc/react-to-web-component": "2.0.3",
28
- "@webex/cc-store": "1.28.0-ccwidgets.59"
28
+ "@webex/cc-store": "1.28.0-ccwidgets.60"
29
29
  },
30
30
  "devDependencies": {
31
31
  "@babel/core": "7.25.2",