draft-components 3.4.0 → 3.5.0

package/css/draft-components.css

@@ -1758,6 +1758,18 @@
   outline: none;
 }
 
+.dc-text-input_align_left .dc-text-input__native {
+  text-align: left;
+}
+
+.dc-text-input_align_right .dc-text-input__native {
+  text-align: right;
+}
+
+.dc-text-input_align_center .dc-text-input__native {
+  text-align: center;
+}
+
 .dc-text-input__slot-left,
 .dc-text-input__slot-right {
   box-sizing: border-box;
@@ -2158,6 +2170,7 @@
 
 .dc-search-select:focus {
   border-color: var(--dc-search-select-focus-ring-color);
+  outline: none;
   box-shadow: 0 0 0 1px var(--dc-search-select-focus-ring-color);
 }
 
@@ -3132,19 +3145,19 @@
   font-size: 15px;
 }
 
-.dc-segmented__item + .dc-segmented__item::before {
-  display: block;
-  float: left;
-  width: 1px;
-  height: calc(var(--dc-segmented-button-height) - var(--dc-segmented-button-radius) * 2);
-  content: "";
-  background: var(--dc-segmented-delimiter-color);
-  transform: translateY(var(--dc-segmented-button-radius));
+.dc-segmented__item + .dc-segmented__item {
+  background-image: linear-gradient(to bottom,
+    transparent 25%,
+    var(--dc-segmented-delimiter-color) 25% 75%,
+    transparent 75%
+  );
+  background-repeat: no-repeat;
+  background-size: 1px 100%;
 }
 
-.dc-segmented__item_selected::before,
-.dc-segmented__item_selected + .dc-segmented__item::before {
-  visibility: hidden;
+.dc-segmented__item_selected,
+.dc-segmented__item_selected + .dc-segmented__item {
+  background-image: none;
 }
 
 .dc-segmented-button {

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

@@ -100,6 +100,7 @@
 
 .dc-search-select:focus {
   border-color: var(--dc-search-select-focus-ring-color);
+  outline: none;
   box-shadow: 0 0 0 1px var(--dc-search-select-focus-ring-color);
 }
 

package/dist/components/search-select/search-select.d.ts

@@ -12,6 +12,7 @@ export type SearchSelectProps<Value> = {
     invalid?: boolean;
     loading?: boolean;
     disabled?: boolean;
+    readOnly?: boolean;
     textboxIcon?: ReactNode;
     textboxAriaLabel?: string;
     textboxPlaceholder?: string;
@@ -21,7 +22,7 @@ export type SearchSelectProps<Value> = {
     value: Value;
     onChange: (value: Value) => void;
 };
-export declare function SearchSelect<Value>({ className, size, fullWidth, invalid, loading, disabled, textboxIcon, textboxAriaLabel, textboxPlaceholder, labelledBy, displayedValue, children, value: selectedValue, onChange: onSelectedValueChange, }: SearchSelectProps<Value>): import("react/jsx-runtime").JSX.Element;
+export declare function SearchSelect<Value>({ className, size, fullWidth, invalid, loading, disabled, readOnly, textboxIcon, textboxAriaLabel, textboxPlaceholder, labelledBy, displayedValue, children, value: selectedValue, onChange: onSelectedValueChange, }: SearchSelectProps<Value>): import("react/jsx-runtime").JSX.Element;
 export declare namespace SearchSelect {
     var Option: <T>({ className, value, children, caption, }: {
         className?: string;

package/dist/components/search-select/search-select.js

@@ -6,7 +6,7 @@ import { Popover } from '../popover/popover.js';
 import { TextInput } from '../text-input/text-input.js';
 import { Spinner } from '../spinner/spinner.js';
 import { ChevronDown, MagnifyingGlass } from './icons.js';
-export function SearchSelect({ className, size = 'md', fullWidth, invalid, loading, disabled, textboxIcon, textboxAriaLabel, textboxPlaceholder = '', labelledBy, displayedValue, children, value: selectedValue, onChange: onSelectedValueChange, }) {
+export function SearchSelect({ className, size = 'md', fullWidth, invalid, loading, disabled, readOnly, textboxIcon, textboxAriaLabel, textboxPlaceholder = '', labelledBy, displayedValue, children, value: selectedValue, onChange: onSelectedValueChange, }) {
     const id = useId();
     const buttonId = `${id}button`;
     const textboxId = `${id}textbox`;
@@ -16,7 +16,7 @@ export function SearchSelect({ className, size = 'md', fullWidth, invalid, loadi
     const [searchQuery, setSearchQuery] = useState('');
     const [highlightedValue, setHighlightedValue] = useState(selectedValue);
     const openPopover = () => {
-        if (disabled || loading) {
+        if (readOnly || disabled || loading) {
             return;
         }
         options.clear();

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

@@ -46,19 +46,19 @@
   font-size: 15px;
 }
 
-.dc-segmented__item + .dc-segmented__item::before {
-  display: block;
-  float: left;
-  width: 1px;
-  height: calc(var(--dc-segmented-button-height) - var(--dc-segmented-button-radius) * 2);
-  content: "";
-  background: var(--dc-segmented-delimiter-color);
-  transform: translateY(var(--dc-segmented-button-radius));
+.dc-segmented__item + .dc-segmented__item {
+  background-image: linear-gradient(to bottom,
+    transparent 25%,
+    var(--dc-segmented-delimiter-color) 25% 75%,
+    transparent 75%
+  );
+  background-repeat: no-repeat;
+  background-size: 1px 100%;
 }
 
-.dc-segmented__item_selected::before,
-.dc-segmented__item_selected + .dc-segmented__item::before {
-  visibility: hidden;
+.dc-segmented__item_selected,
+.dc-segmented__item_selected + .dc-segmented__item {
+  background-image: none;
 }
 
 .dc-segmented-button {

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

@@ -100,6 +100,18 @@
   outline: none;
 }
 
+.dc-text-input_align_left .dc-text-input__native {
+  text-align: left;
+}
+
+.dc-text-input_align_right .dc-text-input__native {
+  text-align: right;
+}
+
+.dc-text-input_align_center .dc-text-input__native {
+  text-align: center;
+}
+
 .dc-text-input__slot-left,
 .dc-text-input__slot-right {
   box-sizing: border-box;

package/dist/components/text-input/text-input.d.ts

@@ -4,6 +4,7 @@ type TextInputBaseProps = Omit<TextInputHTMLProps, 'type' | 'size'>;
 export type TextInputType = 'date' | 'datetime-local' | 'email' | 'number' | 'password' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
 export type TextInputSize = 'sm' | 'md' | 'lg';
 export type TextInputSlotStyle = 'plain' | 'tinted';
+export type TextInputTextAlign = 'left' | 'right' | 'center';
 export type TextInputSlotRenderer = (props: {
     className: string;
 }) => ReactNode;
@@ -17,6 +18,7 @@ export type TextInputProps = TextInputBaseProps & {
     slotLeft?: ReactNode | TextInputSlotRenderer;
     slotRight?: ReactNode | TextInputSlotRenderer;
     slotStyle?: TextInputSlotStyle;
+    textAlign?: TextInputTextAlign;
     onChangeValue?: TextInputValueChangeHandler;
 };
 export declare const TextInput: import("react").ForwardRefExoticComponent<Omit<TextInputProps, "ref"> & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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, onFocus, onBlur, onChangeValue, ...props }, ref) {
+export const TextInput = forwardRef(function TextInput({ style, className, fullWidth, size = 'md', sizeInChars, slotStyle = 'plain', textAlign = 'left', slotLeft, slotRight, type = 'text', invalid, disabled, onChange, onFocus, onBlur, onChangeValue, ...props }, ref) {
     const [focused, setFocused] = useState(false);
     let elementBeforeInput;
     if (slotLeft) {
@@ -46,6 +46,7 @@ export const TextInput = forwardRef(function TextInput({ style, className, fullW
     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_align_${textAlign}`]: textAlign,
             'dc-text-input_full-width': fullWidth,
             'dc-text-input_invalid': invalid,
             'dc-text-input_focused': focused,

package/package.json

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