draft-components 0.60.0 → 0.62.0

package/hooks/use-capture-focus.js

@@ -10,8 +10,8 @@ function useCaptureFocus({ modalRef, isEnabled = true, shouldFocusFirstDescendan
             const releaseFocus = captureFocus(modal, {
                 shouldFocusFirstDescendant,
                 shouldRestoreFocusAfterRelease,
-                focusElementAfterCapture: focusElementRefAfterCapture?.current || null,
-                focusElementAfterRelease: focusElementRefAfterRelease?.current || null,
+                focusElementAfterCapture: (focusElementRefAfterCapture === null || focusElementRefAfterCapture === void 0 ? void 0 : focusElementRefAfterCapture.current) || null,
+                focusElementAfterRelease: (focusElementRefAfterRelease === null || focusElementRefAfterRelease === void 0 ? void 0 : focusElementRefAfterRelease.current) || null,
             });
             return () => {
                 releaseFocus();
@@ -93,11 +93,13 @@ function getFocusElements(parent) {
     return Array.from(parent.querySelectorAll(FOCUS_ELEMENTS_SELECTOR));
 }
 function getFirstFocusableElement(parent) {
-    return getFocusElements(parent)[0] ?? parent;
+    var _a;
+    return (_a = getFocusElements(parent)[0]) !== null && _a !== void 0 ? _a : parent;
 }
 function getLastFocusableElement(parent) {
+    var _a;
     const focusableElements = getFocusElements(parent);
-    return focusableElements[focusableElements.length - 1] ?? parent;
+    return (_a = focusableElements[focusableElements.length - 1]) !== null && _a !== void 0 ? _a : parent;
 }
 function attemptFocus(element) {
     if (element instanceof HTMLElement) {

package/hooks/use-close-on-click-outside.js

@@ -5,8 +5,9 @@ const react_1 = require("react");
 const guards_1 = require("../lib/guards");
 function useCloseOnClickOutside(onClose, ref, params) {
     (0, react_1.useEffect)(() => {
-        const isEnabled = params?.isEnabled ?? true;
-        const ignoreElements = (params?.ignoreElements ?? []).filter(guards_1.isHTMLElement);
+        var _a, _b;
+        const isEnabled = (_a = params === null || params === void 0 ? void 0 : params.isEnabled) !== null && _a !== void 0 ? _a : true;
+        const ignoreElements = ((_b = params === null || params === void 0 ? void 0 : params.ignoreElements) !== null && _b !== void 0 ? _b : []).filter(guards_1.isHTMLElement);
         const container = ref.current;
         if (!isEnabled || !(0, guards_1.isFunction)(onClose) || !(0, guards_1.isHTMLElement)(container)) {
             return;

package/hooks/use-close-on-esc-press.js

@@ -21,7 +21,8 @@ function useCloseOnEscPress(onClose, isEnabled = true) {
             return;
         }
         function onEscPress(event) {
-            const close = callbackStack.last?.current;
+            var _a;
+            const close = (_a = callbackStack.last) === null || _a === void 0 ? void 0 : _a.current;
             if (event.code === keyboard_helpers_1.KeyCode.escape && close) {
                 close();
             }

package/lib/plain-date-range.js

@@ -3,14 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlainDateRange = void 0;
 const plain_date_1 = require("./plain-date");
 class PlainDateRange {
-    start;
-    end;
-    static create() {
-        return new PlainDateRange(plain_date_1.PlainDate.now(), plain_date_1.PlainDate.now());
-    }
-    static fromISODateRange(isoDateRange) {
-        return new PlainDateRange(plain_date_1.PlainDate.fromISODate(isoDateRange.start), plain_date_1.PlainDate.fromISODate(isoDateRange.end));
-    }
     constructor(start, end) {
         if (start.isAfter(end)) {
             this.start = end;
@@ -21,6 +13,12 @@ class PlainDateRange {
             this.end = end;
         }
     }
+    static create() {
+        return new PlainDateRange(plain_date_1.PlainDate.now(), plain_date_1.PlainDate.now());
+    }
+    static fromISODateRange(isoDateRange) {
+        return new PlainDateRange(plain_date_1.PlainDate.fromISODate(isoDateRange.start), plain_date_1.PlainDate.fromISODate(isoDateRange.end));
+    }
     contains(date) {
         return this.start.isBeforeOrEqual(date) && this.end.isAfterOrEqual(date);
     }

package/lib/plain-date.js

@@ -2,11 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlainDate = void 0;
 class PlainDate {
-    _date;
-    static FIRST_WEEKDAY = 0;
-    static LAST_WEEKDAY = 6;
-    static DAYS_IN_WEEK = 7;
-    static MONTHS_IN_YEAR = 12;
+    constructor(year, monthIndex, day) {
+        this._date = new Date(year, monthIndex, day);
+    }
     static now() {
         const date = new Date();
         return new PlainDate(date.getFullYear(), date.getMonth(), date.getDate());
@@ -15,9 +13,6 @@ class PlainDate {
         const date = new Date(isoDate);
         return new PlainDate(date.getFullYear(), date.getMonth(), date.getDate());
     }
-    constructor(year, monthIndex, day) {
-        this._date = new Date(year, monthIndex, day);
-    }
     get year() {
         return this._date.getFullYear();
     }
@@ -102,3 +97,7 @@ class PlainDate {
     }
 }
 exports.PlainDate = PlainDate;
+PlainDate.FIRST_WEEKDAY = 0;
+PlainDate.LAST_WEEKDAY = 6;
+PlainDate.DAYS_IN_WEEK = 7;
+PlainDate.MONTHS_IN_YEAR = 12;

package/lib/stack.js

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Stack = void 0;
 class Stack {
-    _items;
     constructor(items = []) {
         this._items = items;
     }

package/lib/util.js

@@ -35,6 +35,6 @@ function randomString(size) {
 }
 exports.randomString = randomString;
 function uniqueId(prefix) {
-    return (prefix ?? '') + randomString(5);
+    return (prefix !== null && prefix !== void 0 ? prefix : '') + randomString(5);
 }
 exports.uniqueId = uniqueId;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "0.60.0",
+  "version": "0.62.0",
   "description": "The set of React.js components for rapid prototyping.",
   "main": "components/index.js",
   "files": [

package/scss/components/_actions-group.scss

@@ -1,16 +1,18 @@
+@use '../abstracts' as dc;
+
 .dc-actions-group {
   display: inline-flex;
   align-items: center;
   box-sizing: border-box;
   padding: 0.125rem;
   border: 0.0625rem solid var(--dc-actions-group-border);
-  border-radius: $border-radius-md;
+  border-radius: dc.$border-radius-md;
   background: var(--dc-actions-group-bg);
-  box-shadow: $shadow-xs;
+  box-shadow: dc.$shadow-xs;
 }
 
 .dc-actions-group > * + * {
-  margin-left: $gap-1x;
+  margin-left: dc.$gap-1x;
 }
 
 .dc-actions-group__btn {

package/scss/components/_alert.scss

@@ -1,20 +1,22 @@
+@use '../abstracts' as dc;
+
 .dc-alert {
-  --dc-alert-bg-color: #{$gray-50};
-  --dc-alert-border-color: #{$gray-200};
-  --dc-alert-icon-color: #{$gray-400};
-  --dc-alert-primary-text-color: #{$gray-800};
-  --dc-alert-secondary-text-color: #{$gray-600};
+  --dc-alert-bg-color: #{dc.$gray-50};
+  --dc-alert-border-color: #{dc.$gray-200};
+  --dc-alert-icon-color: #{dc.$gray-400};
+  --dc-alert-primary-text-color: #{dc.$gray-800};
+  --dc-alert-secondary-text-color: #{dc.$gray-600};
 }
 
 .dc-alert {
   font-family: var(--dc-font-base);
-  font-weight: $font-weight-normal;
+  font-weight: dc.$font-weight-normal;
   position: relative;
   display: flex;
   box-sizing: border-box;
-  padding: $gap-3x $gap-4x;
+  padding: dc.$gap-3x dc.$gap-4x;
   border: 0.0625rem solid var(--dc-alert-border-color);
-  border-radius: $border-radius-md;
+  border-radius: dc.$border-radius-md;
   background: var(--dc-alert-bg-color);
 }
 
@@ -22,7 +24,7 @@
   flex-shrink: 0;
   width: 1.125rem;
   height: 1.125rem;
-  margin-right: $gap-3x;
+  margin-right: dc.$gap-3x;
   color: var(--dc-alert-icon-color);
 }
 
@@ -30,7 +32,7 @@
 }
 
 .dc-alert__heading {
-  font-weight: $font-weight-medium;
+  font-weight: dc.$font-weight-medium;
   line-height: 1.125rem;
   margin: 0;
   color: var(--dc-alert-primary-text-color);
@@ -46,12 +48,12 @@
     padding: 0 0 0 1em;
 
     li + li {
-      margin-top: $gap-1x;
+      margin-top: dc.$gap-1x;
     }
   }
 
   * + & {
-    margin-top: $gap-1x;
+    margin-top: dc.$gap-1x;
   }
 }
 
@@ -61,33 +63,33 @@
 }
 
 .dc-alert_appearance_warning {
-  --dc-alert-bg-color: #{$yellow-50};
-  --dc-alert-border-color: #{$yellow-200};
-  --dc-alert-icon-color: #{$yellow-600};
-  --dc-alert-primary-text-color: #{$yellow-900};
-  --dc-alert-secondary-text-color: #{$yellow-800};
+  --dc-alert-bg-color: #{dc.$yellow-50};
+  --dc-alert-border-color: #{dc.$yellow-200};
+  --dc-alert-icon-color: #{dc.$yellow-600};
+  --dc-alert-primary-text-color: #{dc.$yellow-900};
+  --dc-alert-secondary-text-color: #{dc.$yellow-800};
 }
 
 .dc-alert_appearance_error {
-  --dc-alert-bg-color: #{$red-50};
-  --dc-alert-border-color: #{$red-200};
-  --dc-alert-icon-color: #{$red-500};
-  --dc-alert-primary-text-color: #{$red-900};
-  --dc-alert-secondary-text-color: #{$red-800};
+  --dc-alert-bg-color: #{dc.$red-50};
+  --dc-alert-border-color: #{dc.$red-200};
+  --dc-alert-icon-color: #{dc.$red-500};
+  --dc-alert-primary-text-color: #{dc.$red-900};
+  --dc-alert-secondary-text-color: #{dc.$red-800};
 }
 
 .dc-alert_appearance_info {
-  --dc-alert-bg-color: #{$blue-50};
-  --dc-alert-border-color: #{$blue-200};
-  --dc-alert-icon-color: #{$blue-500};
-  --dc-alert-primary-text-color: #{$blue-800};
-  --dc-alert-secondary-text-color: #{$blue-700};
+  --dc-alert-bg-color: #{dc.$blue-50};
+  --dc-alert-border-color: #{dc.$blue-200};
+  --dc-alert-icon-color: #{dc.$blue-500};
+  --dc-alert-primary-text-color: #{dc.$blue-800};
+  --dc-alert-secondary-text-color: #{dc.$blue-700};
 }
 
 .dc-alert_appearance_success {
-  --dc-alert-bg-color: #{$green-100};
-  --dc-alert-border-color: #{$green-300};
-  --dc-alert-icon-color: #{$green-500};
-  --dc-alert-primary-text-color: #{$green-900};
-  --dc-alert-secondary-text-color: #{$green-800};
+  --dc-alert-bg-color: #{dc.$green-100};
+  --dc-alert-border-color: #{dc.$green-300};
+  --dc-alert-icon-color: #{dc.$green-500};
+  --dc-alert-primary-text-color: #{dc.$green-900};
+  --dc-alert-secondary-text-color: #{dc.$green-800};
 }

package/scss/components/_avatar.scss

@@ -1,104 +1,106 @@
+@use '../abstracts' as dc;
+
 .dc-avatar {
   position: relative;
   display: inline-flex;
 }
 
 .dc-avatar_tint_blue {
-  --dc-avatar-color: #{$white};
+  --dc-avatar-color: #{dc.$white};
   --dc-avatar-bg1-color: #6fd2fc;
   --dc-avatar-bg2-color: #2a9ef1;
 }
 
 .dc-avatar_icon-tint_blue {
-  --dc-avatar-icon-color: #{$white};
+  --dc-avatar-icon-color: #{dc.$white};
   --dc-avatar-icon-bg: linear-gradient(#6fd2fc, #2a9ef1);
 }
 
 .dc-avatar_tint_cyan {
-  --dc-avatar-color: #{$white};
+  --dc-avatar-color: #{dc.$white};
   --dc-avatar-bg1-color: #51ebd5;
   --dc-avatar-bg2-color: #28c9b7;
 }
 
 .dc-avatar_icon-tint_cyan {
-  --dc-avatar-icon-color: #{$white};
+  --dc-avatar-icon-color: #{dc.$white};
   --dc-avatar-icon-bg: linear-gradient(#51ebd5, #28c9b7);
 }
 
 .dc-avatar_tint_red {
-  --dc-avatar-color: #{$white};
+  --dc-avatar-color: #{dc.$white};
   --dc-avatar-bg1-color: #ff8e72;
   --dc-avatar-bg2-color: #ff5151;
 }
 
 .dc-avatar_icon-tint_red {
-  --dc-avatar-icon-color: #{$white};
+  --dc-avatar-icon-color: #{dc.$white};
   --dc-avatar-icon-bg: linear-gradient(#ff8e72, #ff5151);
 }
 
 .dc-avatar_tint_green {
-  --dc-avatar-color: #{$white};
+  --dc-avatar-color: #{dc.$white};
   --dc-avatar-bg1-color: #28ed7f;
   --dc-avatar-bg2-color: #16c059;
 }
 
 .dc-avatar_icon-tint_green {
-  --dc-avatar-icon-color: #{$white};
+  --dc-avatar-icon-color: #{dc.$white};
   --dc-avatar-icon-bg: linear-gradient(#28ed7f, #16c032);
 }
 
 .dc-avatar_tint_lime {
-  --dc-avatar-color: #{$white};
+  --dc-avatar-color: #{dc.$white};
   --dc-avatar-bg1-color: #9ddd7d;
   --dc-avatar-bg2-color: #54cb68;
 }
 
 .dc-avatar_icon-tint_lime {
-  --dc-avatar-icon-color: #{$white};
+  --dc-avatar-icon-color: #{dc.$white};
   --dc-avatar-icon-bg: linear-gradient(#9ddd7d, #54cb68);
 }
 
 .dc-avatar_tint_indigo {
-  --dc-avatar-color: #{$white};
+  --dc-avatar-color: #{dc.$white};
   --dc-avatar-bg1-color: #80aaff;
   --dc-avatar-bg2-color: #665fff;
 }
 
 .dc-avatar_icon-tint_indigo {
-  --dc-avatar-icon-color: #{$white};
+  --dc-avatar-icon-color: #{dc.$white};
   --dc-avatar-icon-bg: linear-gradient(#80aaff, #665fff);
 }
 
 .dc-avatar_tint_yellow {
-  --dc-avatar-color: #{$white};
+  --dc-avatar-color: #{dc.$white};
   --dc-avatar-bg1-color: #ffd85e;
   --dc-avatar-bg2-color: #ffb92b;
 }
 
 .dc-avatar_icon-tint_yellow {
-  --dc-avatar-icon-color: #{$white};
+  --dc-avatar-icon-color: #{dc.$white};
   --dc-avatar-icon-bg: linear-gradient(#ffd85e, #ffb92b);
 }
 
 .dc-avatar_tint_orange {
-  --dc-avatar-color: #{$white};
+  --dc-avatar-color: #{dc.$white};
   --dc-avatar-bg1-color: #ffc045;
   --dc-avatar-bg2-color: #ff8f15;
 }
 
 .dc-avatar_icon-tint_orange {
-  --dc-avatar-icon-color: #{$white};
+  --dc-avatar-icon-color: #{dc.$white};
   --dc-avatar-icon-bg: linear-gradient(#ffc045, #ff8f15);
 }
 
 .dc-avatar_tint_pink {
-  --dc-avatar-color: #{$white};
+  --dc-avatar-color: #{dc.$white};
   --dc-avatar-bg1-color: #e09ff2;
   --dc-avatar-bg2-color: #d669ed;
 }
 
 .dc-avatar_icon-tint_pink {
-  --dc-avatar-icon-color: #{$white};
+  --dc-avatar-icon-color: #{dc.$white};
   --dc-avatar-icon-bg: linear-gradient(#e09ff2, #d669ed);
 }
 

package/scss/components/_box.scss

@@ -1,3 +1,5 @@
+@use '../abstracts' as dc;
+
 .dc-box {
   font-family: var(--dc-font-base);
   box-sizing: border-box;
@@ -45,31 +47,31 @@
 }
 
 .dc-box_border-radius_2xs {
-  border-radius: $border-radius-2xs;
+  border-radius: dc.$border-radius-2xs;
 }
 
 .dc-box_border-radius_xs {
-  border-radius: $border-radius-xs;
+  border-radius: dc.$border-radius-xs;
 }
 
 .dc-box_border-radius_sm {
-  border-radius: $border-radius-sm;
+  border-radius: dc.$border-radius-sm;
 }
 
 .dc-box_border-radius_md {
-  border-radius: $border-radius-md;
+  border-radius: dc.$border-radius-md;
 }
 
 .dc-box_border-radius_lg {
-  border-radius: $border-radius-lg;
+  border-radius: dc.$border-radius-lg;
 }
 
 .dc-box_border-radius_xl {
-  border-radius: $border-radius-xl;
+  border-radius: dc.$border-radius-xl;
 }
 
 .dc-box_border-radius_2xl {
-  border-radius: $border-radius-2xl;
+  border-radius: dc.$border-radius-2xl;
 }
 
 /*------------------------------------*\
@@ -80,23 +82,23 @@
 }
 
 .dc-box_elevation_xs {
-  box-shadow: $shadow-xs;
+  box-shadow: dc.$shadow-xs;
 }
 
 .dc-box_elevation_sm {
-  box-shadow: $shadow-sm;
+  box-shadow: dc.$shadow-sm;
 }
 
 .dc-box_elevation_md {
-  box-shadow: $shadow-md;
+  box-shadow: dc.$shadow-md;
 }
 
 .dc-box_elevation_lg {
-  box-shadow: $shadow-lg;
+  box-shadow: dc.$shadow-lg;
 }
 
 .dc-box_elevation_xl {
-  box-shadow: $shadow-xl;
+  box-shadow: dc.$shadow-xl;
 }
 
 /*------------------------------------*\
@@ -107,31 +109,31 @@
 }
 
 .dc-box_p_1x {
-  padding: $gap-1x;
+  padding: dc.$gap-1x;
 }
 
 .dc-box_p_2x {
-  padding: $gap-2x;
+  padding: dc.$gap-2x;
 }
 
 .dc-box_p_3x {
-  padding: $gap-3x;
+  padding: dc.$gap-3x;
 }
 
 .dc-box_p_4x {
-  padding: $gap-4x;
+  padding: dc.$gap-4x;
 }
 
 .dc-box_p_5x {
-  padding: $gap-5x;
+  padding: dc.$gap-5x;
 }
 
 .dc-box_p_6x {
-  padding: $gap-6x;
+  padding: dc.$gap-6x;
 }
 
 .dc-box_p_8x {
-  padding: $gap-8x;
+  padding: dc.$gap-8x;
 }
 
 /*------------------------------------*\
@@ -142,31 +144,31 @@
 }
 
 .dc-box_pt_1x {
-  padding-top: $gap-1x;
+  padding-top: dc.$gap-1x;
 }
 
 .dc-box_pt_2x {
-  padding-top: $gap-2x;
+  padding-top: dc.$gap-2x;
 }
 
 .dc-box_pt_3x {
-  padding-top: $gap-3x;
+  padding-top: dc.$gap-3x;
 }
 
 .dc-box_pt_4x {
-  padding-top: $gap-4x;
+  padding-top: dc.$gap-4x;
 }
 
 .dc-box_pt_5x {
-  padding-top: $gap-5x;
+  padding-top: dc.$gap-5x;
 }
 
 .dc-box_pt_6x {
-  padding-top: $gap-6x;
+  padding-top: dc.$gap-6x;
 }
 
 .dc-box_pt_8x {
-  padding-top: $gap-8x;
+  padding-top: dc.$gap-8x;
 }
 
 /*------------------------------------*\
@@ -177,31 +179,31 @@
 }
 
 .dc-box_pr_1x {
-  padding-right: $gap-1x;
+  padding-right: dc.$gap-1x;
 }
 
 .dc-box_pr_2x {
-  padding-right: $gap-2x;
+  padding-right: dc.$gap-2x;
 }
 
 .dc-box_pr_3x {
-  padding-right: $gap-3x;
+  padding-right: dc.$gap-3x;
 }
 
 .dc-box_pr_4x {
-  padding-right: $gap-4x;
+  padding-right: dc.$gap-4x;
 }
 
 .dc-box_pr_5x {
-  padding-right: $gap-5x;
+  padding-right: dc.$gap-5x;
 }
 
 .dc-box_pr_6x {
-  padding-right: $gap-6x;
+  padding-right: dc.$gap-6x;
 }
 
 .dc-box_pr_8x {
-  padding-right: $gap-8x;
+  padding-right: dc.$gap-8x;
 }
 
 /*------------------------------------*\
@@ -212,31 +214,31 @@
 }
 
 .dc-box_pb_1x {
-  padding-bottom: $gap-1x;
+  padding-bottom: dc.$gap-1x;
 }
 
 .dc-box_pb_2x {
-  padding-bottom: $gap-2x;
+  padding-bottom: dc.$gap-2x;
 }
 
 .dc-box_pb_3x {
-  padding-bottom: $gap-3x;
+  padding-bottom: dc.$gap-3x;
 }
 
 .dc-box_pb_4x {
-  padding-bottom: $gap-4x;
+  padding-bottom: dc.$gap-4x;
 }
 
 .dc-box_pb_5x {
-  padding-bottom: $gap-5x;
+  padding-bottom: dc.$gap-5x;
 }
 
 .dc-box_pb_6x {
-  padding-bottom: $gap-6x;
+  padding-bottom: dc.$gap-6x;
 }
 
 .dc-box_pb_8x {
-  padding-bottom: $gap-8x;
+  padding-bottom: dc.$gap-8x;
 }
 
 /*------------------------------------*\
@@ -247,29 +249,29 @@
 }
 
 .dc-box_pl_1x {
-  padding-left: $gap-1x;
+  padding-left: dc.$gap-1x;
 }
 
 .dc-box_pl_2x {
-  padding-left: $gap-2x;
+  padding-left: dc.$gap-2x;
 }
 
 .dc-box_pl_3x {
-  padding-left: $gap-3x;
+  padding-left: dc.$gap-3x;
 }
 
 .dc-box_pl_4x {
-  padding-left: $gap-4x;
+  padding-left: dc.$gap-4x;
 }
 
 .dc-box_pl_5x {
-  padding-left: $gap-5x;
+  padding-left: dc.$gap-5x;
 }
 
 .dc-box_pl_6x {
-  padding-left: $gap-6x;
+  padding-left: dc.$gap-6x;
 }
 
 .dc-box_pl_8x {
-  padding-left: $gap-8x;
+  padding-left: dc.$gap-8x;
 }