@kenlo/kdls-design-system 2.12.2 → 2.17.0

package/dist/components/BottomSheet/BottomSheet.d.ts

@@ -36,8 +36,10 @@ export interface BottomSheetProps {
     options?: BottomSheetOption[];
     /** Selects multiple options at once — renders a checkbox per row. `value`/`onChange` become string[], and changes are only committed when the Apply button (footer) is pressed */
     multiple?: boolean;
-    /** Shows a pinned "Selecionar todos" checkbox above the list. Requires multiple */
+    /** Shows a "Selecionar todos" action — a pinned checkbox row above the list by default, or a footer link with selectAllPlacement="footer". Requires multiple */
     showSelectAll?: boolean;
+    /** Where the "Selecionar todos" action sits: 'header' = checkbox row above the list | 'footer' = link in the automatic footer, opposite Aplicar. Requires showSelectAll; falls back to 'header' when a custom footer is passed */
+    selectAllPlacement?: 'header' | 'footer';
     /** Selected value(s), controlled. Single select: string | null. Multiple: string[] */
     value?: string | string[] | null;
     /** Initial value(s) in uncontrolled mode — same shape as value; ignored when value is passed */

package/dist/components/Checkbox/Checkbox.d.ts

@@ -29,6 +29,10 @@ export interface CheckboxProps {
     name?: string;
     /** Marks the field as required — asterisk on the label and aria-required on the box */
     required?: boolean;
+    /** Accessible name when there is no visible label (e.g. a row-selection box) — replaces the label as the name screen readers announce */
+    'aria-label'?: string;
+    /** Id of the visible element that names the checkbox (e.g. the row's title) */
+    'aria-labelledby'?: string;
     /** Additional CSS classes */
     className?: string;
 }

package/dist/components/DatePicker/DatePicker.d.ts

@@ -37,6 +37,8 @@ interface DatePickerBase {
     includeTimes?: Date[];
     /** Month/year shown initially when there's no selected value */
     defaultViewDate?: Date;
+    /** Overrides the calendar's z-index, which otherwise follows where it opens: the page, or above an open Drawer, Modal or BottomSheet */
+    zIndex?: number;
     /** Disables all interaction */
     disabled?: boolean;
     /** Shows a spinner on the trigger and blocks interaction — use while data is loading */

package/dist/components/Floating/Floating.d.ts

@@ -2,6 +2,8 @@ import React from 'react';
 import './Floating.css';
 export type FloatingPlacement = 'top' | 'topLeft' | 'topRight' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'left' | 'leftTop' | 'leftBottom';
 export type FloatingTriggerMode = 'click' | 'hover' | 'focus' | 'contextMenu';
+/** True inside an open Drawer, Modal or BottomSheet — set by them around their content */
+export declare const OverlayContext: React.Context<boolean>;
 export interface FloatingProps {
     children: React.ReactNode;
     content: React.ReactNode | ((activePlacement: FloatingPlacement) => React.ReactNode);
@@ -15,7 +17,10 @@ export interface FloatingProps {
     defaultOpen?: boolean;
     destroyOnClose?: boolean;
     getPopupContainer?: () => HTMLElement;
+    /** Wins over every automatic layer */
     zIndex?: number;
+    /** Layer at page level — inside a Drawer, Modal or BottomSheet the panel goes above it instead */
+    baseZIndex?: number;
     matchTriggerWidth?: boolean;
     className?: string;
     openClassName?: string;

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

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

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

@@ -34,6 +34,10 @@ interface SelectBase {
     searchable?: boolean;
     /** Search field placeholder */
     searchPlaceholder?: string;
+    /** Text shown in the trigger when every option is selected, instead of "first option +N" — requires multiple */
+    allSelectedLabel?: string;
+    /** Where the "Selecionar todos" action sits: 'header' = checkbox row above the list | 'footer' = link in the footer, opposite Aplicar. Requires showSelectAll */
+    selectAllPlacement?: 'header' | 'footer';
     /** When false, disables the frontend filter — dev controls the options via onSearch + options */
     filterOption?: boolean;
     /** Callback fired on every change in the search field */
@@ -42,7 +46,7 @@ interface SelectBase {
     loading?: boolean;
     /** Callback fired when scrolling the list — use for infinite scroll */
     onMenuScroll?: (e: React.UIEvent<HTMLUListElement>) => void;
-    /** Shows a "Select all" checkbox as the list's first row — requires multiple */
+    /** Shows a "Selecionar todos" action — a checkbox row above the list by default, or a footer link with selectAllPlacement="footer". Requires multiple */
     showSelectAll?: boolean;
     /** Shows a spinner on the trigger and blocks interaction — use while the initial options are loading from the API */
     isLoading?: boolean;

package/dist/components/Toggle/Toggle.d.ts

@@ -12,6 +12,8 @@ export interface ToggleItem {
     iconRight?: IconElement;
     /** Disables only this item */
     disabled?: boolean;
+    /** Accessible name of this item — required in practice when it shows only an icon, which otherwise has no name */
+    'aria-label'?: string;
 }
 export interface ToggleProps {
     /** List of options — minimum 2 items */
@@ -26,6 +28,10 @@ export interface ToggleProps {
     onChange?: (value: string) => void;
     /** Disables all items */
     disabled?: boolean;
+    /** Accessible name of the group — use when no visible title names the options */
+    'aria-label'?: string;
+    /** Id of the visible element that names the group — prefer it over aria-label when that title is on screen */
+    'aria-labelledby'?: string;
     /** Additional CSS classes */
     className?: string;
 }

package/dist/components/Tooltip/Tooltip.d.ts

@@ -8,6 +8,8 @@ export interface TooltipProps {
     children?: React.ReactNode;
     /** Tooltip position relative to the trigger. Automatically flips to the opposite side when there's no space in the requested direction. */
     placement?: TooltipPosition;
+    /** Width of the trigger's wrapper, only with `children`: 'hug' = fits the trigger, inline | 'fill' = takes the full width of the parent and stretches the trigger to it — use when the trigger is a full-width row, such as a Card. Has no effect without `children`: the default info icon keeps its own size. */
+    width?: 'hug' | 'fill';
     /** Additional CSS class applied to the trigger's wrapper. */
     className?: string;
 }