@capillarytech/blaze-ui 6.1.2 → 6.1.3

package/CapMobileDatePicker/index.d.ts

@@ -3,19 +3,9 @@
  * MobileDatePicker
  *
  */
-import PropTypes from 'prop-types';
-import './styles.scss';
-declare function CapMobileDatePicker({ onChange, value, lastSyncDate }: {
-    onChange: any;
-    value: any;
-    lastSyncDate: any;
-}): import("react/jsx-runtime").JSX.Element;
-declare namespace CapMobileDatePicker {
-    var propTypes: {
-        value: PropTypes.Requireable<object>;
-        lastSyncDate: PropTypes.Requireable<object>;
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-}
-export default CapMobileDatePicker;
+import React from 'react';
+import type { CapMobileDatePickerProps } from './types';
+declare const _default: React.ComponentType<Omit<CapMobileDatePickerProps, "intl">>;
+export default _default;
+export type { CapMobileDatePickerProps } from './types';
 //# sourceMappingURL=index.d.ts.map

package/CapMobileDatePicker/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapMobileDatePicker/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,SAAS,MAAM,YAAY,CAAC;AAQnC,OAAO,eAAe,CAAC;AAKvB,iBAAS,mBAAmB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,YAAY,EAAE;;;;CAAA,2CA2C7D;kBA3CQ,mBAAmB;;;;;;;AAmD5B,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapMobileDatePicker/index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAYxC,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;;AAyExD,wBAAyE;AACzE,YAAY,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC"}

package/CapMobileDatePicker/index.js

@@ -1,63 +1,81 @@
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
 import moment from "moment";
-import PropTypes from "prop-types";
 import { useState } from "react";
+import { injectIntl } from "react-intl";
+import { FORMAT_TOKENS } from "../utils/dayjs.js";
 import CapCalendarDatePicker from "../CapCalendarDatePicker/index.js";
 import CapIcon from "../CapIcon/index.js";
 import InputFinal from "../CapInput/index.js";
 import CapModalWithHoc from "../CapModal/index.js";
-import './styles.css';/* empty css            */
+import messages from "./messages.js";
+import styles from "./styles.module.scss.js";
 const INCEPTION_DATE = "2000-01-01";
-const DATE_CALC_FORMAT = "YYYY-MM-DD";
-const DATE_DISPLAY_FORMAT = "DD MMMM YYYY";
-function CapMobileDatePicker({ onChange, value, lastSyncDate }) {
-  const [visible, setVisible] = useState(false);
+const DATE_CALC_FORMAT = FORMAT_TOKENS.ISO_8601_DATE;
+const DATE_DISPLAY_FORMAT = FORMAT_TOKENS.DATE_DISPLAY_FULL;
+const clsPrefix = "cap-mobile-date-picker";
+function CapMobileDatePicker({
+  intl: { formatMessage },
+  onChange,
+  value,
+  lastSyncDate,
+  placeholderLabel
+}) {
+  const [open, setOpen] = useState(false);
   const handleDateChange = (date) => {
-    onChange(moment(date));
-    setVisible(false);
+    onChange == null ? void 0 : onChange(moment(date));
+    setOpen(false);
+  };
+  const handleModalOpen = () => {
+    setOpen(true);
+  };
+  const handleModalClose = () => {
+    setOpen(false);
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       InputFinal,
       {
         suffix: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(CapIcon, { type: "calendar", style: { color: "rgb(9, 30, 66)" }, size: "m" }) }),
-        onClick: () => setVisible(true),
-        value: moment(value).format(DATE_DISPLAY_FORMAT)
+        onClick: handleModalOpen,
+        value: value ? moment(value).format(DATE_DISPLAY_FORMAT) : void 0,
+        size: "large",
+        placeholder: placeholderLabel || formatMessage(messages.selectDate)
       }
     ),
     /* @__PURE__ */ jsx(
       CapModalWithHoc,
       {
-        visible,
+        open,
         centered: true,
-        onCancel: () => setVisible(false),
-        className: "mobile-date-picker-modal",
+        onCancel: handleModalClose,
+        className: styles[`${clsPrefix}-modal`],
+        classNames: {
+          root: styles[`${clsPrefix}-modal-root`],
+          body: styles[`${clsPrefix}-modal-body`],
+          container: styles[`${clsPrefix}-modal-container`],
+          footer: styles[`${clsPrefix}-modal-footer`]
+        },
         closable: false,
         footer: /* @__PURE__ */ jsx(Fragment, {}),
         children: /* @__PURE__ */ jsx(
           CapCalendarDatePicker,
           {
             inline: true,
+            className: styles[`${clsPrefix}-calendar`],
             minDate: moment(INCEPTION_DATE, DATE_CALC_FORMAT).toDate(),
             maxDate: lastSyncDate.toDate(),
             dropdownMode: "select",
             showMonthDropdown: true,
             showYearDropdown: true,
-            readOnly: true,
             onChange: handleDateChange,
-            selected: moment(value).toDate(),
-            disabledDate: (currentDate) => currentDate.isAfter(lastSyncDate) || currentDate.isBefore(moment(INCEPTION_DATE))
+            selected: value ? moment(value).toDate() : void 0
           }
         )
       }
     )
   ] });
 }
