@koslibs/components 1.11.1 → 1.12.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @koslibs/components
 
+## 1.12.0
+
+### Minor Changes
+
+- [#14](https://github.com/koslibs/components/pull/14) [`242a16c`](https://github.com/koslibs/components/commit/242a16ca5c8ba04bdfab319bf75752a9c4b62826) Thanks [@holypower777](https://github.com/holypower777)! - Добавлен проп `hasOutline` для Input, Textarea, Select и Collapse. Outline при фокусе и раскрытии Select теперь включается явно через `hasOutline={true}`; по умолчанию он выключен. Для отключения используется `hasOutline={false}`. Select передаёт настройку поисковому Input. В Storybook добавлены переключатели и примеры.
+
 ## 1.11.1
 
 ### Patch Changes

package/dist/components/Collapse/collapse.d.ts

@@ -27,6 +27,11 @@ export type CollapseProps = Omit<HTMLAttributes<HTMLDivElement>, 'onTransitionEn
      * @default false
      */
     showLeftChevron?: boolean;
+    /**
+     * Показывает outline кнопки при клавиатурном фокусе.
+     * @default false
+     */
+    hasOutline?: boolean;
     /**
      * Запрос изменения состояния. В controlled-режиме обновите expanded.
      */
@@ -72,6 +77,11 @@ export declare const Collapse: import("react").ForwardRefExoticComponent<Omit<HT
      * @default false
      */
     showLeftChevron?: boolean;
+    /**
+     * Показывает outline кнопки при клавиатурном фокусе.
+     * @default false
+     */
+    hasOutline?: boolean;
     /**
      * Запрос изменения состояния. В controlled-режиме обновите expanded.
      */

package/dist/components/Collapse/collapse.js

@@ -4,7 +4,7 @@ import classnames from "classnames";
 import { forwardRef, useId, useLayoutEffect, useRef, useState } from "react";
 import { TypographyText } from "../Typography/text.js";
 import index_module from "./index.module.js";
-const Collapse = /*#__PURE__*/ forwardRef(({ expanded, defaultExpanded = false, collapsedLabel, expandedLabel, showRightChevron = true, showLeftChevron = false, onExpandedChange, onTransitionEnd, expandedContentClassName, dataTestId, className, children, ...restProps }, ref)=>{
+const Collapse = /*#__PURE__*/ forwardRef(({ expanded, defaultExpanded = false, collapsedLabel, expandedLabel, showRightChevron = true, showLeftChevron = false, hasOutline = false, onExpandedChange, onTransitionEnd, expandedContentClassName, dataTestId, className, children, ...restProps }, ref)=>{
     const [expandedState, setExpandedState] = useState(defaultExpanded);
     const isExpanded = expanded ?? expandedState;
     const contentId = `collapse-${useId()}`;
@@ -51,6 +51,7 @@ const Collapse = /*#__PURE__*/ forwardRef(({ expanded, defaultExpanded = false,
         ...restProps,
         ref: ref,
         className: classnames(index_module.component, className),
+        "data-has-outline": hasOutline || void 0,
         "data-test-id": dataTestId,
         children: [
             label && /*#__PURE__*/ jsxs("button", {

package/dist/components/Collapse/index_module.css

@@ -37,6 +37,7 @@
   cursor: pointer;
   background: none;
   border: 0;
+  outline: none;
   display: inline-flex;
 
   &:hover {
@@ -47,12 +48,12 @@
     text-underline-offset: 3px;
     text-decoration: underline;
   }
+}
 
-  &:focus-visible {
-    outline: 2px solid var(--collapse-focus-color);
-    outline-offset: 2px;
-    border-radius: var(--border-radius-4, 4px);
-  }
+.component-tPiInR[data-has-outline] .toggle-YA8uJB:focus-visible {
+  outline: 2px solid var(--collapse-focus-color);
+  outline-offset: 2px;
+  border-radius: var(--border-radius-4, 4px);
 }
 
 .icon-wFeaQN {

package/dist/components/Input/index_module.css

@@ -100,13 +100,13 @@
   }
 }
 
-.component-aUdiT5:not([data-disabled]) .field-MFnvYv:focus-within {
+.component-aUdiT5[data-has-outline]:not([data-disabled]) .field-MFnvYv:focus-within {
   box-shadow: none;
   outline: 2px solid var(--input-focus-border-color);
   outline-offset: 0;
 }
 
-.component-aUdiT5[data-error]:not([data-disabled]) .field-MFnvYv:focus-within {
+.component-aUdiT5[data-has-outline][data-error]:not([data-disabled]) .field-MFnvYv:focus-within {
   outline-color: var(--input-error-border-color);
 }
 
@@ -274,11 +274,6 @@
     color: var(--field-icon-color);
   }
 
-  &:focus-visible {
-    outline: 2px solid var(--input-focus-border-color);
-    outline-offset: 2px;
-  }
-
   & svg {
     width: var(--input-icon-size);
     height: var(--input-icon-size);
@@ -286,6 +281,11 @@
   }
 }
 
+.component-aUdiT5[data-has-outline] .clear-A5Krz8:focus-visible {
+  outline: 2px solid var(--input-focus-border-color);
+  outline-offset: 2px;
+}
+
 .component-aUdiT5 .message-ArUnJU {
   color: var(--input-hint-color);
   overflow-wrap: anywhere;

package/dist/components/Input/input.d.ts

@@ -7,6 +7,7 @@ export declare const Input: import("react").ForwardRefExoticComponent<Omit<impor
     view?: "primary" | "secondary";
     size?: 40 | 48 | 56 | 64 | 72;
     block?: boolean;
+    hasOutline?: boolean;
     label?: import("react").ReactNode;
     labelView?: "outer" | "inner";
     hint?: import("react").ReactNode;

package/dist/components/Input/input.js

@@ -6,7 +6,7 @@ import { useDataTestId } from "../../hooks/use-data-test-id.js";
 import { Button } from "../Button/index.js";
 import { TypographyText } from "../Typography/text.js";
 import index_module from "./index.module.js";
-const Input = /*#__PURE__*/ forwardRef(({ view = 'primary', size = 40, block = false, label, labelView = 'outer', hint, error, leftAddon, rightAddon, clear = false, clearLabel = 'Очистить поле', value, defaultValue, maxLength, showValueLength = false, onChange, onClear, disabled = false, readOnly = false, type = 'text', id, className, style, fieldClassName, inputClassName, labelClassName, messageClassName, dataTestId, ...restProps }, ref)=>{
+const Input = /*#__PURE__*/ forwardRef(({ view = 'primary', size = 40, block = false, hasOutline = false, label, labelView = 'outer', hint, error, leftAddon, rightAddon, clear = false, clearLabel = 'Очистить поле', value, defaultValue, maxLength, showValueLength = false, onChange, onClear, disabled = false, readOnly = false, type = 'text', id, className, style, fieldClassName, inputClassName, labelClassName, messageClassName, dataTestId, ...restProps }, ref)=>{
     const generatedId = useId();
     const inputId = id ?? generatedId;
     const inputRef = useRef(null);
@@ -92,6 +92,7 @@ const Input = /*#__PURE__*/ forwardRef(({ view = 'primary', size = 40, block = f
         style: style,
         "data-view": view,
         "data-block": block || void 0,
+        "data-has-outline": hasOutline || void 0,
         "data-disabled": disabled || void 0,
         "data-read-only": readOnly || void 0,
         "data-error": hasError || void 0,

package/dist/components/Input/types.d.ts

@@ -35,6 +35,11 @@ export type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'v
      * @default false
      */
     block?: boolean;
+    /**
+     * Показывает outline при фокусе.
+     * @default false
+     */
+    hasOutline?: boolean;
     /**
      * Название поля. Связывается с input через htmlFor и id.
      */

package/dist/components/Select/components/select-dropdown.d.ts

@@ -1,7 +1,7 @@
 import type { SelectState } from '../hooks/use-select-state.js';
 import type { SelectProps } from '../types.js';
-type Props = Pick<SelectProps, 'multiple' | 'searchable' | 'searchPlaceholder' | 'noResultsText' | 'dataTestId'> & {
+type Props = Pick<SelectProps, 'multiple' | 'searchable' | 'searchPlaceholder' | 'noResultsText' | 'dataTestId' | 'hasOutline'> & {
     state: SelectState;
 };
-export declare function SelectDropdown({ state, multiple, searchable, searchPlaceholder, noResultsText, dataTestId, }: Props): import("react").JSX.Element;
+export declare function SelectDropdown({ state, multiple, searchable, hasOutline, searchPlaceholder, noResultsText, dataTestId, }: Props): import("react").JSX.Element;
 export {};

package/dist/components/Select/components/select-dropdown.js

@@ -7,7 +7,7 @@ import { useDataTestId } from "../../../hooks/use-data-test-id.js";
 import { Input } from "../../Input/index.js";
 import { TypographyText } from "../../Typography/text.js";
 import index_module from "../index.module.js";
-function SelectDropdown({ state, multiple, searchable, searchPlaceholder = 'Поиск по списку', noResultsText = 'Ничего не найдено', dataTestId }) {
+function SelectDropdown({ state, multiple, searchable, hasOutline, searchPlaceholder = 'Поиск по списку', noResultsText = 'Ничего не найдено', dataTestId }) {
     const getDataTestId = useDataTestId(dataTestId);
     const { options, selectedIds, search, activeId, setSearch, handleKeyDown, select } = state;
     const activeOptionRef = useRef(null);
@@ -23,6 +23,7 @@ function SelectDropdown({ state, multiple, searchable, searchPlaceholder = 'По
             searchable && /*#__PURE__*/ jsx(Input, {
                 block: true,
                 autoFocus: true,
+                hasOutline: hasOutline,
                 size: 40,
                 view: "secondary",
                 value: search,

package/dist/components/Select/index_module.css

@@ -89,13 +89,13 @@
   }
 }
 
-.component-cM8DTg:not(.disabled-fZIeN_) .field-jGXYY5:focus-within, .component-cM8DTg.open-CCkiBd .field-jGXYY5 {
+.component-cM8DTg[data-has-outline]:not(.disabled-fZIeN_) .field-jGXYY5:focus-within, .component-cM8DTg[data-has-outline].open-CCkiBd .field-jGXYY5 {
   box-shadow: none;
   outline: 2px solid var(--select-focus-border-color);
   outline-offset: 0;
 }
 
-.component-cM8DTg.error-TrKhzv:not(.disabled-fZIeN_) .field-jGXYY5:focus-within, .component-cM8DTg.error-TrKhzv.open-CCkiBd .field-jGXYY5 {
+.component-cM8DTg[data-has-outline].error-TrKhzv:not(.disabled-fZIeN_) .field-jGXYY5:focus-within, .component-cM8DTg[data-has-outline].error-TrKhzv.open-CCkiBd .field-jGXYY5 {
   outline-color: var(--select-error-border-color);
 }
 

package/dist/components/Select/select.js

@@ -22,7 +22,7 @@ const dropdownOffset = [
     8
 ];
 const Select = /*#__PURE__*/ forwardRef((props, ref)=>{
-    const { view = 'primary', size = 40, label, labelView = 'outer', block = false, placeholder = 'Выберите значение', hint, error, clear = false, disabled = false, readOnly = false, className, style, labelClassName, messageClassName, dropdownClassName, dataTestId, id, name, form, onClear: _onClear, getPortalContainer, options: _options, multiple, value: _value, defaultValue: _defaultValue, onChange: _onChange, searchable, searchPlaceholder, open: _open, defaultOpen: _defaultOpen, onOpenChange: _onOpenChange, noResultsText, ...buttonProps } = props;
+    const { view = 'primary', size = 40, label, labelView = 'outer', block = false, hasOutline = false, placeholder = 'Выберите значение', hint, error, clear = false, disabled = false, readOnly = false, className, style, labelClassName, messageClassName, dropdownClassName, dataTestId, id, name, form, onClear: _onClear, getPortalContainer, options: _options, multiple, value: _value, defaultValue: _defaultValue, onChange: _onChange, searchable, searchPlaceholder, open: _open, defaultOpen: _defaultOpen, onOpenChange: _onOpenChange, noResultsText, ...buttonProps } = props;
     const generatedId = useId();
     const triggerId = id ?? generatedId;
     const getDataTestId = useDataTestId(dataTestId);
@@ -48,6 +48,7 @@ const Select = /*#__PURE__*/ forwardRef((props, ref)=>{
             [index_module.labelRaised]: innerLabel && raisedLabel
         }, className),
         style: style,
+        "data-has-outline": hasOutline || void 0,
         "data-test-id": getDataTestId('form-control'),
         children: [
             hasLabel && 'outer' === labelView && /*#__PURE__*/ jsx("label", {
@@ -149,6 +150,7 @@ const Select = /*#__PURE__*/ forwardRef((props, ref)=>{
                     state: state,
                     multiple: multiple,
                     searchable: searchable,
+                    hasOutline: hasOutline,
                     searchPlaceholder: searchPlaceholder,
                     noResultsText: noResultsText,
                     dataTestId: dataTestId

package/dist/components/Select/types.d.ts

@@ -27,7 +27,7 @@ export type SelectChangePayload<Value = string | null> = {
      */
     selectedOptions: SelectOption[];
 };
-type CommonProps = Pick<InputProps, 'view' | 'size' | 'block' | 'hint' | 'error' | 'clear' | 'className' | 'style' | 'labelClassName' | 'messageClassName'> & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange' | 'children' | 'name' | 'type' | 'className' | 'style'> & {
+type CommonProps = Pick<InputProps, 'view' | 'size' | 'block' | 'hasOutline' | 'hint' | 'error' | 'clear' | 'className' | 'style' | 'labelClassName' | 'messageClassName'> & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange' | 'children' | 'name' | 'type' | 'className' | 'style'> & {
     /**
      * Варианты с уникальными id. Порядок строк сохраняется при выборе.
      */

package/dist/components/Textarea/index_module.css

@@ -64,13 +64,13 @@
   }
 }
 
-.component-K9LhZN:not([data-disabled]) .field-GADSqb:focus-within {
+.component-K9LhZN[data-has-outline]:not([data-disabled]) .field-GADSqb:focus-within {
   box-shadow: none;
   outline: 2px solid var(--input-focus-border-color);
   outline-offset: 0;
 }
 
-.component-K9LhZN[data-error]:not([data-disabled]) .field-GADSqb:focus-within {
+.component-K9LhZN[data-has-outline][data-error]:not([data-disabled]) .field-GADSqb:focus-within {
   outline-color: var(--input-error-border-color);
 }
 

package/dist/components/Textarea/textarea.d.ts

@@ -6,6 +6,7 @@ export declare const Textarea: import("react").ForwardRefExoticComponent<Omit<im
     showValueLength?: boolean;
     view?: "primary" | "secondary";
     block?: boolean;
+    hasOutline?: boolean;
     label?: import("react").ReactNode;
     labelView?: "outer" | "inner";
     hint?: import("react").ReactNode;

package/dist/components/Textarea/textarea.js

@@ -7,7 +7,7 @@ import { Button } from "../Button/index.js";
 import { TypographyText } from "../Typography/text.js";
 import { useAutosize } from "./hooks/use-autosize.js";
 import index_module from "./index.module.js";
-const Textarea = /*#__PURE__*/ forwardRef(({ view = 'primary', block = false, label, labelView = 'outer', hint, error, minRows = 3, maxRows, autosize = false, resize = false, clear = false, value, defaultValue, maxLength, showValueLength = false, onChange, onClear, disabled = false, readOnly = false, id, className, style, fieldClassName, textareaClassName, labelClassName, messageClassName, dataTestId, ...restProps }, ref)=>{
+const Textarea = /*#__PURE__*/ forwardRef(({ view = 'primary', block = false, hasOutline = false, label, labelView = 'outer', hint, error, minRows = 3, maxRows, autosize = false, resize = false, clear = false, value, defaultValue, maxLength, showValueLength = false, onChange, onClear, disabled = false, readOnly = false, id, className, style, fieldClassName, textareaClassName, labelClassName, messageClassName, dataTestId, ...restProps }, ref)=>{
     const generatedId = useId();
     const textareaId = id ?? generatedId;
     const textareaRef = useRef(null);
@@ -96,6 +96,7 @@ const Textarea = /*#__PURE__*/ forwardRef(({ view = 'primary', block = false, la
         },
         "data-view": view,
         "data-block": block || void 0,
+        "data-has-outline": hasOutline || void 0,
         "data-disabled": disabled || void 0,
         "data-read-only": readOnly || void 0,
         "data-error": Boolean(error) || void 0,

package/dist/components/Textarea/types.d.ts

@@ -28,6 +28,11 @@ export type TextareaProps = Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'v
      * @default false
      */
     block?: boolean;
+    /**
+     * Показывает outline поля при фокусе.
+     * @default false
+     */
+    hasOutline?: boolean;
     /**
      * Название поля. Клик переводит фокус в textarea.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koslibs/components",
-    "version": "1.11.1",
+    "version": "1.12.0",
     "description": "Shared React components for koslibs projects",
     "type": "module",
     "main": "./dist/index.js",