@streamscloud/kit 0.16.1 → 0.16.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -2,10 +2,10 @@
2
2
  import { CONTROL_ICON_SIZE, scaleUp } from '../icon';
3
3
  import { Input } from '../input';
4
4
  import IconSearch from '@fluentui/svg-icons/icons/search_20_regular.svg?raw';
5
- const { value, collapsedIconColor, collapsedIconSize, placeholder = '', size = 'sm', debounce = 0, shortcut = false, clearOnEscape = false, on } = $props();
5
+ const { value, collapsedIconColor, collapsedIconSize, placeholder = '', size = 'sm', debounce = 0, collapsible = true, shortcut = false, clearOnEscape = false, on } = $props();
6
6
  let inputRef = $state.raw(undefined);
7
7
  let focused = $state(false);
8
- const expanded = $derived(focused || !!value);
8
+ const expanded = $derived(!collapsible || focused || !!value);
9
9
  const collapsedSize = $derived(collapsedIconSize ?? scaleUp(CONTROL_ICON_SIZE[size]));
10
10
  const onInput = (v) => {
11
11
  on?.input?.(v);
@@ -47,10 +47,11 @@ const handleKeydown = (event) => {
47
47
 
48
48
  <!--
49
49
  @component
50
- A collapsible search input for toolbars. Collapsed to an icon-only square at the chosen field height
51
- when empty + unfocused; expands to the full input width when focused or when a value is present.
52
- Shares Input's size preset so it lines up with other field-shaped controls. Opt into `shortcut`
53
- for a document-wide Cmd/Ctrl+K focus-and-select, and `clearOnEscape` to clear on Escape.
50
+ A search input for toolbars. By default collapses to an icon-only square at the chosen field height
51
+ when empty + unfocused, and expands to the full input width when focused or when a value is present;
52
+ set `collapsible={false}` to keep it always expanded. Shares Input's size preset so it lines up with
53
+ other field-shaped controls. Opt into `shortcut` for a document-wide Cmd/Ctrl+K focus-and-select,
54
+ and `clearOnEscape` to clear on Escape.
54
55
 
55
56
  ### CSS Custom Properties
56
57
  | Property | Description | Default |
@@ -7,6 +7,8 @@ type Props = {
7
7
  placeholder?: string;
8
8
  /** Size preset (shared with Input / DatePicker / Select). @default 'sm' */
9
9
  size?: 'sm' | 'md' | 'lg';
10
+ /** Collapse to an icon-only square when empty + unfocused. Set false to keep the input always expanded. @default true */
11
+ collapsible?: boolean;
10
12
  /** Debounce delay in ms @default 0 */
11
13
  debounce?: number;
12
14
  /** Bind Cmd/Ctrl+K document-wide to focus the input and select its text. Enable on a single instance per view. @default false */
@@ -18,10 +20,11 @@ type Props = {
18
20
  };
19
21
  };
20
22
  /**
21
- * A collapsible search input for toolbars. Collapsed to an icon-only square at the chosen field height
22
- * when empty + unfocused; expands to the full input width when focused or when a value is present.
23
- * Shares Input's size preset so it lines up with other field-shaped controls. Opt into `shortcut`
24
- * for a document-wide Cmd/Ctrl+K focus-and-select, and `clearOnEscape` to clear on Escape.
23
+ * A search input for toolbars. By default collapses to an icon-only square at the chosen field height
24
+ * when empty + unfocused, and expands to the full input width when focused or when a value is present;
25
+ * set `collapsible={false}` to keep it always expanded. Shares Input's size preset so it lines up with
26
+ * other field-shaped controls. Opt into `shortcut` for a document-wide Cmd/Ctrl+K focus-and-select,
27
+ * and `clearOnEscape` to clear on Escape.
25
28
  *
26
29
  * ### CSS Custom Properties
27
30
  * | Property | Description | Default |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@streamscloud/kit",
3
- "version": "0.16.1",
3
+ "version": "0.16.2",
4
4
  "author": "StreamsCloud",
5
5
  "repository": {
6
6
  "type": "git",