draft-components 3.1.0 → 3.2.1

package/css/draft-components-utilities.css

@@ -252,12 +252,36 @@
   flex-wrap: wrap-reverse !important;
 }
 
+.justify-items-start {
+  justify-items: start !important;
+}
+
+.justify-items-end {
+  justify-items: end !important;
+}
+
+.justify-items-center {
+  justify-items: center !important;
+}
+
+.justify-items-between {
+  justify-items: space-between !important;
+}
+
+.justify-items-around {
+  justify-items: space-around !important;
+}
+
+.justify-items-evenly {
+  justify-items: space-evenly !important;
+}
+
 .justify-content-start {
-  justify-content: flex-start !important;
+  justify-content: start !important;
 }
 
 .justify-content-end {
-  justify-content: flex-end !important;
+  justify-content: end !important;
 }
 
 .justify-content-center {
@@ -277,11 +301,11 @@
 }
 
 .align-items-start {
-  align-items: flex-start !important;
+  align-items: start !important;
 }
 
 .align-items-end {
-  align-items: flex-end !important;
+  align-items: end !important;
 }
 
 .align-items-center {
@@ -297,11 +321,11 @@
 }
 
 .align-content-start {
-  align-content: flex-start !important;
+  align-content: start !important;
 }
 
 .align-content-end {
-  align-content: flex-end !important;
+  align-content: end !important;
 }
 
 .align-content-center {
@@ -325,11 +349,11 @@
 }
 
 .align-self-start {
-  align-self: flex-start !important;
+  align-self: start !important;
 }
 
 .align-self-end {
-  align-self: flex-end !important;
+  align-self: end !important;
 }
 
 .align-self-center {

package/css/draft-components.css

@@ -1025,7 +1025,6 @@
 }
 
 .dc-button:hover:not(:disabled) {
-  cursor: pointer;
   background: var(--dc-button-bg-hover);
 }
 
@@ -1035,10 +1034,6 @@
   grid-template-columns: repeat(2, auto);
 }
 
-.dc-button_loading {
-  cursor: default;
-}
-
 .dc-button_loading:disabled {
   opacity: initial;
 }
@@ -1702,7 +1697,7 @@
   border-bottom-right-radius: calc(var(--dc-input-border-radius) - 1px);
 }
 
-.dc-text-input:focus-within {
+.dc-text-input_focused {
   border-color: var(--dc-input-focus-ring-color);
   box-shadow: 0 0 0 1px var(--dc-input-focus-ring-color);
 }
@@ -1843,7 +1838,6 @@
 .dc-password-input__toggle-button:not(:disabled):focus,
 .dc-password-input__toggle-button:not(:disabled):hover {
   color: var(--dc-password-input-toggle-color-hover);
-  cursor: pointer;
   background: var(--dc-password-input-toggle-bg-hover);
   outline: none;
 }
@@ -2008,6 +2002,7 @@
 }
 
 .dc-select__native {
+  flex-grow: 1;
   max-width: 100%;
   padding-right: calc(var(--dc-select-height) + 0.5em);
   padding-left: var(--dc-select-padding-x);
@@ -2017,7 +2012,6 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  cursor: pointer;
   background: none;
   border: none;
 }
@@ -2027,7 +2021,6 @@
 }
 
 .dc-select__native:disabled {
-  cursor: default;
   opacity: 1;
 }
 
@@ -2110,7 +2103,6 @@
   width: 100%;
   height: 100%;
   vertical-align: middle;
-  cursor: pointer;
   background: var(--dc-switch-track-bg);
   border-radius: var(--dc-switch-radius);
   transition-duration: 0.2s;
@@ -2228,7 +2220,6 @@
   width: 100%;
   height: 100%;
   vertical-align: middle;
-  cursor: pointer;
   background: var(--dc-checkbox-bg);
   border: 1px solid var(--dc-checkbox-border-color);
   border-radius: var(--dc-checkbox-radius);
@@ -2317,7 +2308,6 @@
   width: var(--dc-radio-size);
   height: var(--dc-radio-size);
   vertical-align: middle;
-  cursor: pointer;
   background: var(--dc-radio-color-bg);
   border: 1px solid var(--dc-radio-color-border);
   border-radius: 50%;
