@knime/kds-components 0.31.3 → 1.0.0

package/dist/src/patterns/ResponsiveButtonGroup/types.d.ts

@@ -1,16 +1,101 @@
-import { KdsButtonProps } from '../../buttons';
+import { KdsIconName } from '../../accessories/Icon/types';
+import { KdsButtonProps, KdsLinkButtonProps, KdsMenuButtonProps, KdsProgressButtonProps, KdsSplitButtonProps, KdsToggleButtonProps } from '../../buttons';
+import { KdsProgressButtonState } from '../../buttons/KdsProgressButton/types';
 import { kdsResponsiveButtonGroupAlignment } from './enums';
 export type KdsResponsiveButtonGroupAlignment = (typeof kdsResponsiveButtonGroupAlignment)[keyof typeof kdsResponsiveButtonGroupAlignment];
-type MakeRequired<T, K extends keyof T> = T & Required<Pick<T, K>>;
-export type KdsResponsiveButtonGroupButton = Pick<MakeRequired<KdsButtonProps, "label">, "variant" | "label" | "disabled" | "leadingIcon" | "destructive" | "title"> & {
-    /** will be emitted when the button is clicked in the `buttonClick` event */
-    id: string;
+type ButtonPropMap = {
+    KdsButton: KdsButtonProps;
+    KdsLinkButton: KdsLinkButtonProps;
+    KdsSplitButton: KdsSplitButtonProps;
+    KdsMenuButton: KdsMenuButtonProps;
+    KdsProgressButton: KdsProgressButtonProps & {
+        state?: KdsProgressButtonState;
+    };
+    KdsToggleButton: KdsToggleButtonProps & {
+        modelValue?: boolean;
+    };
 };
+type EntryType = keyof ButtonPropMap;
+type EntryMeta<T extends EntryType> = Omit<Extract<ButtonPropMap[T], {
+    label: string;
+}>, "size">;
+/**
+ * Splits a meta with an optional `leadingIcon` into two mutually exclusive
+ * branches:
+ *
+ * - icon-capable: `meta.leadingIcon` is required; `canBeIconOnly` defaults
+ *   to true and may be set to false to opt out of icon-only collapse.
+ * - icon-incapable: `meta.leadingIcon` must be absent; `canBeIconOnly` must
+ *   not be true (there is no icon to collapse to).
+ */
+type WithIconCollapse<TMeta> = {
+    /**
+     * If true (default), the entry drops its label and renders icon-only
+     * once the row needs to shrink. Only valid when `meta.leadingIcon` is
+     * set. The label is promoted to `title` (unless `meta.title` is set)
+     * and `ariaLabel`.
+     * @default true
+     */
+    canBeIconOnly?: boolean;
+    meta: Omit<TMeta, "leadingIcon"> & {
+        leadingIcon: KdsIconName;
+    };
+} | {
+    canBeIconOnly?: false;
+    meta: Omit<TMeta, "leadingIcon"> & {
+        leadingIcon?: never;
+    };
+};
+type EntryHandler<E> = (entry: E, event: MouseEvent | KeyboardEvent) => void;
+type ToggleEntryHandler<E> = (entry: E, nextValue: boolean) => void;
+/**
+ * One responsive-button-group entry. Discriminates on `type`; the meta and
+ * handler shape are derived from there.
+ *
+ * `KdsProgressButton` always has a required `leadingIcon` (the underlying
+ * button forces it), so it skips `WithIconCollapse` — `canBeIconOnly`
+ * remains unconstrained.
+ *
+ * `KdsLinkButton` and `KdsMenuButton` have no entry-level handler: link
+ * activation is native, menu activation lives on `meta.items`.
+ *
+ * `KdsToggleButton`'s handler receives the next boolean value instead of a
+ * DOM event — the underlying button is fully controlled, so the consumer
+ * must update `meta.modelValue` from this callback for the toggle state to
+ * actually change.
+ */
+type Entry<T extends EntryType> = {
+    /** Stable identifier; used as the Vue v-for key and surfaced to consumers. */
+    id: string;
+    type: T;
+    /**
+     * If true (default), the entry is allowed to move into the overflow menu
+     * when the row runs out of space. Pinned (`false`) entries always render
+     * in the visible row.
+     * @default true
+     */
+    canMoveToMenu?: boolean;
+} & (T extends "KdsProgressButton" ? {
+    /**
+     * If true (default), the entry drops its label and renders icon-only
+     * once the row needs to shrink.
+     * @default true
+     */
+    canBeIconOnly?: boolean;
+    meta: EntryMeta<T>;
+} : WithIconCollapse<EntryMeta<T>>) & (T extends "KdsLinkButton" | "KdsMenuButton" ? {
+    handler?: never;
+} : T extends "KdsToggleButton" ? {
+    handler: ToggleEntryHandler<Entry<T>>;
+} : {
+    handler: EntryHandler<Entry<T>>;
+});
+export type KdsResponsiveButtonGroupButton = Entry<"KdsButton"> | Entry<"KdsLinkButton"> | Entry<"KdsSplitButton"> | Entry<"KdsMenuButton"> | Entry<"KdsProgressButton"> | Entry<"KdsToggleButton">;
 export type KdsResponsiveButtonGroupProps = {
     /**
-     * Array of button objects, each requires `id` and `label`.
-     *
-     * Optional: `variant` (defaults to `outlined`), `disabled`, `leadingIcon`, `destructive`, `title`.
+     * Array of button entries. Each entry declares the button `type` and a
+     * `meta` object carrying that type's props, plus optional flags controlling
+     * how the entry participates in responsive collapse.
      */
     buttons: KdsResponsiveButtonGroupButton[];
     /**

package/dist/src/patterns/ResponsiveButtonGroup/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/patterns/ResponsiveButtonGroup/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AAEpD,OAAO,EAAE,iCAAiC,EAAE,MAAM,SAAS,CAAC;AAE5D,MAAM,MAAM,iCAAiC,GAC3C,CAAC,OAAO,iCAAiC,CAAC,CAAC,MAAM,OAAO,iCAAiC,CAAC,CAAC;AAE7F,KAAK,YAAY,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,IAAI,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;AAEnE,MAAM,MAAM,8BAA8B,GAAG,IAAI,CAC/C,YAAY,CAAC,cAAc,EAAE,OAAO,CAAC,EACrC,SAAS,GAAG,OAAO,GAAG,UAAU,GAAG,aAAa,GAAG,aAAa,GAAG,OAAO,CAC3E,GAAG;IACF,4EAA4E;IAC5E,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC;AAEF,MAAM,MAAM,6BAA6B,GAAG;IAC1C;;;;OAIG;IACH,OAAO,EAAE,8BAA8B,EAAE,CAAC;IAE1C;;;OAGG;IACH,SAAS,CAAC,EAAE,iCAAiC,CAAC;CAC/C,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/patterns/ResponsiveButtonGroup/types.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/kds-components",
-  "version": "0.31.3",
+  "version": "1.0.0",
   "description": "Package containing basic Vue components of the KNIME Design System",
   "repository": {
     "type": "git",
@@ -40,7 +40,7 @@
     "motion": "^12.39.0",
     "pretty-bytes": "^7.1.0",
     "temporal-polyfill": "^0.3.2",
-    "@knime/kds-styles": "^0.31.3"
+    "@knime/kds-styles": "^1.0.0"
   },
   "devDependencies": {
     "@storybook/vue3-vite": "^10.4.3",