@progress/kendo-themes-html 14.4.0-dev.2 → 14.4.0-dev.3

package/src/checkpoint/tests/checkpoint.tsx

@@ -0,0 +1,42 @@
+import { Checkpoint } from "..";
+import { Button } from "../../button";
+import { Chat, ChatMessageGroup, ChatMessage } from "../../chat";
+
+export default () => (
+  <div id="test-area" className="k-d-flex k-flex-col k-gap-6" style={{ maxWidth: "480px" }}>
+    <Checkpoint visible>
+      <Button text="Restore Checkpoint" fillMode="flat" size="xsmall" />
+    </Checkpoint>
+
+    <Checkpoint visible>
+      <span className="k-checkpoint-stamp">Checkpoint Restored</span>
+      <span>·</span>
+      <Button text="Redo" fillMode="flat" size="xsmall" />
+    </Checkpoint>
+
+    <Checkpoint visible>
+      <Button text="Restore Checkpoint" fillMode="flat" size="xsmall" />
+      <span>·</span>
+      <Button icon="arrows-swap" fillMode="flat" size="xsmall" aria-label="Swap direction" />
+    </Checkpoint>
+
+    <section>
+      <Chat>
+        <ChatMessageGroup avatar="" author="" fullWidth>
+          <ChatMessage text="Very long message text that tests message overflowing behavior. Very long message text that tests message overflowing behavior." />
+        </ChatMessageGroup>
+        <Checkpoint visible>
+          <span className="k-checkpoint-stamp">Restore Checkpoint</span>
+          <span>·</span>
+          <Button icon="arrow-rotate-ccw" fillMode="flat" size="xsmall" />
+        </Checkpoint>
+        <ChatMessageGroup avatar="" author="" type="sender">
+          <ChatMessage text="Lets create together" />
+        </ChatMessageGroup>
+        <ChatMessageGroup avatar="" author="" fullWidth>
+          <ChatMessage text="Very long message text that tests message overflowing behavior. Very long message text that tests message overflowing behavior." />
+        </ChatMessageGroup>
+      </Chat>
+    </section>
+  </div>
+);

package/src/citation/citation-popover.spec.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import { classNames } from "../misc";
+import { IconButton } from "../button";
+import { ButtonGroup } from "../button-group";
+import { KendoComponent } from "../_types/component";
+import { CITATION_FOLDER_NAME, CITATION_MODULE_NAME } from "./constants";
+import { Popover } from "../popover";
+
+export const CITATION_POPOVER_CLASSNAME = "k-citation-popover";
+
+const states = [] as const;
+const options = {};
+
+export type KendoCitationPopoverProps = {
+  pageIndex?: number;
+  totalPages?: number;
+  body?: React.JSX.Element;
+  currentView?: number;
+};
+
+const defaultOptions = {
+  currentView: 1,
+  pageIndex: 1,
+  totalPages: 6,
+};
+
+/**
+ * @aria {aria-label} Accessible name applied to the Previous and Next pagination icon buttons.
+ * @ux {Paged navigation} Displays a "current/total" page indicator with Previous/Next buttons to move between citation pages.
+ * @ux {Sliding views} Slides between page views using the --kendo-citation-popover-view-current CSS variable instead of unmounting content.
+ */
+export const CitationPopover: KendoComponent<KendoCitationPopoverProps & React.HTMLAttributes<HTMLDivElement>> = (props: KendoCitationPopoverProps & React.HTMLAttributes<HTMLDivElement>) => {
+  const { body, currentView = defaultOptions.currentView, pageIndex = defaultOptions.pageIndex, totalPages = defaultOptions.totalPages, className, children, ...other } = props;
+  return (
+    <Popover
+      {...other}
+      className={classNames(className, CITATION_POPOVER_CLASSNAME)}
+      style={{ "--kendo-citation-popover-view-current": currentView } as React.CSSProperties}
+      title={
+        <>
+          <span className="k-citation-pages">
+            {pageIndex}/{totalPages}
+          </span>
+          <ButtonGroup fillMode="flat">
+            <IconButton icon="arrow-left" fillMode="flat" size="small" aria-label="Previous" />
+            <IconButton icon="arrow-right" fillMode="flat" size="small" aria-label="Next" />
+          </ButtonGroup>
+        </>
+      }
+      body={body}
+    >
+      {children}
+    </Popover>
+  );
+};
+
+CitationPopover.states = states;
+CitationPopover.options = options;
+CitationPopover.className = CITATION_POPOVER_CLASSNAME;
+CitationPopover.defaultOptions = defaultOptions;
+CitationPopover.moduleName = CITATION_MODULE_NAME;
+CitationPopover.folderName = CITATION_FOLDER_NAME;
+
+/**
+ * @keyboard {Enter or Space} Triggers the focused Previous/Next icon button.
+ * @keyboard {Escape} Dismisses the popover (inherited from Popover).
+ *
+ * @see https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/ WAI-ARIA Authoring Practices: Dialog (Modal) Pattern
+ */
+
+export default CitationPopover;

