@kenlo/kdls-design-system 2.7.0 → 2.9.1

package/dist/components/ColorScheme/ColorScheme.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Header/Header.d.ts

@@ -12,6 +12,11 @@ export interface HeaderNavItem {
         href?: string;
         onClick?: () => void;
     }[];
+    /** Adds a search field to this item's dropdown and filters its children by it.
+     *  Use when the list is long enough that scanning it beats reading it. */
+    searchable?: boolean;
+    /** Floating label of that search field. Default: 'Buscar' */
+    searchLabel?: string;
     onClick?: () => void;
 }
 export interface HeaderNotification {
@@ -36,6 +41,16 @@ export interface HeaderProfileMenuItem {
 export interface HeaderProps {
     /** Kenlo product that determines the logo */
     product?: KenloLogoProduct;
+    /** Where the logo links to — normally the product's home. Always the consumer's to
+     *  set: the DS is used by Kenlo products, by the CMS and by products carrying their
+     *  own brand (Vira), and each one's home is somewhere else. */
+    logoHref?: string;
+    /** Called when the logo is clicked — use instead of logoHref with a client-side
+     *  router, or alongside it to intercept the navigation. */
+    onLogoClick?: () => void;
+    /** Accessible name of the logo link, read out in place of the image. Default:
+     *  'Página inicial' */
+    logoLabel?: string;
     /** Main navigation items */
     navItems?: HeaderNavItem[];
     /** Active items (by label) */

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

@@ -62,7 +62,9 @@ interface SelectBase {
     menuClassName?: string;
     /** Additional CSS classes applied to the wrapper */
     className?: string;
-    /** Maximum menu height in pixels (plain number, no unit) — default 360 */
+    /** Overrides the menu's max height in pixels (plain number, no unit). Omit to use
+     *  the design system's own cap of 7.5 option rows, which is what every menu, select
+     *  and dropdown uses — see tokens-reference.md § Menu sizing. */
     menuMaxHeight?: number;
 }
 /**

package/dist/components/Table/Table.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import './Table.css';
 import '../../foundations/Scrollbar/Scrollbar.css';
 import { type PaginationProps } from '../Pagination';
+import { TableColumnPicker } from './TableColumnPicker';
 export interface TableColumn<T = Record<string, unknown>> {
     /** Unique key — matches the row object's property and identifies the column */
     key: string;
@@ -61,6 +62,13 @@ export interface TableProps<T extends Record<string, unknown> = Record<string, u
     selectedIds?: string[];
     /** Fired when checking or unchecking rows */
     onSelectionChange?: (ids: string[]) => void;
+    /**
+     * How sortable headers show the sort mark. `'always'` draws the up/down pair on every
+     * sortable header, the active direction in primary. `'hover'` keeps unsorted headers clean —
+     * their pair shows only on hover and focus, in the same space — and gives the sorted header a
+     * single filled chevron in primary. No effect in the mobile layout, where sorting is a picker.
+     */
+    sortIndicator?: 'always' | 'hover';
     /** Controlled sorting — { key, direction } or null (no sorting) */
     sort?: TableSort | null;
     /** Initial sorting — uncontrolled mode */
@@ -73,6 +81,8 @@ export interface TableProps<T extends Record<string, unknown> = Record<string, u
     onRowClick?: (row: T) => void;
     /** Pagination config — passed straight through to the Pagination component, rendered below the list */
     pagination?: Omit<PaginationProps, 'className'>;
+    /** Keeps the current rows on screen, dimmed, while new ones load (e.g. a new sort order from the backend) — marks the table aria-busy */
+    loading?: boolean;
     className?: string;
 }
 export interface TableHeaderProps {
@@ -98,5 +108,6 @@ export declare const TableCell: React.FC<TableCellProps>;
 export interface TableComponent {
     <T extends Record<string, unknown>>(props: TableProps<T>): React.ReactElement;
     Header: typeof TableHeader;
+    ColumnPicker: typeof TableColumnPicker;
 }
 export declare const Table: TableComponent;

package/dist/components/Table/TableColumnPicker.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import './Table.css';
+import '../../foundations/Scrollbar/Scrollbar.css';
+export interface TableColumnPickerOption {
+    /** Column key — the same `key` the column has in the Table's `columns` */
+    key: string;
+    /** Text next to the checkbox */
+    label: string;
+    /** Helper text under the label — e.g. why the column can't be chosen */
+    hint?: string;
+    /** Keeps the column listed but not selectable — say why in `hint` */
+    disabled?: boolean;
+}
+export interface TableColumnPickerGroup {
+    /** Group heading — omit it for a plain list */
+    title?: string;
+    /** The group's columns, in display order */
+    columns: TableColumnPickerOption[];
+}
+export interface TableColumnPickerProps {
+    /** Trigger text and panel title */
+    label?: string;
+    /** Choosable columns, in groups */
+    groups: TableColumnPickerGroup[];
+    /** Keys of the visible columns — controlled */
+    value: string[];
+    /** Fired on every check and uncheck with the new keys, in the groups' order — keys that no group lists stay at the end */
+    onChange: (value: string[]) => void;
+    /** Shows a "Restaurar padrão" link at the bottom and fires when it's clicked */
+    onReset?: () => void;
+    /** Additional CSS classes applied to the trigger */
+    className?: string;
+}
+export declare const TableColumnPicker: React.FC<TableColumnPickerProps>;

package/dist/components/Table/TableColumnPicker.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Table/index.d.ts

@@ -1 +1,2 @@
 export * from './Table';
+export * from './TableColumnPicker';