@scaleflex/widget-common 4.0.7 → 4.1.0

package/lib/DatePicker/index.scss

@@ -1,254 +1,254 @@
-@import '@scaleflex/widget-core/lib/_variables.scss';
-
-// packages/@filerobot/common/src/DatePicker/MyDatePicker.jsx
-.filerobot-common-datePicker{
-  position: relative;
-
-
-  * {
-    -webkit-touch-callout: none; /* iOS Safari */
-    -webkit-user-select: none;   /* Chrome/Safari/Opera */
-    -khtml-user-select: none;    /* Konqueror */
-    -moz-user-select: none;      /* Firefox */
-    -ms-user-select: none;       /* Internet Explorer/Edge */
-    user-select: none; /* Non-prefixed version, currently */
-  }
-
-  &-overlay {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-
-  &-input {
-    overflow: hidden;
-
-    input {
-      cursor: pointer;
-    }
-
-    input:focus{
-      outline: none;
-    }
-  }
-
-  &-container {
-    position: absolute;
-    width: 215px;
-    min-height: 200px;
-    max-height: 240px;
-    background: #fff;
-    box-shadow: 10px 10px 40px rgba(0,0,0,0.2);
-    border-radius: 4px;
-    overflow: hidden;
-    padding: 12px 12px;
-    z-index: 11111111111111;
-
-    &-head {
-      display: flex;
-      align-items: center;
-      &-body{
-        float: left;
-        width: 120px;
-        height: 100%;
-
-        &-year{
-          width: 100%;
-          height: 30px;
-          font-size: 27px;
-          color: $active;
-          font-weight: 200px;
-          text-align: center;
-          float: left;
-        }
-        &-month{
-          float: left;
-          width: 100%;
-          height: 15px;
-          font-size: 13px;
-          color: $active;
-          font-weight: 200px;
-          text-align: center;
-        }
-      }
-
-      &-button{
-        width: 45px;
-        height: 100%;
-        box-sizing: border-box;
-        position: relative;
-        &-inner {
-          float: left;
-          height: 25px;
-          width: 25px;
-          background: #f4f4f4;
-          border-radius: 2px;
-          line-height: 35px;
-          text-align: center;
-          position: absolute;
-          top:50%;
-          left: 50%;
-          margin-left: -17px;
-          margin-top: -17px;
-
-          &:hover > span{
-            border-color: #555!important;
-          }
-
-          &:hover {
-            cursor: pointer;
-            background: #eee;
-          }
-        }
-      }
-    }
-  }
-
-  &-calendar {
-    width: 100%;
-    height: 100%;
-
-    &-body,
-    &-day span,
-    &-day,
-    &-day-container
-    {
-      position: relative;
-      display: block;
-      float: left;
-      -webkit-box-sizing: border-box;
-      -moz-box-sizing: border-box;
-      box-sizing: border-box;
-    }
-
-    &-body {
-      height: 250px;
-      width: 100%;
-    }
-
-    &-day {
-      width: 14%;
-      height: 10%;
-
-      &-container{
-        width: 100%;
-        height: 100%;
-        font-size: 12px;
-        font-weight: 300;
-        color: $darkgrey;
-        text-align: center;
-
-        & span{
-          width: 25px;
-          height: 25px;
-          margin-top: -15px;
-          margin-left: -15px;
-          left: 50%;
-          top: 50%;
-          font-weight: 400;
-          border-radius: 2px;
-          line-height: 30px;
-
-          &:hover{
-            cursor: pointer;
-            background: $active-secondary;
-          }
-        }
-      }
-
-      &.disabled{
-        pointer-events: none;
-      }
-      &.disabled &-container span{
-        color: #ddd;
-      }
-      &.disabled &-container span{
-        background: #fff!important;
-      }
-
-      &.highlight &-container span{
-        background: $active;
-      }
-      &.highlight-green &-container span{
-        background: $accent-active;
-        color: $white;
-      }
-    }
-
-    &-head {
-      display: flex;
-      height: 20px;
-      width: 100%;
-      margin-top: 2px;
-      margin-bottom: 5px;
-
-      &-name {
-        width: 14.285%;
-        height: 30px;
-        line-height: 30px;
-        font-weight: 700;
-        color: $active;
-        font-size: 9px;
-        text-align: center;
-      }
-    }
-  }
-}
-
-
-
-
-
-.mdpchbi-right-arrows:after,
-.mdpchbi-left-arrows:after,
-.mdpchbi-right-arrow,
-.mdpchbi-right-arrows,
-.mdpchbi-left-arrow,
-.mdpchbi-left-arrows{
-    display: block;
-    float: left;
-    width: 6px;
-    height: 6px;
-    border-left: 2px solid #888;
-    border-bottom: 2px solid #888;
-    position: absolute;
-}
-.mdpchbi-right-arrow,
-.mdpchbi-right-arrows,
-.mdpchbi-left-arrow,
-.mdpchbi-left-arrows{
-    transform: rotate(45deg);
-    left: 50%;
-    top:50%;
-    margin-left: -2px;
-    margin-top: -4px;
-}
-.mdpchbi-right-arrows,
-.mdpchbi-right-arrow {
-    transform: rotate(225deg);
-    margin-left: -4px;
-}
-.mdpchbi-right-arrows:after,
-.mdpchbi-left-arrows:after{
-    content: '';
-}
-
-.mdpchbi-left-arrows{
-    margin-left: -5px;
-}
-.mdpchbi-right-arrows{
-    margin-left: -2px;
-}
-.mdpchbi-right-arrows:after,
-.mdpchbi-left-arrows:after{
-    left: 3px;
-    top: -5px
-}
-
-
-
-
-
-
+@import '@scaleflex/widget-core/lib/_variables.scss';
+
+// packages/@filerobot/common/src/DatePicker/MyDatePicker.jsx
+.filerobot-common-datePicker{
+  position: relative;
+
+
+  * {
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none;   /* Chrome/Safari/Opera */
+    -khtml-user-select: none;    /* Konqueror */
+    -moz-user-select: none;      /* Firefox */
+    -ms-user-select: none;       /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently */
+  }
+
+  &-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  &-input {
+    overflow: hidden;
+
+    input {
+      cursor: pointer;
+    }
+
+    input:focus{
+      outline: none;
+    }
+  }
+
+  &-container {
+    position: absolute;
+    width: 215px;
+    min-height: 200px;
+    max-height: 240px;
+    background: #fff;
+    box-shadow: 10px 10px 40px rgba(0,0,0,0.2);
+    border-radius: 4px;
+    overflow: hidden;
+    padding: 12px 12px;
+    z-index: 11111111111111;
+
+    &-head {
+      display: flex;
+      align-items: center;
+      &-body{
+        float: left;
+        width: 120px;
+        height: 100%;
+
+        &-year{
+          width: 100%;
+          height: 30px;
+          font-size: 27px;
+          color: $active;
+          font-weight: 200px;
+          text-align: center;
+          float: left;
+        }
+        &-month{
+          float: left;
+          width: 100%;
+          height: 15px;
+          font-size: 13px;
+          color: $active;
+          font-weight: 200px;
+          text-align: center;
+        }
+      }
+
+      &-button{
+        width: 45px;
+        height: 100%;
+        box-sizing: border-box;
+        position: relative;
+        &-inner {
+          float: left;
+          height: 25px;
+          width: 25px;
+          background: #f4f4f4;
+          border-radius: 2px;
+          line-height: 35px;
+          text-align: center;
+          position: absolute;
+          top:50%;
+          left: 50%;
+          margin-left: -17px;
+          margin-top: -17px;
+
+          &:hover > span{
+            border-color: #555!important;
+          }
+
+          &:hover {
+            cursor: pointer;
+            background: #eee;
+          }
+        }
+      }
+    }
+  }
+
+  &-calendar {
+    width: 100%;
+    height: 100%;
+
+    &-body,
+    &-day span,
+    &-day,
+    &-day-container
+    {
+      position: relative;
+      display: block;
+      float: left;
+      -webkit-box-sizing: border-box;
+      -moz-box-sizing: border-box;
+      box-sizing: border-box;
+    }
+
+    &-body {
+      height: 250px;
+      width: 100%;
+    }
+
+    &-day {
+      width: 14%;
+      height: 10%;
+
+      &-container{
+        width: 100%;
+        height: 100%;
+        font-size: 12px;
+        font-weight: 300;
+        color: $darkgrey;
+        text-align: center;
+
+        & span{
+          width: 25px;
+          height: 25px;
+          margin-top: -15px;
+          margin-left: -15px;
+          left: 50%;
+          top: 50%;
+          font-weight: 400;
+          border-radius: 2px;
+          line-height: 30px;
+
+          &:hover{
+            cursor: pointer;
+            background: $active-secondary;
+          }
+        }
+      }
+
+      &.disabled{
+        pointer-events: none;
+      }
+      &.disabled &-container span{
+        color: #ddd;
+      }
+      &.disabled &-container span{
+        background: #fff!important;
+      }
+
+      &.highlight &-container span{
+        background: $active;
+      }
+      &.highlight-green &-container span{
+        background: $accent-active;
+        color: $white;
+      }
+    }
+
+    &-head {
+      display: flex;
+      height: 20px;
+      width: 100%;
+      margin-top: 2px;
+      margin-bottom: 5px;
+
+      &-name {
+        width: 14.285%;
+        height: 30px;
+        line-height: 30px;
+        font-weight: 700;
+        color: $active;
+        font-size: 9px;
+        text-align: center;
+      }
+    }
+  }
+}
+
+
+
+
+
+.mdpchbi-right-arrows:after,
+.mdpchbi-left-arrows:after,
+.mdpchbi-right-arrow,
+.mdpchbi-right-arrows,
+.mdpchbi-left-arrow,
+.mdpchbi-left-arrows{
+    display: block;
+    float: left;
+    width: 6px;
+    height: 6px;
+    border-left: 2px solid #888;
+    border-bottom: 2px solid #888;
+    position: absolute;
+}
+.mdpchbi-right-arrow,
+.mdpchbi-right-arrows,
+.mdpchbi-left-arrow,
+.mdpchbi-left-arrows{
+    transform: rotate(45deg);
+    left: 50%;
+    top:50%;
+    margin-left: -2px;
+    margin-top: -4px;
+}
+.mdpchbi-right-arrows,
+.mdpchbi-right-arrow {
+    transform: rotate(225deg);
+    margin-left: -4px;
+}
+.mdpchbi-right-arrows:after,
+.mdpchbi-left-arrows:after{
+    content: '';
+}
+
+.mdpchbi-left-arrows{
+    margin-left: -5px;
+}
+.mdpchbi-right-arrows{
+    margin-left: -2px;
+}
+.mdpchbi-right-arrows:after,
+.mdpchbi-left-arrows:after{
+    left: 3px;
+    top: -5px
+}
+
+
+
+
+
+

package/lib/FilterPopup/index.js

@@ -25,18 +25,18 @@ var FilterPopup = function FilterPopup(_ref) {
     zIndex = _ref$zIndex === void 0 ? 1200 : _ref$zIndex;
   var popupRef = useRef(null);
   useEffect(function () {
-    /**
-     * The popups created by components such as SFX DatePicker, Calendar, Select, etc.,
-     * are appended directly to the DOM root element (body element).
-     * Therefore, we cannot directly access these popups from within the filter Popover.
-     *
-     * To handle outside clicks, we need to:
-     * 1. Check if the click happened inside our popup (referenced by popupRef).
-     * 2. Check if the click happened inside any of the dynamically created poppers
-     *    (identified by the class name specified in SFX_CLASSES.POPPER).
-     * 3. Check if the click happened on a filter item (identified by the class name specified in SFX_CLASSES.FILTER_ITEM).
-     *
-     * If the click did not occur within any of these elements, we trigger the onRequestClose callback.
+    /**
+     * The popups created by components such as SFX DatePicker, Calendar, Select, etc.,
+     * are appended directly to the DOM root element (body element).
+     * Therefore, we cannot directly access these popups from within the filter Popover.
+     *
+     * To handle outside clicks, we need to:
+     * 1. Check if the click happened inside our popup (referenced by popupRef).
+     * 2. Check if the click happened inside any of the dynamically created poppers
+     *    (identified by the class name specified in SFX_CLASSES.POPPER).
+     * 3. Check if the click happened on a filter item (identified by the class name specified in SFX_CLASSES.FILTER_ITEM).
+     *
+     * If the click did not occur within any of these elements, we trigger the onRequestClose callback.
      */
     var handleClickOutside = function handleClickOutside(event) {
       if (!popupRef.current) return;

package/lib/FormHelperText.js

@@ -10,10 +10,10 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
 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; }
 var baseClassName = 'filerobot-common-FormHelperText';
 
-/**
- * @param {object} props
- * @param {('small'|'medium')} [props.size='small']
- * @param {boolean} [props.noMargin=false]
+/**
+ * @param {object} props
+ * @param {('small'|'medium')} [props.size='small']
+ * @param {boolean} [props.noMargin=false]
  */
 var FormHelperText = function FormHelperText(_ref) {
   var classes = _ref.classes,

package/lib/IconLabeledButton.js

@@ -9,8 +9,8 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
 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; }
 import BaseButton from './BaseButton';
 
-/*
-* @size = small/medium/large/fullWidth
+/*
+* @size = small/medium/large/fullWidth
 */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export default (function (_ref) {

package/lib/Transitions/transitions.scss

@@ -1,49 +1,49 @@
-// usages in a few files
-// ==================================================================
-// ======================== TransitionWrapper =======================
-// ==================================================================
-.filerobot-TransitionWrapper {
-  --translateX: 0;
-  --translateY-shown: 0;
-  --translateY-hidden: -105%;
-  display: none;
-  position: absolute;
-  top: 0;
-  background: $white;
-  overflow-y: hidden;
-
-  &.--applied {
-    display: block;
-    z-index: $zIndex-2;
-    height: 100%;
-    width: 100%;
-  }
-}
-
-// ==================================================================
-// =========================== Transitions ==========================
-// ==================================================================
-
-// Slide down/up transition
-
-.filerobot-transition-slideDownUp-enter {
-  opacity: 0.01;
-  transform: translate3d(var(--translateX), var(--translateY-hidden), 0);
-  transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
-}
-
-.filerobot-transition-slideDownUp-enter.filerobot-transition-slideDownUp-enter-active {
-  opacity: 1;
-  transform: translate3d(var(--translateX), var(--translateY-shown), 0);
-}
-
-.filerobot-transition-slideDownUp-leave {
-  opacity: 1;
-  transform: translate3d(var(--translateX), var(--translateY-shown), 0);
-  transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
-}
-
-.filerobot-transition-slideDownUp-leave.filerobot-transition-slideDownUp-leave-active {
-  opacity: 0.01;
-  transform: translate3d(var(--translateX), var(--translateY-hidden), 0);
-}
+// usages in a few files
+// ==================================================================
+// ======================== TransitionWrapper =======================
+// ==================================================================
+.filerobot-TransitionWrapper {
+  --translateX: 0;
+  --translateY-shown: 0;
+  --translateY-hidden: -105%;
+  display: none;
+  position: absolute;
+  top: 0;
+  background: $white;
+  overflow-y: hidden;
+
+  &.--applied {
+    display: block;
+    z-index: $zIndex-2;
+    height: 100%;
+    width: 100%;
+  }
+}
+
+// ==================================================================
+// =========================== Transitions ==========================
+// ==================================================================
+
+// Slide down/up transition
+
+.filerobot-transition-slideDownUp-enter {
+  opacity: 0.01;
+  transform: translate3d(var(--translateX), var(--translateY-hidden), 0);
+  transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
+}
+
+.filerobot-transition-slideDownUp-enter.filerobot-transition-slideDownUp-enter-active {
+  opacity: 1;
+  transform: translate3d(var(--translateX), var(--translateY-shown), 0);
+}
+
+.filerobot-transition-slideDownUp-leave {
+  opacity: 1;
+  transform: translate3d(var(--translateX), var(--translateY-shown), 0);
+  transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
+}
+
+.filerobot-transition-slideDownUp-leave.filerobot-transition-slideDownUp-leave-active {
+  opacity: 0.01;
+  transform: translate3d(var(--translateX), var(--translateY-hidden), 0);
+}