@@ -2499,7 +2489,7 @@
 
 .dc-slider__input::-moz-range-thumb {
   box-sizing: border-box;
-  display: inline-flex;
+  display: block;
   width: var(--dc-slider-thumb-width);
   height: var(--dc-slider-thumb-height);
   -moz-appearance: none;
@@ -2526,7 +2516,7 @@
 
 .dc-slider__input::-webkit-slider-thumb {
   box-sizing: border-box;
-  display: inline-block;
+  display: block;
   width: var(--dc-slider-thumb-width);
   height: var(--dc-slider-thumb-height);
   -webkit-appearance: none;
@@ -2539,6 +2529,10 @@
   transition: var(--dc-slider-thumb-transition);
 }
 
+.dc-slider__input::-webkit-slider-container {
+  min-height: 0;
+}
+
 .dc-slider_range .dc-slider__input::-webkit-slider-thumb {
   pointer-events: all;
 }
@@ -2806,10 +2800,6 @@
   background: var(--dc-day-bg-selected);
 }
 
-.dc-calendar-day:hover {
-  cursor: pointer;
-}
-
 .dc-calendar-day:hover > .dc-calendar-day__body {
   box-shadow: inset 0 0 0 2px var(--dc-day-border-color-hover);
 }
@@ -2957,7 +2947,7 @@
 }
 
 .dc-segmented__item + .dc-segmented__item::before {
-  display: inline-block;
+  display: block;
   float: left;
   width: 1px;
   height: calc(var(--dc-segmented-button-height) - var(--dc-segmented-button-radius) * 2);
@@ -2986,7 +2976,6 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -3174,7 +3163,6 @@
   height: var(--dc-color-picker-btn-size);
   font-size: 0;
   color: transparent;
-  cursor: pointer;
   background: var(--dc-color-picker-btn-color);
   border-radius: 50%;
   box-shadow: inset 0 0 0 1px var(--dc-color-picker-btn-inner-border-color);
@@ -3420,7 +3408,6 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  cursor: pointer;
   background: transparent;
   border: none;
 }
@@ -3551,7 +3538,6 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  cursor: pointer;
   background: none;
   border: none;
   border-radius: 4px;
@@ -3698,7 +3684,6 @@
      -moz-appearance: none;
           appearance: none;
   pointer-events: none;
-  cursor: pointer;
   background: var(--dc-toast-close-btn-bg);
   border: none;
   border-radius: 50%;
@@ -3722,7 +3707,6 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  cursor: pointer;
   background: var(--dc-toast-btn-bg);
   border: none;
   border-radius: 6px;
@@ -3983,7 +3967,6 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  cursor: pointer;
   background: none;
   border: none;
 }
@@ -4107,10 +4090,6 @@
   border-radius: 6px;
 }
 
-.dc-menu-btn:hover {
-  cursor: pointer;
-}
-
 .dc-menu-btn:focus {
   background: var(--dc-menu-item-bg);
   outline: none;
@@ -4339,7 +4318,6 @@
   font: var(--dc-text-sm);
   color: var(--dc-filter-button-text-color);
   white-space: nowrap;
-  cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
@@ -4393,7 +4371,6 @@
   padding: 0;
   font-size: 14px;
   color: inherit;
-  cursor: pointer;
   background: none;
   border: none;
 }
@@ -4636,7 +4613,6 @@
   box-sizing: border-box;
   padding: 6px 8px;
   color: var(--dc-filtered-search-option-color);
-  cursor: pointer;
   border-radius: 5px;
 }
 

package/dist/components/alert/alert.css

@@ -56,7 +56,6 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  cursor: pointer;
   background: none;
   border: none;
   border-radius: 4px;

package/dist/components/button/button.css

@@ -73,7 +73,6 @@
 }
 
 .dc-button:hover:not(:disabled) {
-  cursor: pointer;
   background: var(--dc-button-bg-hover);
 }
 
@@ -83,10 +82,6 @@
   grid-template-columns: repeat(2, auto);
 }
 
-.dc-button_loading {
-  cursor: default;
-}
-
 .dc-button_loading:disabled {
   opacity: initial;
 }

package/dist/components/checkbox/checkbox.css

@@ -39,7 +39,6 @@
   width: 100%;
   height: 100%;
   vertical-align: middle;
-  cursor: pointer;
   background: var(--dc-checkbox-bg);
   border: 1px solid var(--dc-checkbox-border-color);
   border-radius: var(--dc-checkbox-radius);