package/src/citation/citation.spec.tsx

@@ -0,0 +1,45 @@
+import * as React from "react";
+import { classNames } from "../misc";
+import { Chip, KendoChipProps, KendoChipState } from "../chip";
+import { KendoComponent } from "../_types/component";
+import { CITATION_FOLDER_NAME, CITATION_MODULE_NAME } from "./constants";
+
+export const CITATION_CLASSNAME = "k-citation";
+
+const states = [] as const;
+const options = {};
+
+export type KendoCitationProps = {
+  /** Source domain/name shown as the chip label, e.g. "some-link.com" */
+  domain?: string;
+  /** Number of additional sources not shown individually, renders as a "+N" suffix */
+  count?: number;
+};
+
+const defaultOptions = {
+  icon: "globe",
+  size: "small",
+  fillMode: "outline",
+  rounded: "full",
+} as const;
+
+/**
+ * @ux {Inline citation} Displays a source domain as a small, pill-shaped chip inline within AI-generated content.
+ * @ux {Additional sources} An optional count renders as a "+N" suffix indicating further uncited sources.
+ */
+export const Citation: KendoComponent<KendoCitationProps & KendoChipProps & KendoChipState & React.HTMLAttributes<HTMLDivElement>> = (props: KendoCitationProps & KendoChipProps & KendoChipState & React.HTMLAttributes<HTMLDivElement>) => {
+  const { domain, count, text, icon = defaultOptions.icon, size = defaultOptions.size, fillMode = defaultOptions.fillMode, rounded = defaultOptions.rounded, className, ...other } = props;
+
+  const label = text ?? [domain, count ? `+${count}` : undefined].filter(Boolean).join(" ");
+
+  return <Chip {...other} text={label} icon={icon} size={size} fillMode={fillMode} rounded={rounded} className={classNames(className, CITATION_CLASSNAME)} />;
+};
+
+Citation.states = states;
+Citation.options = options;
+Citation.className = CITATION_CLASSNAME;
+Citation.defaultOptions = defaultOptions;
+Citation.moduleName = CITATION_MODULE_NAME;
+Citation.folderName = CITATION_FOLDER_NAME;
+
+export default Citation;

package/src/citation/constants.ts

@@ -0,0 +1,2 @@
+export const CITATION_MODULE_NAME = 'citation';
+export const CITATION_FOLDER_NAME = CITATION_MODULE_NAME;

package/src/citation/index.ts

@@ -0,0 +1,4 @@
+export * from './citation.spec';
+export * from './citation-popover.spec';
+export * from './templates/citation-normal';
+export * from './templates/citation-opened';

package/src/citation/templates/citation-normal.tsx

@@ -0,0 +1,3 @@
+import Citation from '../citation.spec';
+
+export const CitationNormal = (props: any) => <Citation domain="some-link.com" count={5} {...props} />;

package/src/citation/templates/citation-opened.tsx

@@ -0,0 +1,20 @@
+import Citation from "../citation.spec";
+import CitationPopover from "../citation-popover.spec";
+
+export const CitationOpened = (props: any) => (
+  <>
+    <Citation domain="some-link.com" count={5} selected {...props} />
+    <CitationPopover
+      body={
+        <>
+          <div className="k-citation-popover-view">
+            <div>View 1</div>
+          </div>
+          <div className="k-citation-popover-view">
+            <div>View 2</div>
+          </div>
+        </>
+      }
+    />
+  </>
+);

package/src/citation/tests/citation.tsx