-CapMobileDatePicker.propTypes = {
-  value: PropTypes.object,
-  lastSyncDate: PropTypes.object,
-  onChange: PropTypes.func
-};
+const index = injectIntl(CapMobileDatePicker);
 export {
-  CapMobileDatePicker as default
+  index as default
 };

package/CapMobileDatePicker/messages.d.ts

@@ -0,0 +1,9 @@
+export declare const scope = "app.commonUtils.capUiLibrary.CapMobileDatePicker";
+declare const _default: {
+    selectDate: {
+        id: string;
+        defaultMessage: string;
+    };
+};
+export default _default;
+//# sourceMappingURL=messages.d.ts.map

package/CapMobileDatePicker/messages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../components/CapMobileDatePicker/messages.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,KAAK,qDAAqD,CAAC;;;;;;;AAExE,wBAKG"}

package/CapMobileDatePicker/messages.js

@@ -0,0 +1,12 @@
+import { defineMessages } from "react-intl";
+const scope = "app.commonUtils.capUiLibrary.CapMobileDatePicker";
+const messages = defineMessages({
+  selectDate: {
+    id: `${scope}.selectDate`,
+    defaultMessage: "Select date"
+  }
+});
+export {
+  messages as default,
+  scope
+};

package/CapMobileDatePicker/styles.css

