@apliteni/apliteni-ui 0.66.0 → 0.68.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.66.0",
+  "version": "0.68.0",
   "workspaces": [
     "react"
   ],

package/react/dist/index.d.ts

@@ -483,8 +483,8 @@ declare function Segmented({ options, value, onChange, label, appearance, disabl
 
 type Filter = {
     id: string;
-    label: string;
-    value: string;
+    label: string; /** empty or absent while nothing is chosen; the chip then shows `label` */
+    value?: string;
     items: DropdownEntry[];
     disabled?: boolean;
     open?: boolean;

package/react/dist/index.js

@@ -1938,6 +1938,7 @@ function Segmented({ options, value, onChange, label, appearance = "pill", disab
 
 // src/FilterBar.tsx
 import { useRef as useRef11, useState as useState7 } from "react";
+import { filterChipText, filterChipName, filterChipUnset } from "@apliteni/apliteni-ui";
 import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 function FilterBar({ filters, label = "Filters", clearLabel = "Clear all filters", disabled = false, busy = false, onRemove, onClear, onChange }) {
   const bar = useRef11(null);
@@ -1983,11 +1984,10 @@ function FilterBar({ filters, label = "Filters", clearLabel = "Clear all filters
               /* @__PURE__ */ jsx23(
                 Dropdown,
                 {
-                  label: filter.label,
-                  value: filter.value,
                   items: filter.items,
                   variant: "select",
-                  ariaLabel: `${filter.label}: ${filter.value}`,
+                  ariaLabel: filterChipName(filter),
+                  triggerContent: /* @__PURE__ */ jsx23("span", { className: filterChipUnset(filter) ? "ui-dropdown__value is-placeholder" : "ui-dropdown__value", children: filterChipText(filter) }),
                   open: !blocked && !filter.disabled && (opened[filter.id] && opened[filter.id].against === filter.open ? opened[filter.id].open : !!filter.open),
                   onOpenChange: (open) => setOpened((previous) => ({ ...previous, [filter.id]: { open, against: filter.open } })),
                   onSelect: (value) => {

package/src/components/filter-bar.js

@@ -1,12 +1,17 @@
 import { button, esc } from './index.js';
 import { dropdown, wireDropdown } from './dropdown.js';
+import { filterChipText, filterChipName, filterChipUnset } from '../logic/filter-bar.js';
 
 export function filterBar({ filters = [], label = 'Filters', clearLabel = 'Clear all filters', disabled = false, busy = false } = {}) {
   return `<fieldset class="ui-filter-bar" data-filter-bar${disabled || busy ? ' disabled' : ''}${busy ? ' aria-busy="true"' : ''}>`
     + `<legend class="ui-filter-bar__legend">${esc(label)}</legend>`
     + filters.map(filter => `<fieldset class="ui-filter-bar__chip" data-filter-id="${esc(filter.id)}"${filter.disabled ? ' disabled' : ''}>`
       + `<legend class="ui-filter-bar__legend">${esc(filter.label)}</legend>`
-      + dropdown({ label: filter.label, value: filter.value, items: filter.items || [], variant: 'select', ariaLabel: `${filter.label}: ${filter.value}`, open: !!filter.open && !disabled && !busy && !filter.disabled })
+      + dropdown({ items: filter.items || [], variant: 'select',
+        // The chip prints one line; the field's name reaches a reader through the
+        // trigger's name and the chip's own legend. why: docs/specification.md#dense-financial-tables
+        triggerContent: `<span class="${filterChipUnset(filter) ? 'ui-dropdown__value is-placeholder' : 'ui-dropdown__value'}">${esc(filterChipText(filter))}</span>`,
+        ariaLabel: filterChipName(filter), open: !!filter.open && !disabled && !busy && !filter.disabled })
       + `<button type="button" class="ui-filter-bar__remove" data-filter-remove aria-label="${esc(`Remove ${filter.label} filter`)}">×</button></fieldset>`).join('')
     + `<span data-filter-clear>${button({ label: clearLabel, size: 'sm', variant: 'ghost', disabled: !filters.length })}</span></fieldset>`;
 }
@@ -46,7 +51,18 @@ export function initFilterBar(host, options = {}) {
       if (item.getAttribute('aria-disabled') !== 'true') {
         const id = chip?.dataset.filterId, value = item.dataset.value;
         // Dropdown completes its own close/focus before the consumer replaces the markup.
-        queueMicrotask(() => emit('ui-filter-change', { id, value }));
+        queueMicrotask(() => {
+          // Dropdown writes the picked row's label into the trigger; the name it is
+          // read by follows it, so the two cannot disagree while the consumer answers.
+          const filter = (current.filters || []).find(f => f.id === id);
+          const trigger = chip?.querySelector('[data-dropdown-trigger]');
+          const span = trigger?.querySelector('.ui-dropdown__value');
+          const shown = span?.textContent;
+          if (filter && trigger) trigger.setAttribute('aria-label', filterChipName({ ...filter, value: shown }));
+          // A chip that was empty stops being a placeholder the moment it shows a pick.
+          if (span) span.classList.toggle('is-placeholder', filterChipUnset({ value: shown }));
+          emit('ui-filter-change', { id, value });
+        });
       }
     }
   };

package/src/index.d.ts

@@ -7,6 +7,9 @@ export declare function numericValue(opts?: Record<string, unknown>): string;
 export declare function deltaValue(opts?: Record<string, unknown>): string;
 export declare function filterBar(opts?: Record<string, unknown>): string;
 export declare function initFilterBar(host: Element, opts?: Record<string, unknown>): { update: (opts: Record<string, unknown>) => void; destroy: () => void };
+export declare function filterChipText(filter?: { label?: string; value?: string }): string;
+export declare function filterChipName(filter?: { label?: string; value?: string }): string;
+export declare function filterChipUnset(filter?: { value?: string }): boolean;
 export declare function segmentedNextIndex(key: string, index: number, length: number): number | null;
 export declare function icon(name: string, className?: string): string;
 export declare function snippet(opts?: Record<string, unknown>): string;

package/src/index.js

@@ -30,6 +30,7 @@ export * from './components/filter-bar.js';
 export { dropdownMatch, dropdownFiltering } from './logic/dropdown.js';
 export { SCORE, rankGroups, rankCommands, scoreCommand, paletteHotkey } from './logic/command-palette.js';
 export { segmentedNextIndex } from './logic/segmented.js';
+export { filterChipText, filterChipName, filterChipUnset } from './logic/filter-bar.js';
 export { PAGE_SIZES, DEFAULT_PAGE_SIZE } from './logic/pagination.js';
 export { calloutIcons } from './logic/callout.js';
 export { formatNumericValue, formatDeltaValue } from './logic/table-values.js';

package/src/logic/filter-bar.js

@@ -0,0 +1,29 @@
+/* What a filter chip shows, what it is called, and when it counts as unset.
+ * The chip prints the chosen value by itself — never the field's name beside it
+ * — and the field's name stands in while nothing is chosen. Both faces ask
+ * these, so a chip reads the same in vanilla and in React.
+ *
+ * `value` is display text: it is the chip's only visible line, so a consumer
+ * answers a change with text a reader can read, not a raw code.
+ * why: docs/specification.md#dense-financial-tables
+ */
+
+const text = (v) => (v == null ? '' : String(v));
+
+/** No value chosen: absent, null or the empty string. */
+export function filterChipUnset({ value } = {}) {
+  return text(value) === '';
+}
+
+/** The one line the chip prints: the value, or the field's name while unset. */
+export function filterChipText(filter = {}) {
+  return filterChipUnset(filter) ? text(filter.label) : text(filter.value);
+}
+
+/** What a reader hears: the field, and its value or the empty state. A filter
+ *  with no label is named by its value alone — "undefined" is not a name. */
+export function filterChipName(filter = {}) {
+  const field = text(filter.label);
+  if (!field) return text(filter.value);
+  return filterChipUnset(filter) ? `${field}: any` : `${field}: ${text(filter.value)}`;
+}

package/src/styles/filter-bar.css

@@ -7,4 +7,19 @@
 .ui-filter-bar:focus-visible { outline: 2px solid transparent; box-shadow: var(--ring); }
 .ui-filter-bar button:disabled { /* muted-ink: state — disabled filters */ color: var(--disabled-ink); cursor: not-allowed; }
 
-.ui-filter-bar .ui-dropdown__pre, .ui-filter-bar .ui-dropdown__value { color: inherit; }
+.ui-filter-bar .ui-dropdown__value { color: inherit; }
+/* A chip with nothing chosen prints the field's name in the slot the value will
+   take. `:enabled` leaves a disabled chip its own ink. why: guidelines/labels-and-titles.md */
+.ui-filter-bar button:enabled .ui-dropdown__value.is-placeholder { /* muted-ink: placeholder — a filter chip with nothing chosen */ color: var(--muted); }
+
+/* A chip's panel is as wide as the chip's trigger, never the 240px floor
+   .ui-dropdown__panel gives a standalone dropdown. A panel is positioned at its
+   trigger's inline start, so on a narrow row a later chip put its panel past the
+   screen — shut as well as open, a `visibility: hidden` box still being laid out.
+   The percentage resolves against .ui-dropdown, the panel's containing block,
+   which is the trigger's width because the trigger is its one in-flow child.
+   `overflow-wrap` keeps that a bound rather than a clip: a panel is
+   `overflow: visible`, so a value with no break opportunity would run out of it
+   and off the page. It inherits, reaching an option's label and description.
+   why: docs/specification.md#a-filter-row-holds-its-panels */
+.ui-filter-bar .ui-dropdown__panel { min-width: 100%; max-width: 100%; overflow-wrap: anywhere; }