draft-components 4.13.0 → 4.14.0

package/css/draft-components.css

@@ -2757,6 +2757,167 @@
   color-scheme: dark;
 }
 
+.dc-token-input {
+  --color: var(--dc-neutral-900);
+  --background: var(--dc-white);
+  --border-color: var(--dc-neutral-300);
+  --border-color-error: var(--dc-red-500);
+  --focus-ring-color: var(--dc-focus-ring-color);
+  --input-padding: 0 9px;
+  --token-height: 28px;
+  --token-padding: 0 0 0 8px;
+  --token-color: var(--dc-neutral-950);
+  --token-background: var(--dc-neutral-200);
+  --token-background-hover: rgb(var(--dc-neutral-950-rgb) / 15%);
+  --token-border-radius: 3px;
+
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 3px;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  min-height: 36px;
+  padding: 3px;
+  font: 400 14px/1 var(--dc-primary-font);
+  color-scheme: light;
+  background: var(--background);
+  border: 1px solid var(--border-color);
+  border-radius: 7px;
+}
+
+.dc-token-input[data-disabled="true"] {
+  opacity: var(--dc-disabled-state-opacity);
+}
+
+.dc-token-input[data-invalid="true"] {
+  border-color: var(--border-color-error);
+}
+
+.dc-token-input:focus-within {
+  border-color: var(--focus-ring-color);
+  box-shadow: 0 0 0 1px var(--focus-ring-color);
+}
+
+.dc-token-input_size_sm {
+  --input-padding: 0 5px;
+  --token-height: 24px;
+  --token-padding: 0 0 0 8px;
+  --token-border-radius: 2px;
+
+  gap: 3px;
+  min-height: 32px;
+  padding: 3px;
+  font-size: 13px;
+  border-radius: 6px;
+}
+
+.dc-token-input_size_lg {
+  --input-padding: 0 12px;
+  --token-height: 30px;
+  --token-padding: 0 0 0 12px;
+  --token-border-radius: 3px;
+
+  gap: 4px;
+  min-height: 40px;
+  padding: 4px;
+  font-size: 15px;
+  border-radius: 8px;
+}
+
+.dc-token-input > input {
+  flex-grow: 1;
+  width: auto;
+  min-width: 10ch;
+  padding: var(--input-padding);
+  font: inherit;
+  line-height: 1.5;
+  background: none;
+  border: none;
+}
+
+.dc-token-input > input::-moz-placeholder {
+  color: inherit;
+  opacity: 0.4;
+}
+
+.dc-token-input > input::placeholder {
+  color: inherit;
+  opacity: 0.4;
+}
+
+.dc-token-input > input:not(:only-child) {
+  padding-right: 0.25em;
+  padding-left: 0.25em;
+}
+
+.dc-token-input > input:focus {
+  outline: none;
+}
+
+.dc-token-input__token {
+  display: inline-flex;
+  gap: 2px;
+  max-width: 100%;
+  min-height: var(--token-height);
+  padding: var(--token-padding);
+  font: inherit;
+  color: var(--token-color);
+  cursor: default;
+  background: var(--token-background);
+  border-radius: var(--token-border-radius);
+}
+
+.dc-token-input__token > span {
+  padding: calc((var(--token-height) - 20px) / 2) 0;
+  line-height: 20px;
+}
+
+.dc-token-input__token > button {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--token-height);
+  height: var(--token-height);
+  padding: 0;
+  font: inherit;
+  line-height: 1;
+  color: inherit;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: default;
+  background: none;
+  border: none;
+  border-radius: inherit;
+  opacity: 0.5;
+}
+
+.dc-token-input__token > button:focus {
+  outline: none;
+}
+
+.dc-token-input__token > button:not(:disabled):hover,
+.dc-token-input__token > button:not(:disabled):focus-visible {
+  background: var(--token-background-hover);
+  opacity: 1;
+}
+
+.dark .dc-token-input,
+.dark.dc-token-input {
+  --color: var(--dc-white);
+  --background: var(--dc-neutral-800);
+  --border-color: var(--dc-neutral-600);
+  --border-color-error: var(--dc-red-400);
+  --token-color: var(--dc-white);
+  --token-background: var(--dc-neutral-600);
+  --token-background-hover: rgb(var(--dc-neutral-50-rgb) / 15%);
+
+  color-scheme: dark;
+}
+
 .dc-password-input {
   padding-right: 0;
   color-scheme: light;
@@ -4949,6 +5110,7 @@
 .dc-toasts-list {
   --padding: 16px;
   --animation: 200ms ease;
+  --z-index: calc(infinity + 1);
 
   position: fixed;
   right: var(--padding);

package/dist/components/index.d.ts

@@ -36,5 +36,6 @@ export * from './tag/index.js';
 export * from './text-input/index.js';
 export * from './textarea/index.js';
 export * from './toast/index.js';
+export * from './token-input/index.js';
 export * from './toaster/index.js';
 export * from './tooltip/index.js';

package/dist/components/index.js

@@ -36,6 +36,7 @@ export * from './tag/index.js';
 export * from './text-input/index.js';
 export * from './textarea/index.js';
 export * from './toast/index.js';
+export * from './token-input/index.js';
 export * from './toaster/index.js';
 export * from './tooltip/index.js';
 //# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sCAAsC,CAAC;AACrD,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,yBAAyB,CAAC;AACxC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,wBAAwB,CAAC;AACvC,cAAc,sCAAsC,CAAC;AACrD,cAAc,mBAAmB,CAAC;AAClC,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,uBAAuB,CAAC;AACtC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC;AACvC,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC"}

package/dist/components/toaster/toaster.css

@@ -1,6 +1,7 @@
 .dc-toasts-list {
   --padding: 16px;
   --animation: 200ms ease;
+  --z-index: calc(infinity + 1);
 
   position: fixed;
   right: var(--padding);

package/dist/components/token-input/index.d.ts

@@ -0,0 +1 @@
+export * from './token-input.js';

package/dist/components/token-input/index.js

@@ -0,0 +1,2 @@
+export * from './token-input.js';
+//# sourceMappingURL=index.js.map

package/dist/components/token-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/token-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

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

@@ -0,0 +1,160 @@
+.dc-token-input {
+  --color: var(--dc-neutral-900);
+  --background: var(--dc-white);
+  --border-color: var(--dc-neutral-300);
+  --border-color-error: var(--dc-red-500);
+  --focus-ring-color: var(--dc-focus-ring-color);
+  --input-padding: 0 9px;
+  --token-height: 28px;
+  --token-padding: 0 0 0 8px;
+  --token-color: var(--dc-neutral-950);
+  --token-background: var(--dc-neutral-200);
+  --token-background-hover: rgb(var(--dc-neutral-950-rgb) / 15%);
+  --token-border-radius: 3px;
+
+  box-sizing: border-box;
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 3px;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  min-height: 36px;
+  padding: 3px;
+  font: 400 14px/1 var(--dc-primary-font);
+  color-scheme: light;
+  background: var(--background);
+  border: 1px solid var(--border-color);
+  border-radius: 7px;
+}
+
+.dc-token-input[data-disabled="true"] {
+  opacity: var(--dc-disabled-state-opacity);
+}
+
+.dc-token-input[data-invalid="true"] {
+  border-color: var(--border-color-error);
+}
+
+.dc-token-input:focus-within {
+  border-color: var(--focus-ring-color);
+  box-shadow: 0 0 0 1px var(--focus-ring-color);
+}
+
+.dc-token-input_size_sm {
+  --input-padding: 0 5px;
+  --token-height: 24px;
+  --token-padding: 0 0 0 8px;
+  --token-border-radius: 2px;
+
+  gap: 3px;
+  min-height: 32px;
+  padding: 3px;
+  font-size: 13px;
+  border-radius: 6px;
+}
+
+.dc-token-input_size_lg {
+  --input-padding: 0 12px;
+  --token-height: 30px;
+  --token-padding: 0 0 0 12px;
+  --token-border-radius: 3px;
+
+  gap: 4px;
+  min-height: 40px;
+  padding: 4px;
+  font-size: 15px;
+  border-radius: 8px;
+}
+
+.dc-token-input > input {
+  flex-grow: 1;
+  width: auto;
+  min-width: 10ch;
+  padding: var(--input-padding);
+  font: inherit;
+  line-height: 1.5;
+  background: none;
+  border: none;
+}
+
+.dc-token-input > input::-moz-placeholder {
+  color: inherit;
+  opacity: 0.4;
+}
+
+.dc-token-input > input::placeholder {
+  color: inherit;
+  opacity: 0.4;
+}
+
+.dc-token-input > input:not(:only-child) {
+  padding-right: 0.25em;
+  padding-left: 0.25em;
+}
+
+.dc-token-input > input:focus {
+  outline: none;
+}
+
+.dc-token-input__token {
+  display: inline-flex;
+  gap: 2px;
+  max-width: 100%;
+  min-height: var(--token-height);
+  padding: var(--token-padding);
+  font: inherit;
+  color: var(--token-color);
+  cursor: default;
+  background: var(--token-background);
+  border-radius: var(--token-border-radius);
+}
+
+.dc-token-input__token > span {
+  padding: calc((var(--token-height) - 20px) / 2) 0;
+  line-height: 20px;
+}
+
+.dc-token-input__token > button {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  width: var(--token-height);
+  height: var(--token-height);
+  padding: 0;
+  font: inherit;
+  line-height: 1;
+  color: inherit;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  cursor: default;
+  background: none;
+  border: none;
+  border-radius: inherit;
+  opacity: 0.5;
+}
+
+.dc-token-input__token > button:focus {
+  outline: none;
+}
+
+.dc-token-input__token > button:not(:disabled):hover,
+.dc-token-input__token > button:not(:disabled):focus-visible {
+  background: var(--token-background-hover);
+  opacity: 1;
+}
+
+.dark .dc-token-input,
+.dark.dc-token-input {
+  --color: var(--dc-white);
+  --background: var(--dc-neutral-800);
+  --border-color: var(--dc-neutral-600);
+  --border-color-error: var(--dc-red-400);
+  --token-color: var(--dc-white);
+  --token-background: var(--dc-neutral-600);
+  --token-background-hover: rgb(var(--dc-neutral-50-rgb) / 15%);
+
+  color-scheme: dark;
+}

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

@@ -0,0 +1,24 @@
+import { type ComponentProps, type CSSProperties } from 'react';
+type HTMLInputProps = ComponentProps<'input'>;
+export type TokenInputSize = 'sm' | 'md' | 'lg';
+export type TokenInputChangeHandler = (tokens: string[]) => void;
+export type TokenInputGetRemoveButtonAriaLabel = (token: string) => string;
+export type TokenInputProps = {
+    id?: string;
+    style?: CSSProperties;
+    className?: string;
+    size?: TokenInputSize;
+    ariaLabel?: string;
+    placeholder?: string;
+    defaultValue?: string;
+    inputMode?: HTMLInputProps['inputMode'];
+    autoComplete?: HTMLInputProps['autoComplete'];
+    invalid?: boolean;
+    disabled?: boolean;
+    allowDuplicateTokens?: boolean;
+    tokens: string[];
+    onChange: TokenInputChangeHandler;
+    getRemoveButtonAriaLabel?: TokenInputGetRemoveButtonAriaLabel;
+};
+export declare function TokenInput({ id: defaultInputId, style, className, size, ariaLabel, placeholder, defaultValue, inputMode, autoComplete, invalid, disabled, allowDuplicateTokens, tokens, onChange, getRemoveButtonAriaLabel, }: TokenInputProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, } from 'react';
+import { classNames } from '../../lib/react-helpers.js';
+export function TokenInput({ id: defaultInputId, style, className, size, ariaLabel, placeholder, defaultValue, inputMode, autoComplete = 'off', invalid, disabled, allowDuplicateTokens, tokens, onChange, getRemoveButtonAriaLabel, }) {
+    const id = useId();
+    const inputId = defaultInputId || `${id}token-input`;
+    const focus = () => {
+        const input = document.getElementById(inputId);
+        if (input instanceof HTMLInputElement) {
+            input.focus();
+        }
+    };
+    const removeToken = (index) => {
+        if (!disabled && index >= 0 && index < tokens.length) {
+            const newTokens = [...tokens];
+            newTokens.splice(index, 1);
+            onChange(newTokens);
+            focus();
+        }
+    };
+    const handleKeyDown = (event) => {
+        const input = event.currentTarget;
+        if (event.key === 'Enter') {
+            if (input.value) {
+                if (allowDuplicateTokens || !tokens.includes(input.value)) {
+                    onChange([...tokens, input.value]);
+                }
+                input.value = '';
+            }
+        }
+        if (event.key === 'Backspace') {
+            if (!input.value) {
+                onChange(tokens.slice(0, -1));
+            }
+        }
+    };
+    return (_jsxs("label", { style: style, className: classNames(className, {
+            'dc-token-input': true,
+            [`dc-token-input_size_${size}`]: size,
+        }), htmlFor: inputId, "data-invalid": invalid, "data-disabled": disabled, children: [tokens.map((token, index) => (_jsx(Token, { value: token, disabled: disabled, onRemove: () => removeToken(index), getRemoveButtonAriaLabel: getRemoveButtonAriaLabel }, token))), _jsx("input", { "aria-label": ariaLabel, placeholder: placeholder, id: inputId, defaultValue: defaultValue, inputMode: inputMode, autoComplete: autoComplete, disabled: disabled, onKeyDown: handleKeyDown })] }));
+}
+function Token({ value, disabled, onRemove, getRemoveButtonAriaLabel, }) {
+    const handleButtonClick = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onRemove();
+    };
+    let buttonAriaLabel;
+    if (typeof getRemoveButtonAriaLabel === 'function') {
+        buttonAriaLabel = getRemoveButtonAriaLabel(value);
+    }
+    return (_jsxs("div", { className: "dc-token-input__token", children: [_jsx("span", { children: value }), _jsx("button", { "aria-label": buttonAriaLabel, type: "button", disabled: disabled, onClick: handleButtonClick, children: _jsx(XMarkIcon, { width: "1em", height: "1em" }) })] }));
+}
+function XMarkIcon(props) {
+    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 24, height: 24, stroke: "currentColor", strokeWidth: 2, fill: "none", ...props, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18 18 6M6 6l12 12" }) }));
+}
+//# sourceMappingURL=token-input.js.map

package/dist/components/token-input/token-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"token-input.js","sourceRoot":"","sources":["../../../src/components/token-input/token-input.tsx"],"names":[],"mappings":"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"}

package/package.json

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