@@ -1,19 +1,36 @@
-.mobile-date-picker-modal {
-  min-width: 320px;
+/* Color Palette */
+/* Fonts */
+/* Backward Compatibility Aliases */
+/* Component Heights */
+/* Border Radius */
+/* Border Width */
+/* Transition */
+/* Timezones Footer */
+.cap-mobile-date-picker-modal-root {
+  min-width: 22.857rem;
   width: unset !important;
 }
-.mobile-date-picker-modal .ant-modal-content .ant-modal-body, .mobile-date-picker-modal .ant-modal-content .ant-modal-footer {
-  padding: 0 !important;
+.cap-mobile-date-picker-modal-body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-.mobile-date-picker-modal .ant-modal-content .react-datepicker__day--keyboard-selected {
-  background-color: rgb(36, 102, 234);
-  color: #fff !important;
+.cap-mobile-date-picker-modal-body .react-datepicker__day--keyboard-selected {
+  background-color: #2466ea;
+  color: #ffffff !important;
   border-radius: 50%;
 }
-.mobile-date-picker-modal .ant-modal-content .react-datepicker__navigation-icon--next, .mobile-date-picker-modal .ant-modal-content .react-datepicker__navigation-icon--previous {
+.cap-mobile-date-picker-modal-container {
+  padding: 0 !important;
+}
+.cap-mobile-date-picker-modal-footer {
   display: none !important;
 }
-
-.ant-input-lg {
-  font-size: 14px !important;
+.cap-mobile-date-picker-calendar {
+  box-shadow: none;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

package/CapMobileDatePicker/styles.module.scss.js

@@ -0,0 +1,10 @@
+import './styles.css';const styles = {
+  "cap-mobile-date-picker-modal-root": "cap-mobile-date-picker-modal-root",
+  "cap-mobile-date-picker-modal-body": "cap-mobile-date-picker-modal-body",
+  "cap-mobile-date-picker-modal-container": "cap-mobile-date-picker-modal-container",
+  "cap-mobile-date-picker-modal-footer": "cap-mobile-date-picker-modal-footer",
+  "cap-mobile-date-picker-calendar": "cap-mobile-date-picker-calendar"
+};
+export {
+  styles as default
+};

package/CapMobileDatePicker/styles.scss

@@ -1,20 +1,41 @@
-.mobile-date-picker-modal{
-    min-width: 320px;
+@import '../styles/_variables.scss';
+
+$clsPrefix: 'cap-mobile-date-picker';
+
+.#{$clsPrefix}-modal {
+  &-root {
+    min-width: 22.857rem;
     width: unset !important;
-    .ant-modal-content{
-        .ant-modal-body, .ant-modal-footer{
-            padding: 0 !important;
-        }
-        .react-datepicker__day--keyboard-selected {
-            background-color: rgb(36, 102, 234);
-            color: #fff !important;
-            border-radius: 50%;
-        }
-        .react-datepicker__navigation-icon--next, .react-datepicker__navigation-icon--previous{
-            display: none !important;
-        }
+  }
+
+  &-body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    :global {
+      .react-datepicker__day--keyboard-selected {
+        background-color: $cap-secondary-base;
+        color: $cap-white !important;
+        border-radius: 50%;
+      }
     }
+  }
+
+  &-container {
+    padding: 0 !important;
+  }
+
+  &-footer {
+    display: none !important;
+  }
 }
-.ant-input-lg{
-    font-size: 14px !important;
+
+.#{$clsPrefix}-calendar {
+  box-shadow: none;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

package/CapMobileDatePicker/tests/CapMobileDatePicker.mockData.d.ts

@@ -0,0 +1,41 @@
+import moment from 'moment';
+export declare const mockDates: {
+    inception: moment.Moment;
+    midRange: moment.Moment;
+    midRange2: moment.Moment;
+    midRange3: moment.Moment;
+    lastSync: moment.Moment;
+    lastSyncMidYear: moment.Moment;
+    boundarySame: moment.Moment;
+    beforeInception: moment.Moment;
+    afterLastSync: moment.Moment;
+    differentYear: moment.Moment;
+};
+export declare const mockProps: {
+    default: {
+        value: moment.Moment;
+        lastSyncDate: moment.Moment;
+    };
+    withOnChange: {
+        value: moment.Moment;
+        lastSyncDate: moment.Moment;
+        onChange: jest.Mock<any, any, any>;
+    };
+    boundaryDates: {
+        value: moment.Moment;
+        lastSyncDate: moment.Moment;
+    };
+    nullValue: {
+        value: unknown;
+        lastSyncDate: moment.Moment;
+    };
+    undefinedValue: {
+        value: any;
+        lastSyncDate: moment.Moment;
+    };
+    midYearSync: {
+        value: moment.Moment;
+        lastSyncDate: moment.Moment;
+    };
+};
+//# sourceMappingURL=CapMobileDatePicker.mockData.d.ts.map

package/CapMobileDatePicker/tests/CapMobileDatePicker.mockData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CapMobileDatePicker.mockData.d.ts","sourceRoot":"","sources":["../../../components/CapMobileDatePicker/tests/CapMobileDatePicker.mockData.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,QAAQ,CAAC;AAE5B,eAAO,MAAM,SAAS;;;;;;;;;;;CAWrB,CAAC;AAEF,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;eAeH,OAAO;;;;;;;;;;;CAWzB,CAAC"}

package/CapMobileDatePicker/types.d.ts

@@ -0,0 +1,23 @@
+import type { Moment } from 'moment';
+import type { IntlShape } from 'react-intl';
+export interface CapMobileDatePickerProps {
+    intl: IntlShape;
+    /**
+     * Selected date value (moment object)
+     */
+    value?: Moment;
+    /**
+     * Last sync date - maximum selectable date (moment object)
+     */
+    lastSyncDate: Moment;
+    /**
+     * Callback when date changes
+     * @param date - Selected moment object
+     */
+    onChange?: (date: Moment) => void;
+    /**
+     * Placeholder label for the input field
+     */
+    placeholderLabel?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/CapMobileDatePicker/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapMobileDatePicker/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AACrC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAE5C,MAAM,WAAW,wBAAwB;IACvC,IAAI,EAAE,SAAS,CAAC;IAChB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B"}

package/CapProductSelection/index.d.ts

@@ -1,10 +1,32 @@
 import React from 'react';
-import type { IntlShape } from 'react-intl';
-import type { CapProductSelectionProps } from './types';
-interface CapProductSelectionWithIntlProps extends CapProductSelectionProps {
-    intl: IntlShape;
-}
-declare const _default: React.ComponentType<Omit<CapProductSelectionWithIntlProps, "intl">>;
+declare const _default: React.ComponentType<Omit<{
+    [x: string]: any;
+    treeData: any;
+    target: any;
+    trigger?: string;
+    placement: any;
+    overlayClassName: any;
+    selectedAttributes?: any[];
+    handleSelect?: () => void;
+    isProductMandatory: any;
+    lineItem: any;
+    selectAttribute: any;
+    brand: any;
+    brandInfo: any;
+    category: any;
+    categoryInfo: any;
+    product: any;
+    productInfo: any;
+    SKU: any;
+    uploadSKU: any;
+    uploadSKUInfo: any;
+    comingSoon: any;
+    changeSelection: any;
+    description: any;
+    okText: any;
+    cancelText: any;
+    selectValues: any;
+    atleast1Attribute: any;
+} & import("react-intl").WrappedComponentProps, "intl">>;
 export default _default;
-export type { CapProductSelectionProps, TreeNodeItem } from './types';
 //# sourceMappingURL=index.d.ts.map

package/CapProductSelection/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapProductSelection/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAEnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAyB5C,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,SAAS,CAAC;AAIxD,UAAU,gCAAiC,SAAQ,wBAAwB;IACzE,IAAI,EAAE,SAAS,CAAC;CACjB;;AA0VD,wBAA+C;AAC/C,YAAY,EAAE,wBAAwB,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapProductSelection/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAA8B,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoZnD,wBAA8E"}