package/dist/components/color-picker/color-picker.css

@@ -30,7 +30,6 @@
   height: var(--dc-color-picker-btn-size);
   font-size: 0;
   color: transparent;
-  cursor: pointer;
   background: var(--dc-color-picker-btn-color);
   border-radius: 50%;
   box-shadow: inset 0 0 0 1px var(--dc-color-picker-btn-inner-border-color);

package/dist/components/date-picker/date-picker.css

@@ -100,10 +100,6 @@
   background: var(--dc-day-bg-selected);
 }
 
-.dc-calendar-day:hover {
-  cursor: pointer;
-}
-
 .dc-calendar-day:hover > .dc-calendar-day__body {
   box-shadow: inset 0 0 0 2px var(--dc-day-border-color-hover);
 }

package/dist/components/filter-buttons/filter-buttons.css

@@ -28,7 +28,6 @@
   font: var(--dc-text-sm);
   color: var(--dc-filter-button-text-color);
   white-space: nowrap;
-  cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;

package/dist/components/filtered-search/filter-token.css

@@ -19,7 +19,6 @@
   padding: 0;
   font-size: 14px;
   color: inherit;
-  cursor: pointer;
   background: none;
   border: none;
 }

package/dist/components/filtered-search/filtered-search.css

@@ -19,7 +19,6 @@
   padding: 0;
   font-size: 14px;
   color: inherit;
-  cursor: pointer;
   background: none;
   border: none;
 }
@@ -262,7 +261,6 @@
   box-sizing: border-box;
   padding: 6px 8px;
   color: var(--dc-filtered-search-option-color);
-  cursor: pointer;
   border-radius: 5px;
 }
 

package/dist/components/menu/menu.css

@@ -47,10 +47,6 @@
   border-radius: 6px;
 }
 
-.dc-menu-btn:hover {
-  cursor: pointer;
-}
-
 .dc-menu-btn:focus {
   background: var(--dc-menu-item-bg);
   outline: none;

package/dist/components/password-input/password-input.css

@@ -33,7 +33,6 @@
 .dc-password-input__toggle-button:not(:disabled):focus,
 .dc-password-input__toggle-button:not(:disabled):hover {
   color: var(--dc-password-input-toggle-color-hover);
-  cursor: pointer;
   background: var(--dc-password-input-toggle-bg-hover);
   outline: none;
 }

package/dist/components/radio/radio.css

@@ -37,7 +37,6 @@
   width: var(--dc-radio-size);
   height: var(--dc-radio-size);
   vertical-align: middle;
-  cursor: pointer;
   background: var(--dc-radio-color-bg);
   border: 1px solid var(--dc-radio-color-border);
   border-radius: 50%;

package/dist/components/segmented-control/segmented-control.css

@@ -47,7 +47,7 @@
 }
 
 .dc-segmented__item + .dc-segmented__item::before {
-  display: inline-block;
+  display: block;
   float: left;
   width: 1px;
   height: calc(var(--dc-segmented-button-height) - var(--dc-segmented-button-radius) * 2);
@@ -76,7 +76,6 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  cursor: pointer;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;

package/dist/components/select/select.css

@@ -65,6 +65,7 @@
 }
 
 .dc-select__native {
+  flex-grow: 1;
   max-width: 100%;
   padding-right: calc(var(--dc-select-height) + 0.5em);
   padding-left: var(--dc-select-padding-x);
@@ -74,7 +75,6 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  cursor: pointer;
   background: none;
   border: none;
 }
@@ -84,7 +84,6 @@
 }
 
 .dc-select__native:disabled {
-  cursor: default;
   opacity: 1;
 }
 

package/dist/components/slider/slider.css