@@ -0,0 +1,53 @@
+import { Citation } from "../citation.spec";
+import CitationPopover from "../citation-popover.spec";
+import Icon from "../../icon/icon.spec";
+
+const styles = `
+    .k-animation-container {
+        position: relative;
+    }
+`;
+
+export default () => (
+  <>
+    <style>{styles}</style>
+    <div id="test-area" className="k-d-flex k-flex-col k-gap-8" style={{ maxWidth: "680px" }}>
+      <section>
+        <p>Inline Citation</p>
+        <div className="k-d-flex k-flex-wrap k-gap-2 k-align-items-center">
+          <Citation domain="some-link.com" count={5} />
+          <Citation domain="some-link.com" count={5} selected />
+        </div>
+      </section>
+
+      <section>
+        <p>Inline Citation + Popover</p>
+        <p>
+          An inline citation component is an interactive UI element that embeds clickable reference badges, like [1] or source names, directly into text. <Citation domain="some-link.com" count={5} selected /> When users hover over or click these badges, the component displays full source details, such as titles, domains, URLs.
+        </p>
+        <CitationPopover
+          body={
+            <>
+              <div className="k-citation-popover-view">
+                <div className="k-font-weight-bold">Advances in Natural Language Processing</div>
+                <span className="k-color-subtle k-font-size-sm k-mt-2">A comprehensive study on the recent developments in natural language processing technologies and their...</span>
+                <a href="#" className="k-d-flex k-align-items-center k-font-size-sm k-mt-1 k-gap-1">
+                  <Icon icon="globe" />
+                  https://example.com/nlp-advances
+                </a>
+              </div>
+              <div className="k-citation-popover-view">
+                <div className="k-font-weight-bold">Advances in Natural Language Processing</div>
+                <span className="k-color-subtle k-font-size-sm k-mt-2">A comprehensive study on the recent developments in natural language processing technologies and their...</span>
+                <a href="#" className="k-d-flex k-align-items-center k-font-size-sm k-mt-1 k-gap-1">
+                  <Icon icon="globe" />
+                  https://example.com/nlp-advances
+                </a>
+              </div>
+            </>
+          }
+        />
+      </section>
+    </div>
+  </>
+);

package/src/index.ts

@@ -122,6 +122,9 @@ export * from './context-menu/index';
 
 // Misc
 // export * from './adaptive/index''
+export * from './agent-response/index';
+export * from './citation/index';
+export * from './checkpoint/index';
 export * from './chat/index';
 export * from './mediaplayer/index';
 export * from './timeline/index';

package/src/popover/popover.spec.tsx

@@ -13,7 +13,7 @@ const defaultOptions = {};
 
 export type KendoPopoverProps = {
     callout?: null | 'top' | 'bottom' | 'left' | 'right';
-    title?: string;
+    title?: React.ReactNode;
     body?: React.JSX.Element | React.JSX.Element[];
     id?: string;
 };
@@ -28,9 +28,9 @@ export type KendoPopoverProps = {
  * @ux {Dismiss} Closes when clicking outside the popover or pressing Escape.
  * @ux {Arrow} An optional pointer arrow visually connects the popover to its trigger.
  */
-export const Popover: KendoComponent<KendoPopoverProps & React.HTMLAttributes<HTMLDivElement>> = (
+export const Popover: KendoComponent<KendoPopoverProps & Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>> = (
     props: KendoPopoverProps &
-        React.HTMLAttributes<HTMLDivElement>
+        Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>
 ) => {
     const {
         callout,

package/src/segmented-control/segmented-control-button.spec.tsx

@@ -31,6 +31,7 @@ const defaultOptions = {};
  * @aria {role="button"} Each button must have the appropriate button role.
  * @aria {aria-pressed="true"} Only the selected button within the group will have this attribute set to true.
  * @aria {aria-disabled="true"} Indicates that the button is disabled and cannot be interacted with.
+ * @aria {tabindex} Roving tabindex: the selected button has tabindex="0"; all others have tabindex="-1".
  * @ux {Selection} Clicking this button selects it and automatically deselects the others.
  * @ux {Disabled state} When disabled, this segment cannot be activated.
  */
@@ -65,6 +66,7 @@ export const SegmentedControlButton: KendoComponent<KendoSegmentedControlButtonP
             )}
             aria-pressed={selected ? 'true' : 'false'}
             aria-disabled={disabled ? 'true' : undefined}
+            tabIndex={selected ? 0 : -1}
         >
             {icon && (
                 <Icon

package/src/segmented-control/segmented-control.spec.tsx

@@ -71,9 +71,11 @@ SegmentedControl.moduleName = SEGMENTED_CONTROL_MODULE_NAME;
 SegmentedControl.folderName = SEGMENTED_CONTROL_FOLDER_NAME;
 
 /**
- * @keyboard {Tab} Focuses the next button in the control. If the focus is on the last button, focuses the next focusable element on the page.
- * @keyboard {Shift + Tab} Focuses the previous button in the control. If the focus is on the first button, focuses the previous focusable element before the Segmented Control.
- * @keyboard {Enter or Space} Activates the focused button and selects it.
+ * @keyboard {Tab} Moves focus into the Segmented Control to the selected button. Pressing Tab again moves focus out of the control to the next focusable element on the page.
+ * @keyboard {Shift + Tab} Moves focus out of the Segmented Control to the previous focusable element on the page.
+ * @keyboard {ArrowLeft} Moves focus to the previous button.
+ * @keyboard {ArrowRight} Moves focus to the next button.
+ * @keyboard {Enter or Space} Selects the focused button.
  *
  * @see https://www.w3.org/TR/wai-aria-1.2/#button WAI-ARIA `button` Role Specification
  * @see https://www.w3.org/TR/wai-aria-1.2/#group WAI-ARIA `group` Role Specification