cx 26.4.4 → 26.6.0

package/src/util/Format.ts

@@ -5,6 +5,7 @@ import { isUndefined } from "../util/isUndefined";
 import { isArray } from "../util/isArray";
 import { capitalize } from "./capitalize";
 import { parseDateInvariant } from "./date/parseDateInvariant";
+import { dayBefore } from "./date/dayBefore";
 
 //Culture dependent formatters are defined in the ui package.
 
@@ -98,6 +99,11 @@ let formatFactory: Record<string, (...args: any[]) => (value: any) => string> =
       return (value: any) => date(value) + " " + time(value);
    },
 
+   dayBefore: function () {
+      let datetime = formatFactory.datetime();
+      return (value: any) => datetime(dayBefore(parseDateInvariant(value)));
+   },
+
    ellipsis: function (part0, length, where) {
       length = Number(length);
       if (!(length > 3)) length = 10;
@@ -168,6 +174,7 @@ formatFactory.ps = formatFactory.percentageSign;
 formatFactory.d = formatFactory.date;
 formatFactory.t = formatFactory.time;
 formatFactory.dt = formatFactory.datetime;
+formatFactory.daybefore = formatFactory.dayBefore;
 formatFactory.zeropad = formatFactory.zeroPad;
 formatFactory.leftpad = formatFactory.leftPad;
 formatFactory.capitalize = formatFactory.capitalize;

package/src/util/date/dateQuarter.ts

@@ -0,0 +1,8 @@
+/**
+ * Returns the calendar quarter (1-4) the given date falls in.
+ * @param date
+ * @returns {number}
+ */
+export function dateQuarter(date: Date): number {
+   return Math.floor(date.getMonth() / 3) + 1;
+}

package/src/util/date/dayBefore.ts

@@ -0,0 +1,15 @@
+/**
+ * Returns a new `Date` representing the calendar day before the given date,
+ * keeping the same time of day. Month and year boundaries are handled
+ * automatically. The input is not mutated.
+ *
+ * Useful for displaying the exclusive end of a date range as an inclusive
+ * value, e.g. a period ending at `2021-01-01` shown as `Dec 2020`.
+ * @param date
+ * @returns {Date}
+ */
+export function dayBefore(date: Date): Date {
+   let result = new Date(date.getTime());
+   result.setDate(result.getDate() - 1);
+   return result;
+}

package/src/util/date/index.ts

@@ -1,4 +1,6 @@
 export * from "./dateDiff";
+export * from "./dateQuarter";
+export * from "./dayBefore";
 export * from "./zeroTime";
 export * from "./monthStart";
 export * from "./lowerBoundCheck";

package/src/util/scss/include.scss

@@ -1,69 +1,69 @@
-@forward "colors";
-@use "call-once" as *;
-@use "colors" as *;
-@use "sass:map";
-
-$cx-include-all: true !default;
-
-$cx-excluded: () !default;
-$cx-used: null !default;
-
-$cx-dependencies: () !default;
-
-@mixin cx-register-dependencies($deps) {
-   $cx-dependencies: map.merge($cx-dependencies, $deps) !global;
-}
-
-$cx-deps-resolved: false !default;
-
-// Recursively add all transitive dependencies of $name into $used
-@function cx-resolve-module-deps($name, $used) {
-   $deps: map.get($cx-dependencies, $name);
-   @if $deps != null {
-      @each $dep in $deps {
-         @if map.get($used, $dep) != true {
-            $used: map.merge(
-               $used,
-               (
-                  $dep: true,
-               )
-            );
-            $used: cx-resolve-module-deps($dep, $used);
-         }
-      }
-   }
-   @return $used;
-}
-
-@function cx-should-include($name, $once: true) {
-   // Resolve dependencies once, on first call (after all deps are registered)
-   @if not $cx-deps-resolved and $cx-used != null {
-      @each $module in map.keys($cx-used) {
-         $cx-used: cx-resolve-module-deps($module, $cx-used) !global;
-      }
-      $cx-deps-resolved: true !global;
-   }
-
-   @return (
-         (map.get($cx-excluded, $name) != true) and
-            ($cx-include-all or ($cx-used != null and map.get($cx-used, $name) == true))
-      )
-      and ($once != true or cx-call-once($name));
-}
-
-@function cx-included($name) {
-   @return cx-called-once($name);
-}
-
-@mixin cx-widgets($names...) {
-   $cx-used: () !default !global;
-
-   @each $name in $names {
-      $cx-used: map.merge(
-         $cx-used,
-         (
-            $name: true,
-         )
-      ) !global;
-   }
-}
+@forward "colors";
+@use "call-once" as *;
+@use "colors" as *;
+@use "sass:map";
+
+$cx-include-all: true !default;
+
+$cx-excluded: () !default;
+$cx-used: null !default;
+
+$cx-dependencies: () !default;
+
+@mixin cx-register-dependencies($deps) {
+   $cx-dependencies: map.merge($cx-dependencies, $deps) !global;
+}
+
+$cx-deps-resolved: false !default;
+
+// Recursively add all transitive dependencies of $name into $used
+@function cx-resolve-module-deps($name, $used) {
+   $deps: map.get($cx-dependencies, $name);
+   @if $deps != null {
+      @each $dep in $deps {
+         @if map.get($used, $dep) != true {
+            $used: map.merge(
+               $used,
+               (
+                  $dep: true,
+               )
+            );
+            $used: cx-resolve-module-deps($dep, $used);
+         }
+      }
+   }
+   @return $used;
+}
+
+@function cx-should-include($name, $once: true) {
+   // Resolve dependencies once, on first call (after all deps are registered)
+   @if not $cx-deps-resolved and $cx-used != null {
+      @each $module in map.keys($cx-used) {
+         $cx-used: cx-resolve-module-deps($module, $cx-used) !global;
+      }
+      $cx-deps-resolved: true !global;
+   }
+
+   @return (
+         (map.get($cx-excluded, $name) != true) and
+            ($cx-include-all or ($cx-used != null and map.get($cx-used, $name) == true))
+      )
+      and ($once != true or cx-call-once($name));
+}
+
+@function cx-included($name) {
+   @return cx-called-once($name);
+}
+
+@mixin cx-widgets($names...) {
+   $cx-used: () !default !global;
+
+   @each $name in $names {
+      $cx-used: map.merge(
+         $cx-used,
+         (
+            $name: true,
+         )
+      ) !global;
+   }
+}

package/src/widgets/Button.maps.scss

@@ -1,103 +1,103 @@
-@use "sass:map";
-@use "./lists" as *;
-@use "./variables" as *;
-
-$cx-button-state-style-map: (
-   default: (
-      background-color: $cx-default-button-background-color,
-      box-shadow: $cx-default-button-box-shadow,
-      border-color: $cx-default-button-border-color,
-      border-width: $cx-default-button-border-width,
-      border-radius: $cx-default-button-border-radius,
-      border-style: solid,
-      user-select: none,
-      color: $cx-default-button-color,
-      font-family: $cx-default-button-font-family,
-      font-size: $cx-default-button-font-size,
-      font-weight: $cx-default-button-font-weight,
-      line-height: $cx-default-button-line-height,
-      padding: $cx-default-button-padding,
-      cursor: pointer,
-      -webkit-appearance: none,
-      -moz-appearance: none,
-      appearance: none,
-      white-space: nowrap,
-      text-decoration: none,
-   ),
-   hover: (
-      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3),
-      text-decoration: none,
-   ),
-   focus: (
-      outline: none,
-      box-shadow: 0 0 1px 1px rgba(77, 144, 254, 0.8),
-   ),
-   hover-focus: (),
-   disabled: (
-      color: gray,
-      box-shadow: none,
-      pointer-events: none,
-   ),
-   active: (
-      top: 1px,
-      box-shadow: none,
-   ),
-) !default;
-
-$cx-button-mods: (
-   primary: (
-      default: (
-         background-color: #1f99f8,
-         border-color: #1e88e5,
-         color: white,
-      ),
-      disabled: (
-         background-color: rgba(31, 153, 248, 0.5),
-         border-color: rgba(30, 136, 229, 0.1),
-         color: rgba(255, 255, 255, 0.6),
-      ),
-      hover: (
-         background-color: #1f99f8,
-      ),
-   ),
-   danger: (
-      default: (
-         background-color: #d32f2f,
-         border-color: #c62828,
-         color: white,
-      ),
-      disabled: (
-         background-color: rgba(211, 47, 47, 0.6),
-         border-color: rgba(198, 40, 40, 0.1),
-         color: rgba(255, 255, 255, 0.5),
-      ),
-      hover: (
-         background-color: #d32f2f,
-      ),
-   ),
-   hollow: (
-      default: (
-         background-color: transparent,
-         border-color: transparent,
-         color: inherit,
-         box-shadow: none,
-      ),
-      hover: map.merge(
-            map.get($cx-list-item, hover),
-            (
-               box-shadow: none,
-               border-color: transparent,
-            )
-         ),
-      focus: map.merge(
-            map.get($cx-list-item, selected-cursor),
-            (
-               box-shadow: none,
-               border-color: transparent,
-            )
-         ),
-      disabled: (
-         color: rgba(128, 128, 128, 0.5),
-      ),
-   ),
-) !default;
+@use "sass:map";
+@use "./lists" as *;
+@use "./variables" as *;
+
+$cx-button-state-style-map: (
+   default: (
+      background-color: $cx-default-button-background-color,
+      box-shadow: $cx-default-button-box-shadow,
+      border-color: $cx-default-button-border-color,
+      border-width: $cx-default-button-border-width,
+      border-radius: $cx-default-button-border-radius,
+      border-style: solid,
+      user-select: none,
+      color: $cx-default-button-color,
+      font-family: $cx-default-button-font-family,
+      font-size: $cx-default-button-font-size,
+      font-weight: $cx-default-button-font-weight,
+      line-height: $cx-default-button-line-height,
+      padding: $cx-default-button-padding,
+      cursor: pointer,
+      -webkit-appearance: none,
+      -moz-appearance: none,
+      appearance: none,
+      white-space: nowrap,
+      text-decoration: none,
+   ),
+   hover: (
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3),
+      text-decoration: none,
+   ),
+   focus: (
+      outline: none,
+      box-shadow: 0 0 1px 1px rgba(77, 144, 254, 0.8),
+   ),
+   hover-focus: (),
+   disabled: (
+      color: gray,
+      box-shadow: none,
+      pointer-events: none,
+   ),
+   active: (
+      top: 1px,
+      box-shadow: none,
+   ),
+) !default;
+
+$cx-button-mods: (
+   primary: (
+      default: (
+         background-color: #1f99f8,
+         border-color: #1e88e5,
+         color: white,
+      ),
+      disabled: (
+         background-color: rgba(31, 153, 248, 0.5),
+         border-color: rgba(30, 136, 229, 0.1),
+         color: rgba(255, 255, 255, 0.6),
+      ),
+      hover: (
+         background-color: #1f99f8,
+      ),
+   ),
+   danger: (
+      default: (
+         background-color: #d32f2f,
+         border-color: #c62828,
+         color: white,
+      ),
+      disabled: (
+         background-color: rgba(211, 47, 47, 0.6),
+         border-color: rgba(198, 40, 40, 0.1),
+         color: rgba(255, 255, 255, 0.5),
+      ),
+      hover: (
+         background-color: #d32f2f,
+      ),
+   ),
+   hollow: (
+      default: (
+         background-color: transparent,
+         border-color: transparent,
+         color: inherit,
+         box-shadow: none,
+      ),
+      hover: map.merge(
+            map.get($cx-list-item, hover),
+            (
+               box-shadow: none,
+               border-color: transparent,
+            )
+         ),
+      focus: map.merge(
+            map.get($cx-list-item, selected-cursor),
+            (
+               box-shadow: none,
+               border-color: transparent,
+            )
+         ),
+      disabled: (
+         color: rgba(128, 128, 128, 0.5),
+      ),
+   ),
+) !default;