@capillarytech/blaze-ui 5.23.3-beta.2 → 5.23.3-beta.4

package/CapModal/messages.js

@@ -1,17 +1,16 @@
-/*
- * CapModal Messages
- *
- * This contains all the text for the CapModal component.
- */
-import { defineMessages } from 'react-intl';
-export var scope = 'app.commonUtils.capUiLibrary.CapModal';
-export default defineMessages({
+import { defineMessages } from "react-intl";
+const scope = "app.commonUtils.capUiLibrary.CapModal";
+const messages = defineMessages({
   okText: {
-    id: scope + ".okText",
-    defaultMessage: 'Yes'
+    id: `${scope}.okText`,
+    defaultMessage: "Yes"
   },
   closeText: {
-    id: scope + ".closeText",
-    defaultMessage: 'No'
+    id: `${scope}.closeText`,
+    defaultMessage: "No"
   }
-});
+});
+export {
+  messages as default,
+  scope
+};

package/CapModal/styles.module.css

@@ -0,0 +1,38 @@
+/* Color Palette */
+/* Fonts */
+/* Backward Compatibility Aliases */
+/* Component Heights */
+/* Border Radius */
+/* Border Width */
+/* Transition */
+/* Timezones Footer */
+.cap-modal-v2-container {
+  margin: 0 auto;
+}
+.cap-modal-v2-header {
+  border-bottom: none;
+}
+.cap-modal-v2-body {
+  padding-bottom: 0rem;
+}
+.cap-modal-v2-default-footer {
+  display: flex;
+  gap: 0.571rem;
+}
+.cap-modal-v2-default-footer .ant-btn {
+  border: transparent;
+}
+.cap-modal-v2-close {
+  color: #091e42;
+}
+.ant-modal-container {
+  margin: 0 auto;
+}
+.ant-modal .ant-modal-footer {
+  display: flex;
+  gap: 0.571rem;
+  text-align: start;
+}
+.ant-modal .ant-modal-footer .ant-btn {
+  border: transparent;
+}

package/CapModal/styles.module.scss.js

@@ -0,0 +1,11 @@
+import './styles.module.css';const styles = {
+  "cap-modal-v2-container": "cap-modal-v2-container",
+  "cap-modal-v2-header": "cap-modal-v2-header",
+  "cap-modal-v2-body": "cap-modal-v2-body",
+  "cap-modal-v2-default-footer": "cap-modal-v2-default-footer",
+  "ant-btn": "ant-btn",
+  "cap-modal-v2-close": "cap-modal-v2-close"
+};
+export {
+  styles as default
+};

package/CapModal/styles.scss

@@ -20,7 +20,7 @@ $modal: cap-modal-v2;
   display: flex;
   gap: $cap-space-08;
 
-  .ant-btn_oo7PI {
+  .ant-btn {
     border: transparent;
   }
 }
@@ -30,16 +30,16 @@ $modal: cap-modal-v2;
   color: $CAP_G01;
 }
 