@@ -130,7 +130,7 @@
 
 .dc-slider__input::-moz-range-thumb {
   box-sizing: border-box;
-  display: inline-flex;
+  display: block;
   width: var(--dc-slider-thumb-width);
   height: var(--dc-slider-thumb-height);
   -moz-appearance: none;
@@ -157,7 +157,7 @@
 
 .dc-slider__input::-webkit-slider-thumb {
   box-sizing: border-box;
-  display: inline-block;
+  display: block;
   width: var(--dc-slider-thumb-width);
   height: var(--dc-slider-thumb-height);
   -webkit-appearance: none;
@@ -170,6 +170,10 @@
   transition: var(--dc-slider-thumb-transition);
 }
 
+.dc-slider__input::-webkit-slider-container {
+  min-height: 0;
+}
+
 .dc-slider_range .dc-slider__input::-webkit-slider-thumb {
   pointer-events: all;
 }

package/dist/components/switch/switch.css

@@ -45,7 +45,6 @@
   width: 100%;
   height: 100%;
   vertical-align: middle;
-  cursor: pointer;
   background: var(--dc-switch-track-bg);
   border-radius: var(--dc-switch-radius);
   transition-duration: 0.2s;

package/dist/components/table/table.css

@@ -104,7 +104,6 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  cursor: pointer;
   background: transparent;
   border: none;
 }

package/dist/components/tabs/tabs.css

@@ -18,7 +18,6 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  cursor: pointer;
   background: none;
   border: none;
 }

package/dist/components/text-input/text-input.css

@@ -39,7 +39,7 @@
   border-bottom-right-radius: calc(var(--dc-input-border-radius) - 1px);
 }
 
-.dc-text-input:focus-within {
+.dc-text-input_focused {
   border-color: var(--dc-input-focus-ring-color);
   box-shadow: 0 0 0 1px var(--dc-input-focus-ring-color);
 }

package/dist/components/text-input/text-input.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef } from 'react';
+import { forwardRef, useState } from 'react';
 import { classNames } from '../../lib/react-helpers.js';
-export const TextInput = forwardRef(function TextInput({ style, className, fullWidth, size = 'md', sizeInChars, slotStyle = 'plain', slotLeft, slotRight, type = 'text', invalid, disabled, onChange, onChangeValue, ...props }, ref) {
+export const TextInput = forwardRef(function TextInput({ style, className, fullWidth, size = 'md', sizeInChars, slotStyle = 'plain', slotLeft, slotRight, type = 'text', invalid, disabled, onChange, onFocus, onBlur, onChangeValue, ...props }, ref) {
+    const [focused, setFocused] = useState(false);
     let elementBeforeInput;
     if (slotLeft) {
         const className = 'dc-text-input__slot-left';
@@ -30,13 +31,26 @@ export const TextInput = forwardRef(function TextInput({ style, className, fullW
             onChangeValue(event.target.value);
         }
     };
+    const handleFocus = (event) => {
+        setFocused(true);
+        if (typeof onFocus === 'function') {
+            onFocus(event);
+        }
+    };
+    const handleBlur = (event) => {
+        setFocused(false);
+        if (typeof onBlur === 'function') {
+            onBlur(event);
+        }
+    };
     return (_jsxs("div", { style: style, className: classNames(className, 'dc-text-input', {
             [`dc-text-input_${size}`]: size,
             [`dc-text-input_slot_${slotStyle}`]: slotStyle,
             'dc-text-input_full-width': fullWidth,
             'dc-text-input_invalid': invalid,
+            'dc-text-input_focused': focused,
             'dc-text-input_disabled': disabled,
             'dc-text-input_has_slot-left': elementBeforeInput,
             'dc-text-input_has_slot-right': elementAfterInput,
-        }), children: [elementBeforeInput, _jsx("input", { ...props, className: "dc-text-input__native", ref: ref, type: type, size: sizeInChars, disabled: disabled, "aria-invalid": props['aria-invalid'] ?? invalid, onChange: handleChange }), elementAfterInput] }));
+        }), children: [elementBeforeInput, _jsx("input", { ...props, className: "dc-text-input__native", ref: ref, type: type, size: sizeInChars, disabled: disabled, "aria-invalid": props['aria-invalid'] ?? invalid, onChange: handleChange, onFocus: handleFocus, onBlur: handleBlur }), elementAfterInput] }));
 });

package/dist/components/toast/toast.css

@@ -39,7 +39,6 @@
      -moz-appearance: none;
           appearance: none;
   pointer-events: none;
-  cursor: pointer;
   background: var(--dc-toast-close-btn-bg);
   border: none;
   border-radius: 50%;
@@ -63,7 +62,6 @@
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
-  cursor: pointer;
   background: var(--dc-toast-btn-bg);
   border: none;
   border-radius: 6px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "draft-components",
-  "version": "3.1.0",
+  "version": "3.2.1",
   "description": "The React based UI components library.",
   "type": "module",
   "exports": {