-.ant-modal-container {
+:global(.ant-modal-container) {
   margin: 0 auto;
 }
 
-.ant-modal .ant-modal-footer {
+:global(.ant-modal .ant-modal-footer) {
   display: flex;
   gap: $cap-space-08;
   text-align: start;
 
-  .ant-btn_oo7PI {
+  .ant-btn {
     border: transparent;
   }
 }

package/CapMultiSelect/index.js

@@ -1,29 +1,18 @@
-var _excluded = ["placeholder", "triggerClassName", "disabled", "width", "closeText", "noResultsFoundText", "selectedText", "popoverClassName", "searchKey", "onSelect", "treeData", "appliedKeys", "getPopupContainer"];
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React from 'react';
-import CapUnifiedSelect from "../CapUnifiedSelect";
-import { SELECT_TYPES } from "../CapUnifiedSelect/constants";
-import './styles.scss';
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Converts CapMultiSelect treeData shape to CapUnifiedSelect options (OptionData) shape.
- * treeData: { key, title, children?, info?, className? }[]
- * OptionData: { value, label, title?, children?, optionTooltipInfo? }[]
- */
+import { jsx } from "react/jsx-runtime";
+import CapUnifiedSelect from "../CapUnifiedSelect/index.js";
+import { SELECT_TYPES } from "../CapUnifiedSelect/constants.js";
+import styles from "./styles.module.scss.js";
 function treeDataToOptions(treeData) {
   if (!treeData || !Array.isArray(treeData)) return [];
-  return treeData.map(item => {
-    var option = _extends({
+  return treeData.map((item) => {
+    const option = {
       value: item.key,
       key: item.key,
       label: item.title,
-      title: item.title
-    }, item.info && {
-      optionTooltipInfo: item.info
-    }, item.className && {
-      className: item.className
-    });
+      title: item.title,
+      ...item.info && { optionTooltipInfo: item.info },
+      ...item.className && { className: item.className }
+    };
     if (item.children && item.children.length > 0) {
       option.children = treeDataToOptions(item.children);
     }
@@ -31,85 +20,69 @@ function treeDataToOptions(treeData) {
   });
 }
 function hasNestedChildren(data) {
-  var _data$some;
-  return (_data$some = data == null ? void 0 : data.some(item => item.children && item.children.length > 0)) != null ? _data$some : false;
+  return (data == null ? void 0 : data.some((item) => item.children && item.children.length > 0)) ?? false;
 }
-
-/**
- * Maps CapMultiSelect searchKey prop to CapUnifiedSelect searchBasedOn.
- */
 function mapSearchBasedOn(searchKey) {
-  if (searchKey === 'title') return 'label';
-  if (searchKey === 'key') return 'key';
-  return 'value';
+  if (searchKey === "title") return "label";
+  if (searchKey === "key") return "key";
+  return "value";
 }
-var POPOVER_CLASS_NAME = 'cap-multi-select-v2-popover';
-
-/** Normalize CapUnifiedSelect value to (string|number)[] for CapMultiSelect onSelect. */
+const POPOVER_CLASS_NAME = "cap-multi-select-v2-popover";
 function normalizeToKeys(value) {
   if (value == null) return [];
   return Array.isArray(value) ? value : [value];
 }
-
-/**
- * CapMultiSelect – multi-select with tree or flat options.
- * Uses CapUnifiedSelect internally. All CapMultiSelect props are mapped for backward compatibility.
- * Rest props are forwarded to CapUnifiedSelect so callers can override hardcoded defaults when needed.
- */
-var CapMultiSelect = _ref => {
-  var {
-      placeholder,
-      triggerClassName,
-      disabled,
-      width,
-      closeText,
-      noResultsFoundText,
-      selectedText,
-      popoverClassName,
-      searchKey = 'title',
-      onSelect,
-      treeData,
-      appliedKeys,
-      getPopupContainer = () => document.body
-    } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var options = treeDataToOptions(treeData);
-  var selectType = hasNestedChildren(treeData) ? SELECT_TYPES.MULTI_TREE_SELECT : SELECT_TYPES.MULTI_SELECT;
-  var resolvedPopoverClassName = [POPOVER_CLASS_NAME, popoverClassName].filter(Boolean).join(' ');
-  var handleChange = value => {
-    onSelect == null || onSelect(normalizeToKeys(value));
+const CapMultiSelect = ({
+  placeholder,
+  triggerClassName,
+  disabled,
+  width,
+  closeText,
+  noResultsFoundText,
+  selectedText,
+  popoverClassName,
+  searchKey = "title",
+  onSelect,
+  treeData,
+  appliedKeys,
+  getPopupContainer = () => document.body,
+  ...rest
+}) => {
+  const options = treeDataToOptions(treeData);
+  const selectType = hasNestedChildren(treeData) ? SELECT_TYPES.MULTI_TREE_SELECT : SELECT_TYPES.MULTI_SELECT;
+  const resolvedPopoverClassName = [POPOVER_CLASS_NAME, popoverClassName].filter(Boolean).join(" ");
+  const handleChange = (value) => {
+    onSelect == null ? void 0 : onSelect(normalizeToKeys(value));
   };
-  return /*#__PURE__*/_jsx("div", {
-    className: "cap-multi-select_2CVPt",
-    style: {
-      width: width
-    },
-    children: /*#__PURE__*/_jsx(CapUnifiedSelect, _extends({
+  return /* @__PURE__ */ jsx("div", { className: styles["cap-multi-select"], style: { width }, children: /* @__PURE__ */ jsx(
+    CapUnifiedSelect,
+    {
       type: selectType,
-      options: options,
+      options,
       value: appliedKeys,
       onChange: handleChange,
       onConfirm: handleChange,
-      placeholder: placeholder,
-      disabled: disabled,
+      placeholder,
+      disabled,
       clearText: closeText,
       noResultCustomText: noResultsFoundText,
       containerClassName: triggerClassName,
-      contentClassName: "cap-multi-select-content-full-width_PJLwY",
+      contentClassName: styles["cap-multi-select-content-full-width"],
       popoverClassName: resolvedPopoverClassName,
       showSearch: true,
       searchBasedOn: mapSearchBasedOn(searchKey),
       staticValue: true,
-      headerLabel: undefined,
+      headerLabel: void 0,
       allowClear: false,
-      style: width ? {
-        width
-      } : undefined,
-      getPopupContainer: getPopupContainer,
+      style: width ? { width } : void 0,
+      getPopupContainer,
       showSelectedCountInFooter: true,
-      selectedCountFooterText: selectedText != null ? selectedText : 'selected',
-      treeDefaultExpandAll: true
-    }, rest))
-  });
+      selectedCountFooterText: selectedText ?? "selected",
+      treeDefaultExpandAll: true,
+      ...rest
+    }
+  ) });
+};
+export {
+  CapMultiSelect as default
 };
-export default CapMultiSelect;

package/CapMultiSelect/styles.module.css

@@ -0,0 +1,10 @@
+/**
+ * CapMultiSelect styles.
+ * content-full-width: applied to CapUnifiedSelect content row so select is 100% width by default.
+ */
+.cap-multi-select {
+  width: 100%;
+}
+.cap-multi-select .cap-multi-select-content-full-width {
+  width: 100%;
+}

package/CapMultiSelect/styles.module.scss.js

@@ -0,0 +1,7 @@
+import './styles.module.css';const styles = {
+  "cap-multi-select": "cap-multi-select",
+  "cap-multi-select-content-full-width": "cap-multi-select-content-full-width"
+};
+export {
+  styles as default
+};

package/CapMultiSelect/styles.scss

@@ -3,10 +3,10 @@
  * content-full-width: applied to CapUnifiedSelect content row so select is 100% width by default.
  */
 
-.cap-multi-select_2CVPt {
+.cap-multi-select {
   width: 100%;
 
-  .cap-multi-select-content-full-width_PJLwY {
+  .cap-multi-select-content-full-width {
     width: 100%;
   }
 }

package/CapMultiSelectDatePicker/index.js

@@ -1,73 +1,69 @@
-/**
- *
- * CapMultiSelectDatePicker
- *
- */
-
-import classNames from 'classnames';
-import React from 'react';
-import { injectIntl } from 'react-intl';
-import messages from "./messages";
-import './styles.scss';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var renderLastDayOption = (selectedDays, lastDayText, _onClick) => {
-  var lastDayValue = -1;
-  var isSelected = selectedDays.indexOf(lastDayValue) !== -1;
-  return /*#__PURE__*/_jsx("th", {
-    colSpan: 4,
-    className: classNames("customTxt_TMSUS", {
-      ["customSelected_niMVA"]: isSelected
-    }),
-    onClick: () => _onClick == null ? void 0 : _onClick(lastDayValue),
-    children: lastDayText
-  }, lastDayValue);
+import { jsx, jsxs } from "react/jsx-runtime";
+import classNames from "classnames";
+import { injectIntl } from "react-intl";
+import messages from "./messages.js";
+import styles from "./styles.module.scss.js";
+const renderLastDayOption = (selectedDays, lastDayText, onClick) => {
+  const lastDayValue = -1;
+  const isSelected = selectedDays.indexOf(lastDayValue) !== -1;
+  return /* @__PURE__ */ jsx(
+    "th",
+    {
+      colSpan: 4,
+      className: classNames(styles.customTxt, {
+        [styles.customSelected]: isSelected
+      }),
+      onClick: () => onClick == null ? void 0 : onClick(lastDayValue),
+      children: lastDayText
+    },
+    lastDayValue
+  );
 };
-var CapMultiSelectDatePicker = _ref => {
-  var {
-    selected = [],
-    defaultValue,
-    showLastDay = false,
-    lastDayText,
-    onClick: _onClick2,
-    intl: {
-      formatMessage
+const CapMultiSelectDatePicker = ({
+  selected = [],
+  defaultValue,
+  showLastDay = false,
+  lastDayText,
+  onClick,
+  intl: { formatMessage }
+}) => {
+  const getNumberOfDays = () => {
+    const noOfDays2 = [];
+    for (let i = 1; i <= 31; i++) {
+      noOfDays2.push(i);
     }
-  } = _ref;
-  var getNumberOfDays = () => {
-    var noOfDays = [];
-    for (var i = 1; i <= 31; i++) {
-      noOfDays.push(i);
-    }
-    return noOfDays;
+    return noOfDays2;
   };
-  var getNumberOfWeeks = () => {
-    var noOfWeeks = [];
-    for (var i = 1; i <= 5; i++) {
-      noOfWeeks.push(i);
+  const getNumberOfWeeks = () => {
+    const noOfWeeks2 = [];
+    for (let i = 1; i <= 5; i++) {
+      noOfWeeks2.push(i);
     }
-    return noOfWeeks;
+    return noOfWeeks2;
   };
-  var noOfDays = getNumberOfDays();
-  var noOfWeeks = getNumberOfWeeks();
-  var selectedDays = selected || defaultValue || [];
-  var finalLastDayText = lastDayText || formatMessage(messages.lastDayText);
-  return /*#__PURE__*/_jsx("div", {
-    className: "multiSelectDateContainer_tUHOE",
-    children: /*#__PURE__*/_jsx("table", {
-      className: "dateContent_sJ5N5",
-      children: noOfWeeks.map((_w, index) => {
-        var weekDays = noOfDays.slice(index * 7, (index + 1) * 7);
-        return /*#__PURE__*/_jsxs("tr", {
-          children: [weekDays.map(day => /*#__PURE__*/_jsx("th", {
-            className: classNames({
-              ["selected_82Qlf"]: selectedDays.indexOf(day) !== -1
-            }),
-            onClick: () => _onClick2 == null ? void 0 : _onClick2(day),
-            children: day
-          }, day)), index === noOfWeeks.length - 1 && showLastDay ? renderLastDayOption(selectedDays, finalLastDayText, _onClick2) : null]
-        }, "week-" + index);
-      })
-    })
-  });
+  const noOfDays = getNumberOfDays();
+  const noOfWeeks = getNumberOfWeeks();
+  const selectedDays = selected || defaultValue || [];
+  const finalLastDayText = lastDayText || formatMessage(messages.lastDayText);
+  return /* @__PURE__ */ jsx("div", { className: styles.multiSelectDateContainer, children: /* @__PURE__ */ jsx("table", { className: styles.dateContent, children: noOfWeeks.map((_w, index2) => {
+    const weekDays = noOfDays.slice(index2 * 7, (index2 + 1) * 7);
+    return /* @__PURE__ */ jsxs("tr", { children: [
+      weekDays.map((day) => /* @__PURE__ */ jsx(
+        "th",
+        {
+          className: classNames({
+            [styles.selected]: selectedDays.indexOf(day) !== -1
+          }),
+          onClick: () => onClick == null ? void 0 : onClick(day),
+          children: day
+        },
+        day
+      )),
+      index2 === noOfWeeks.length - 1 && showLastDay ? renderLastDayOption(selectedDays, finalLastDayText, onClick) : null
+    ] }, `week-${index2}`);
+  }) }) });
+};
+const index = injectIntl(CapMultiSelectDatePicker);
+export {
+  index as default
 };
-export default injectIntl(CapMultiSelectDatePicker);

package/CapMultiSelectDatePicker/messages.js

@@ -1,8 +1,12 @@
-import { defineMessages } from 'react-intl';
-export var scope = 'app.commonUtils.capUiLibrary.CapMultiSelectDatePicker';
-export default defineMessages({
+import { defineMessages } from "react-intl";
+const scope = "app.commonUtils.capUiLibrary.CapMultiSelectDatePicker";
+const messages = defineMessages({
   lastDayText: {
-    id: scope + ".lastDayText",
-    defaultMessage: 'Last day of month'
+    id: `${scope}.lastDayText`,
+    defaultMessage: "Last day of month"
   }
-});
+});
+export {
+  messages as default,
+  scope
+};

package/CapMultiSelectDatePicker/styles.module.css

@@ -0,0 +1,51 @@
+/* Color Palette */
+/* Fonts */
+/* Backward Compatibility Aliases */
+/* Component Heights */
+/* Border Radius */
+/* Border Width */
+/* Transition */
+/* Timezones Footer */
+.multiSelectDateContainer {
+  padding: 1.714rem;
+  width: 19.571rem;
+  height: 14.857rem;
+  border-radius: 0.285rem;
+  border: solid 1px #dfe2e7;
+  background-color: #ffffff;
+}
+.dateContent {
+  width: 100%;
+  height: 100%;
+  font-size: 0.857rem;
+  font-weight: normal;
+  line-height: normal;
+  text-align: center;
+  color: #091e42;
+  border-collapse: collapse;
+  cursor: pointer;
+}
+.dateContent th {
+  width: 2.285rem;
+  height: 2.285rem;
+  font-weight: inherit;
+}
+.dateContent tr th:not(:first-child):not(:last-child) {
+  padding-left: 0.142rem;
+}
+.selected {
+  background-color: #2466ea;
+  color: #ffffff;
+  border-radius: 50%;
+}
+.customSelected {
+  background-color: #2466ea;
+  color: #ffffff !important;
+  border-radius: 15%/50%;
+}
+.customTxt {
+  color: #2466ea;
+  font-weight: 500;
+  font-size: 1rem;
+  width: 2.285rem;
+}

package/CapMultiSelectDatePicker/styles.module.scss.js

@@ -0,0 +1,20 @@
+import './styles.module.css';const multiSelectDateContainer = "multiSelectDateContainer";
+const dateContent = "dateContent";
+const selected = "selected";
+const customSelected = "customSelected";
+const customTxt = "customTxt";
+const styles = {
+  multiSelectDateContainer,
+  dateContent,
+  selected,
+  customSelected,
+  customTxt
+};
+export {
+  customSelected,
+  customTxt,
+  dateContent,
+  styles as default,
+  multiSelectDateContainer,
+  selected
+};

package/CapMultiSelectDatePicker/styles.scss

@@ -1,6 +1,6 @@
 @import '../styles/variables';
 
-.multiSelectDateContainer_tUHOE {
+.multiSelectDateContainer {
   padding: $CAP_SPACE_24;
   width: 19.571rem;
   height: 14.857rem;
@@ -9,7 +9,7 @@
   background-color: $CAP_WHITE;
 }
 
-.dateContent_sJ5N5 {
+.dateContent {
   width: 100%;
   height: 100%;
   font-size: $FONT_SIZE_S;
@@ -31,19 +31,19 @@
   }
 }
 
-.selected_82Qlf {
+.selected {
   background-color: map-get($CAP_SECONDARY, base);
   color: $CAP_WHITE;
   border-radius: 50%;
 }
 
-.customSelected_niMVA {
+.customSelected {
   background-color: map-get($CAP_SECONDARY, base);
   color: $CAP_WHITE !important;
   border-radius: 15%/50%;
 }
 
-.customTxt_TMSUS {
+.customTxt {
   color: map-get($CAP_SECONDARY, base);
   font-weight: $FONT_WEIGHT_MEDIUM;
   font-size: $FONT_SIZE_M;