@pega/cosmos-react-core 9.0.0-build.2.8 → 9.0.0-build.20.0

package/lib/components/AIButton/AIButton.d.ts

@@ -31,7 +31,9 @@ export type AIButtonProps = WithAttributes<'button', NoChildrenProp & {
      */
     iconOnly?: false;
 })>;
-export declare const StyledAIButton: import("styled-components").StyledComponent<import("../../types").ForwardRefForwardPropsComponent<import("../Button").ButtonProps>, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAIButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("../Button").ButtonProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement | HTMLButtonElement> & import("../../types").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLAnchorElement | HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLAnchorElement | HTMLButtonElement> | null | undefined;
+}, never>> & string & Omit<import("../../types").ForwardRefForwardPropsComponent<import("../Button").ButtonProps>, keyof import("react").Component<any, {}, any>>;
 declare const _default: import("react").ForwardRefExoticComponent<PropsWithoutRef<AIButtonProps> & import("react").RefAttributes<HTMLButtonElement>>;
 export default _default;
 //# sourceMappingURL=AIButton.d.ts.map

package/lib/components/AIButton/AIButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AIButton.d.ts","sourceRoot":"","sources":["../../../src/components/AIButton/AIButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAW9E,MAAM,MAAM,aAAa,GAAG,cAAc,CACxC,QAAQ,EACR,cAAc,GAAG;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,CACE;IACE;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,EAAE,IAAI,CAAC;CAChB,GACD;IACE;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CACJ,CACJ,CAAC;AAEF,eAAO,MAAM,cAAc,0LAAmB,CAAC;;AAI/C,wBAyCE"}
+{"version":3,"file":"AIButton.d.ts","sourceRoot":"","sources":["../../../src/components/AIButton/AIButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,KAAK,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAW9E,MAAM,MAAM,aAAa,GAAG,cAAc,CACxC,QAAQ,EACR,cAAc,GAAG;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAC;IAClC,wCAAwC;IACxC,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,CACE;IACE;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,QAAQ,EAAE,IAAI,CAAC;CAChB,GACD;IACE;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC;CAClB,CACJ,CACJ,CAAC;AAEF,eAAO,MAAM,cAAc;;iKAAmB,CAAC;;AAI/C,wBAyCE"}

package/lib/components/AIRewrite/AIRewrite.d.ts

@@ -0,0 +1,12 @@
+import type { AIRewriteProps } from './AIRewrite.types';
+/**
+ * AIRewrite - A popover dialog for AI-powered text rewriting
+ *
+ * Renders in three modes:
+ * 1. Form mode (default) — collects rewrite action + optional instructions
+ * 2. Loading mode (isLoading=true) — shows progress while the AI processes
+ * 3. Review mode (rewrittenText is set) — editable text area with Apply / Back
+ */
+declare const AIRewrite: ({ target, testId, onSubmit, onCancel, isLoading, rewrittenText, onApply, onBack }: AIRewriteProps) => import("react/jsx-runtime").JSX.Element;
+export default AIRewrite;
+//# sourceMappingURL=AIRewrite.d.ts.map

package/lib/components/AIRewrite/AIRewrite.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AIRewrite.d.ts","sourceRoot":"","sources":["../../../src/components/AIRewrite/AIRewrite.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAY,MAAM,mBAAmB,CAAC;AAGlE;;;;;;;GAOG;AACH,QAAA,MAAM,SAAS,GAAI,mFAShB,cAAc,4CA8GhB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/AIRewrite/AIRewrite.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { FormDialog, RadioButtonGroup, RadioButton, TextArea, useI18n, useTestIds, Flex } from '@pega/cosmos-react-core';
+import { getAIRewriteTestIds } from './AIRewrite.test-ids';
+/**
+ * AIRewrite - A popover dialog for AI-powered text rewriting
+ *
+ * Renders in three modes:
+ * 1. Form mode (default) — collects rewrite action + optional instructions
+ * 2. Loading mode (isLoading=true) — shows progress while the AI processes
+ * 3. Review mode (rewrittenText is set) — editable text area with Apply / Back
+ */
+const AIRewrite = ({ target, testId, onSubmit, onCancel, isLoading, rewrittenText, onApply, onBack }) => {
+    const t = useI18n();
+    const testIds = useTestIds(testId, getAIRewriteTestIds);
+    const [selectedAction, setSelectedAction] = useState('improve');
+    const [additionalInstructions, setAdditionalInstructions] = useState('');
+    const [editableRewrittenText, setEditableRewrittenText] = useState(rewrittenText ?? '');
+    // Sync editable text whenever a new AI result arrives
+    useEffect(() => {
+        if (rewrittenText !== undefined) {
+            setEditableRewrittenText(rewrittenText);
+        }
+    }, [rewrittenText]);
+    const handleActionChange = (e) => {
+        const newAction = e.target.value;
+        if (newAction === 'improve' ||
+            newAction === 'shorter' ||
+            newAction === 'professional' ||
+            newAction === 'friendly') {
+            setSelectedAction(newAction);
+        }
+    };
+    const handleSubmit = () => {
+        onSubmit(selectedAction, additionalInstructions);
+    };
+    const handleCancel = () => {
+        target.focus();
+        onCancel();
+    };
+    // Review mode — show the AI result in an editable field
+    if (rewrittenText !== undefined) {
+        return (_jsx(FormDialog, { target: target, heading: t('ai_rewrite_title'), onDismiss: handleCancel, onCancel: { text: t('ai_rewrite_back'), handler: () => onBack?.() }, onSubmit: { text: t('ai_rewrite_apply'), handler: () => onApply?.(editableRewrittenText) }, children: _jsx(TextArea, { label: t('ai_rewrite_result_label'), value: editableRewrittenText, onChange: e => setEditableRewrittenText(e.target.value), "data-testid": testIds.reviewTextArea }) }));
+    }
+    // Form mode (default or loading)
+    return (_jsx(FormDialog, { target: target, heading: t('ai_rewrite_title'), progress: isLoading, onCancel: handleCancel, onSubmit: {
+            disabled: isLoading,
+            handler: handleSubmit
+        }, children: _jsxs(Flex, { container: { direction: 'column', rowGap: 2 }, children: [_jsxs(RadioButtonGroup, { name: 'aiAction', label: t('ai_rewrite_label'), required: true, children: [_jsx(RadioButton, { value: 'improve', label: t('ai_rewrite_improve'), checked: selectedAction === 'improve', onChange: handleActionChange, "data-testid": testIds.radioClearer }), _jsx(RadioButton, { value: 'shorter', label: t('ai_rewrite_shorter'), checked: selectedAction === 'shorter', onChange: handleActionChange, "data-testid": testIds.radioShorter }), _jsx(RadioButton, { value: 'professional', label: t('ai_rewrite_professional'), checked: selectedAction === 'professional', onChange: handleActionChange, "data-testid": testIds.radioProfessional }), _jsx(RadioButton, { value: 'friendly', label: t('ai_rewrite_friendly'), checked: selectedAction === 'friendly', onChange: handleActionChange, "data-testid": testIds.radioFriendly })] }), _jsx(TextArea, { label: t('ai_rewrite_instructions_label'), info: t('ai_rewrite_instructions_info'), value: additionalInstructions, onChange: e => setAdditionalInstructions(e.target.value), maxLength: 200, "data-testid": testIds.instructionsInput })] }) }));
+};
+export default AIRewrite;
+//# sourceMappingURL=AIRewrite.js.map

package/lib/components/AIRewrite/AIRewrite.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AIRewrite.js","sourceRoot":"","sources":["../../../src/components/AIRewrite/AIRewrite.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useEffect, useState } from 'react';\nimport type { ChangeEvent } from 'react';\n\nimport {\n  FormDialog,\n  RadioButtonGroup,\n  RadioButton,\n  TextArea,\n  useI18n,\n  useTestIds,\n  Flex\n} from '@pega/cosmos-react-core';\n\nimport type { AIRewriteProps, AIAction } from './AIRewrite.types';\nimport { getAIRewriteTestIds } from './AIRewrite.test-ids';\n\n/**\n * AIRewrite - A popover dialog for AI-powered text rewriting\n *\n * Renders in three modes:\n * 1. Form mode (default) — collects rewrite action + optional instructions\n * 2. Loading mode (isLoading=true) — shows progress while the AI processes\n * 3. Review mode (rewrittenText is set) — editable text area with Apply / Back\n */\nconst AIRewrite = ({\n  target,\n  testId,\n  onSubmit,\n  onCancel,\n  isLoading,\n  rewrittenText,\n  onApply,\n  onBack\n}: AIRewriteProps) => {\n  const t = useI18n();\n  const testIds = useTestIds(testId, getAIRewriteTestIds);\n  const [selectedAction, setSelectedAction] = useState<AIAction>('improve');\n  const [additionalInstructions, setAdditionalInstructions] = useState('');\n  const [editableRewrittenText, setEditableRewrittenText] = useState(rewrittenText ?? '');\n\n  // Sync editable text whenever a new AI result arrives\n  useEffect(() => {\n    if (rewrittenText !== undefined) {\n      setEditableRewrittenText(rewrittenText);\n    }\n  }, [rewrittenText]);\n\n  const handleActionChange = (e: ChangeEvent<HTMLInputElement>) => {\n    const newAction = e.target.value;\n    if (\n      newAction === 'improve' ||\n      newAction === 'shorter' ||\n      newAction === 'professional' ||\n      newAction === 'friendly'\n    ) {\n      setSelectedAction(newAction);\n    }\n  };\n\n  const handleSubmit = () => {\n    onSubmit(selectedAction, additionalInstructions);\n  };\n\n  const handleCancel = () => {\n    target.focus();\n    onCancel();\n  };\n\n  // Review mode — show the AI result in an editable field\n  if (rewrittenText !== undefined) {\n    return (\n      <FormDialog\n        target={target}\n        heading={t('ai_rewrite_title')}\n        onDismiss={handleCancel}\n        onCancel={{ text: t('ai_rewrite_back'), handler: () => onBack?.() }}\n        onSubmit={{ text: t('ai_rewrite_apply'), handler: () => onApply?.(editableRewrittenText) }}\n      >\n        <TextArea\n          label={t('ai_rewrite_result_label')}\n          value={editableRewrittenText}\n          onChange={e => setEditableRewrittenText(e.target.value)}\n          data-testid={testIds.reviewTextArea}\n        />\n      </FormDialog>\n    );\n  }\n\n  // Form mode (default or loading)\n  return (\n    <FormDialog\n      target={target}\n      heading={t('ai_rewrite_title')}\n      progress={isLoading}\n      onCancel={handleCancel}\n      onSubmit={{\n        disabled: isLoading,\n        handler: handleSubmit\n      }}\n    >\n      <Flex container={{ direction: 'column', rowGap: 2 }}>\n        <RadioButtonGroup name='aiAction' label={t('ai_rewrite_label')} required>\n          <RadioButton\n            value='improve'\n            label={t('ai_rewrite_improve')}\n            checked={selectedAction === 'improve'}\n            onChange={handleActionChange}\n            data-testid={testIds.radioClearer}\n          />\n          <RadioButton\n            value='shorter'\n            label={t('ai_rewrite_shorter')}\n            checked={selectedAction === 'shorter'}\n            onChange={handleActionChange}\n            data-testid={testIds.radioShorter}\n          />\n          <RadioButton\n            value='professional'\n            label={t('ai_rewrite_professional')}\n            checked={selectedAction === 'professional'}\n            onChange={handleActionChange}\n            data-testid={testIds.radioProfessional}\n          />\n          <RadioButton\n            value='friendly'\n            label={t('ai_rewrite_friendly')}\n            checked={selectedAction === 'friendly'}\n            onChange={handleActionChange}\n            data-testid={testIds.radioFriendly}\n          />\n        </RadioButtonGroup>\n\n        <TextArea\n          label={t('ai_rewrite_instructions_label')}\n          info={t('ai_rewrite_instructions_info')}\n          value={additionalInstructions}\n          onChange={e => setAdditionalInstructions(e.target.value)}\n          maxLength={200}\n          data-testid={testIds.instructionsInput}\n        />\n      </Flex>\n    </FormDialog>\n  );\n};\n\nexport default AIRewrite;\n"]}

package/lib/components/AIRewrite/AIRewrite.test-ids.d.ts

@@ -0,0 +1,2 @@
+export declare const getAIRewriteTestIds: (testIdProp?: import("../..").TestIdProp["testId"]) => import("../..").TestIdsRecord<readonly ["radio-clearer", "radio-shorter", "radio-professional", "radio-friendly", "instructions-input", "review-text-area"]>;
+//# sourceMappingURL=AIRewrite.test-ids.d.ts.map

package/lib/components/AIRewrite/AIRewrite.test-ids.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AIRewrite.test-ids.d.ts","sourceRoot":"","sources":["../../../src/components/AIRewrite/AIRewrite.test-ids.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,mBAAmB,qNAOrB,CAAC"}

package/lib/components/AIRewrite/AIRewrite.test-ids.js

@@ -0,0 +1,10 @@
+import { createTestIds } from '../../utils';
+export const getAIRewriteTestIds = createTestIds('ai-rewrite-popover', [
+    'radio-clearer',
+    'radio-shorter',
+    'radio-professional',
+    'radio-friendly',
+    'instructions-input',
+    'review-text-area'
+]);
+//# sourceMappingURL=AIRewrite.test-ids.js.map

package/lib/components/AIRewrite/AIRewrite.test-ids.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AIRewrite.test-ids.js","sourceRoot":"","sources":["../../../src/components/AIRewrite/AIRewrite.test-ids.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAAC,oBAAoB,EAAE;IACrE,eAAe;IACf,eAAe;IACf,oBAAoB;IACpB,gBAAgB;IAChB,oBAAoB;IACpB,kBAAkB;CACV,CAAC,CAAC","sourcesContent":["import { createTestIds } from '../../utils';\n\nexport const getAIRewriteTestIds = createTestIds('ai-rewrite-popover', [\n  'radio-clearer',\n  'radio-shorter',\n  'radio-professional',\n  'radio-friendly',\n  'instructions-input',\n  'review-text-area'\n] as const);\n"]}

package/lib/components/AIRewrite/AIRewrite.types.d.ts

@@ -0,0 +1,20 @@
+import type { TestIdProp } from '../../types';
+/** AI rewrite action types */
+export type AIAction = 'improve' | 'shorter' | 'professional' | 'friendly';
+export interface AIRewriteProps extends TestIdProp {
+    /** The button element that triggered the popover */
+    target: HTMLElement;
+    /** Callback when user submits the rewrite form */
+    onSubmit: (rewriteAction: AIAction, additionalInstructions: string) => void;
+    /** Callback when user cancels or dismisses the popover */
+    onCancel: () => void;
+    /** When true, shows a loading/progress state while the AI is generating a result */
+    isLoading?: boolean;
+    /** When set, transitions the popover to a review step showing the AI-generated text in an editable field */
+    rewrittenText?: string;
+    /** Called when the user accepts the (optionally edited) rewritten text in the review step */
+    onApply?: (text: string) => void;
+    /** Called when the user clicks Back in the review step to return to the form */
+    onBack?: () => void;
+}
+//# sourceMappingURL=AIRewrite.types.d.ts.map

package/lib/components/AIRewrite/AIRewrite.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AIRewrite.types.d.ts","sourceRoot":"","sources":["../../../src/components/AIRewrite/AIRewrite.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAE9C,8BAA8B;AAC9B,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,GAAG,UAAU,CAAC;AAE3E,MAAM,WAAW,cAAe,SAAQ,UAAU;IAChD,oDAAoD;IACpD,MAAM,EAAE,WAAW,CAAC;IAEpB,kDAAkD;IAClD,QAAQ,EAAE,CAAC,aAAa,EAAE,QAAQ,EAAE,sBAAsB,EAAE,MAAM,KAAK,IAAI,CAAC;IAE5E,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,IAAI,CAAC;IAErB,oFAAoF;IACpF,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,4GAA4G;IAC5G,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB,6FAA6F;IAC7F,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC,gFAAgF;IAChF,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB"}

package/lib/components/AIRewrite/AIRewrite.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AIRewrite.types.js.map

package/lib/components/AIRewrite/AIRewrite.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AIRewrite.types.js","sourceRoot":"","sources":["../../../src/components/AIRewrite/AIRewrite.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { TestIdProp } from '../../types';\n\n/** AI rewrite action types */\nexport type AIAction = 'improve' | 'shorter' | 'professional' | 'friendly';\n\nexport interface AIRewriteProps extends TestIdProp {\n  /** The button element that triggered the popover */\n  target: HTMLElement;\n\n  /** Callback when user submits the rewrite form */\n  onSubmit: (rewriteAction: AIAction, additionalInstructions: string) => void;\n\n  /** Callback when user cancels or dismisses the popover */\n  onCancel: () => void;\n\n  /** When true, shows a loading/progress state while the AI is generating a result */\n  isLoading?: boolean;\n\n  /** When set, transitions the popover to a review step showing the AI-generated text in an editable field */\n  rewrittenText?: string;\n\n  /** Called when the user accepts the (optionally edited) rewritten text in the review step */\n  onApply?: (text: string) => void;\n\n  /** Called when the user clicks Back in the review step to return to the form */\n  onBack?: () => void;\n}\n"]}

package/lib/components/AIRewrite/index.d.ts

@@ -0,0 +1,4 @@
+export { default } from './AIRewrite';
+export type { AIRewriteProps, AIAction } from './AIRewrite.types';
+export { getAIRewriteTestIds } from './AIRewrite.test-ids';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/AIRewrite/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/AIRewrite/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AACtC,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAClE,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC"}

package/lib/components/AIRewrite/index.js

@@ -0,0 +1,3 @@
+export { default } from './AIRewrite';
+export { getAIRewriteTestIds } from './AIRewrite.test-ids';
+//# sourceMappingURL=index.js.map

package/lib/components/AIRewrite/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/AIRewrite/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC","sourcesContent":["export { default } from './AIRewrite';\nexport type { AIRewriteProps, AIAction } from './AIRewrite.types';\nexport { getAIRewriteTestIds } from './AIRewrite.test-ids';\n"]}

package/lib/components/Actions/Actions.d.ts

@@ -7,6 +7,8 @@ export type ActionsProps = WithAttributes<'button', NoChildrenProp & Pick<Button
     contextualLabel?: string;
     /** @default 2 */
     menuAt?: number;
+    filterAt?: number;
+    progress?: boolean;
     menuButtonProps?: {
         onClick?: MenuButtonProps['onClick'];
         onKeyDown?: MenuButtonProps['onKeyDown'];

package/lib/components/Actions/Actions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAEtF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAG7C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAEzC,MAAM,MAAM,YAAY,GAAG,cAAc,CACvC,QAAQ,EACR,cAAc,GACZ,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,UAAU,CAAC,GACzC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IAC5B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,eAAe,CAAC,EAAE;QAChB,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;QACrC,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;KAC1C,CAAC;IACF,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC,CACJ,CAAC;;AAEF,wBAwEG"}
+{"version":3,"file":"Actions.d.ts","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAc,cAAc,EAAE,MAAM,aAAa,CAAC;AAEtF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAG7C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAGzC,MAAM,MAAM,YAAY,GAAG,cAAc,CACvC,QAAQ,EACR,cAAc,GACZ,IAAI,CAAC,WAAW,EAAE,SAAS,GAAG,UAAU,CAAC,GACzC,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG;IAC5B,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB;IACjB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE;QAChB,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;QACrC,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAC;KAC1C,CAAC;IACF,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;CAClC,CACJ,CAAC;;AAEF,wBAsGG"}

package/lib/components/Actions/Actions.js

@@ -1,29 +1,55 @@
 import { createElement as _createElement } from "react";
 import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { forwardRef } from 'react';
-import { useConsolidatedRef, useI18n } from '../../hooks';
+import { forwardRef, useRef, useState } from 'react';
+import { useConsolidatedRef, useI18n, useUID } from '../../hooks';
 import Button from '../Button';
 import Icon from '../Icon';
 import MenuButton from '../MenuButton';
+import { createStringMatcher, isInstance } from '../../utils';
 export default forwardRef(function Actions({ 
 // @ts-expect-error
-'data-testid': dataTestId, items, menuAt = 2, scrollAt, iconOnly = true, menuButtonProps, contextualLabel, compact = false, disabled = false, tabIndex }, ref) {
+'data-testid': dataTestId, items, menuAt = 2, filterAt, scrollAt, progress, iconOnly = true, menuButtonProps, contextualLabel, compact = false, disabled = false, tabIndex }, ref) {
     const t = useI18n();
+    const menuRef = useRef(null);
     const menuButtonRef = useConsolidatedRef(ref);
-    if (!items || items.length === 0) {
+    const filterElRef = useConsolidatedRef(null);
+    const filterListId = useUID();
+    const [filterValue, setFilterValue] = useState('');
+    if (!items) {
         return null;
     }
+    const renderFilter = typeof filterAt === 'number' && items.length >= filterAt;
+    const filterRegex = createStringMatcher(filterValue, 'contains');
+    const itemsToRender = renderFilter ? items.filter(item => filterRegex.test(item.text)) : items;
+    const onBlur = (e) => {
+        if (isInstance(e.relatedTarget, Node) && menuRef.current?.contains(e.relatedTarget)) {
+            return;
+        }
+        setFilterValue('');
+    };
+    const filterInputProps = renderFilter
+        ? {
+            value: filterValue,
+            ref: filterElRef,
+            onChange: (e) => setFilterValue?.(e.target.value),
+            onBlur
+        }
+        : undefined;
     return items.length >= menuAt ? (_jsx(MenuButton, { ...(dataTestId ? { 'data-testid': dataTestId } : {}), ref: menuButtonRef, text: t('actions'), "aria-label": contextualLabel && t('actions_for', [contextualLabel]), iconOnly: true, icon: 'more', variant: 'simple', compact: compact, onClick: menuButtonProps?.onClick, onKeyDown: menuButtonProps?.onKeyDown, disabled: disabled, tabIndex: tabIndex, menu: {
             scrollAt,
-            items: items.map(({ text, onClick, ...restProps }) => ({
+            filterInputProps: progress ? undefined : filterInputProps,
+            listId: filterListId,
+            items: itemsToRender.map(({ text, onClick, ...restProps }) => ({
                 ...restProps,
                 primary: text,
                 onClick: onClick
                     ? (id, e) => {
                         onClick(id, e, menuButtonRef.current ?? undefined);
+                        menuButtonRef.current?.focus();
                     }
                     : undefined
-            }))
+            })),
+            loading: progress
         } })) : (_jsx(_Fragment, { children: items.map(({ id, icon, text, onClick, ...restProps }) => {
             return (_createElement(Button, { ...(dataTestId ? { 'data-testid': dataTestId } : {}), key: id, variant: icon && iconOnly ? 'simple' : undefined, onClick: (event) => onClick?.(id, event), label: icon ? text : undefined, icon: !!icon && iconOnly, compact: compact, "aria-label": contextualLabel ? `${text} - ${contextualLabel}` : text, disabled: disabled, ...restProps }, icon && iconOnly ? _jsx(Icon, { name: icon }) : text));
         }) }));

package/lib/components/Actions/Actions.js.map

@@ -1 +1 @@
-{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef } from 'react';\nimport type { PropsWithoutRef, MouseEvent } from 'react';\n\nimport { useConsolidatedRef, useI18n } from '../../hooks';\nimport type { Action, NoChildrenProp, RefElement, WithAttributes } from '../../types';\nimport Button from '../Button';\nimport type { ButtonProps } from '../Button';\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport type { MenuButtonProps } from '../MenuButton';\nimport type { MenuProps } from '../Menu';\n\nexport type ActionsProps = WithAttributes<\n  'button',\n  NoChildrenProp &\n    Pick<ButtonProps, 'compact' | 'disabled'> &\n    Pick<MenuProps, 'scrollAt'> & {\n      items: Action[];\n      contextualLabel?: string;\n      /** @default 2 */\n      menuAt?: number;\n      menuButtonProps?: {\n        onClick?: MenuButtonProps['onClick'];\n        onKeyDown?: MenuButtonProps['onKeyDown'];\n      };\n      /** @default true */\n      iconOnly?: boolean;\n      /** @default false */\n      compact?: ButtonProps['compact'];\n    }\n>;\n\nexport default forwardRef<RefElement<ActionsProps>, PropsWithoutRef<ActionsProps>>(function Actions(\n  {\n    // @ts-expect-error\n    'data-testid': dataTestId,\n    items,\n    menuAt = 2,\n    scrollAt,\n    iconOnly = true,\n    menuButtonProps,\n    contextualLabel,\n    compact = false,\n    disabled = false,\n    tabIndex\n  },\n  ref\n) {\n  const t = useI18n();\n  const menuButtonRef = useConsolidatedRef(ref);\n\n  if (!items || items.length === 0) {\n    return null;\n  }\n\n  return items.length >= menuAt ? (\n    <MenuButton\n      {...(dataTestId ? { 'data-testid': dataTestId } : {})}\n      ref={menuButtonRef}\n      text={t('actions')}\n      aria-label={contextualLabel && t('actions_for', [contextualLabel])}\n      iconOnly\n      icon='more'\n      variant='simple'\n      compact={compact}\n      onClick={menuButtonProps?.onClick}\n      onKeyDown={menuButtonProps?.onKeyDown}\n      disabled={disabled}\n      tabIndex={tabIndex}\n      menu={{\n        scrollAt,\n        items: items.map(({ text, onClick, ...restProps }) => ({\n          ...restProps,\n          primary: text,\n          onClick: onClick\n            ? (id, e) => {\n                onClick(id, e, menuButtonRef.current ?? undefined);\n              }\n            : undefined\n        }))\n      }}\n    />\n  ) : (\n    <>\n      {items.map(({ id, icon, text, onClick, ...restProps }) => {\n        return (\n          <Button\n            {...(dataTestId ? { 'data-testid': dataTestId } : {})}\n            key={id}\n            variant={icon && iconOnly ? 'simple' : undefined}\n            onClick={(event: MouseEvent<HTMLButtonElement>) => onClick?.(id, event)}\n            label={icon ? text : undefined}\n            icon={!!icon && iconOnly}\n            compact={compact}\n            aria-label={contextualLabel ? `${text} - ${contextualLabel}` : text}\n            disabled={disabled}\n            {...restProps}\n          >\n            {icon && iconOnly ? <Icon name={icon} /> : text}\n          </Button>\n        );\n      })}\n    </>\n  );\n});\n"]}
+{"version":3,"file":"Actions.js","sourceRoot":"","sources":["../../../src/components/Actions/Actions.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useRef, useState } from 'react';\nimport type { PropsWithoutRef, MouseEvent, ChangeEvent, FocusEvent } from 'react';\n\nimport { useConsolidatedRef, useI18n, useUID } from '../../hooks';\nimport type { Action, NoChildrenProp, RefElement, WithAttributes } from '../../types';\nimport Button from '../Button';\nimport type { ButtonProps } from '../Button';\nimport Icon from '../Icon';\nimport MenuButton from '../MenuButton';\nimport type { MenuButtonProps } from '../MenuButton';\nimport type { MenuProps } from '../Menu';\nimport { createStringMatcher, isInstance } from '../../utils';\n\nexport type ActionsProps = WithAttributes<\n  'button',\n  NoChildrenProp &\n    Pick<ButtonProps, 'compact' | 'disabled'> &\n    Pick<MenuProps, 'scrollAt'> & {\n      items: Action[];\n      contextualLabel?: string;\n      /** @default 2 */\n      menuAt?: number;\n      filterAt?: number;\n      progress?: boolean;\n      menuButtonProps?: {\n        onClick?: MenuButtonProps['onClick'];\n        onKeyDown?: MenuButtonProps['onKeyDown'];\n      };\n      /** @default true */\n      iconOnly?: boolean;\n      /** @default false */\n      compact?: ButtonProps['compact'];\n    }\n>;\n\nexport default forwardRef<RefElement<ActionsProps>, PropsWithoutRef<ActionsProps>>(function Actions(\n  {\n    // @ts-expect-error\n    'data-testid': dataTestId,\n    items,\n    menuAt = 2,\n    filterAt,\n    scrollAt,\n    progress,\n    iconOnly = true,\n    menuButtonProps,\n    contextualLabel,\n    compact = false,\n    disabled = false,\n    tabIndex\n  },\n  ref\n) {\n  const t = useI18n();\n  const menuRef = useRef<HTMLDivElement>(null);\n  const menuButtonRef = useConsolidatedRef(ref);\n  const filterElRef = useConsolidatedRef<HTMLInputElement>(null);\n  const filterListId = useUID();\n  const [filterValue, setFilterValue] = useState('');\n\n  if (!items) {\n    return null;\n  }\n\n  const renderFilter = typeof filterAt === 'number' && items.length >= filterAt;\n  const filterRegex = createStringMatcher(filterValue, 'contains');\n  const itemsToRender = renderFilter ? items.filter(item => filterRegex.test(item.text)) : items;\n\n  const onBlur = (e: FocusEvent) => {\n    if (isInstance(e.relatedTarget, Node) && menuRef.current?.contains(e.relatedTarget)) {\n      return;\n    }\n    setFilterValue('');\n  };\n\n  const filterInputProps = renderFilter\n    ? {\n        value: filterValue,\n        ref: filterElRef,\n        onChange: (e: ChangeEvent<HTMLInputElement>) => setFilterValue?.(e.target.value),\n        onBlur\n      }\n    : undefined;\n\n  return items.length >= menuAt ? (\n    <MenuButton\n      {...(dataTestId ? { 'data-testid': dataTestId } : {})}\n      ref={menuButtonRef}\n      text={t('actions')}\n      aria-label={contextualLabel && t('actions_for', [contextualLabel])}\n      iconOnly\n      icon='more'\n      variant='simple'\n      compact={compact}\n      onClick={menuButtonProps?.onClick}\n      onKeyDown={menuButtonProps?.onKeyDown}\n      disabled={disabled}\n      tabIndex={tabIndex}\n      menu={{\n        scrollAt,\n        filterInputProps: progress ? undefined : filterInputProps,\n        listId: filterListId,\n        items: itemsToRender.map(({ text, onClick, ...restProps }) => ({\n          ...restProps,\n          primary: text,\n          onClick: onClick\n            ? (id, e) => {\n                onClick(id, e, menuButtonRef.current ?? undefined);\n                menuButtonRef.current?.focus();\n              }\n            : undefined\n        })),\n        loading: progress\n      }}\n    />\n  ) : (\n    <>\n      {items.map(({ id, icon, text, onClick, ...restProps }) => {\n        return (\n          <Button\n            {...(dataTestId ? { 'data-testid': dataTestId } : {})}\n            key={id}\n            variant={icon && iconOnly ? 'simple' : undefined}\n            onClick={(event: MouseEvent<HTMLButtonElement>) => onClick?.(id, event)}\n            label={icon ? text : undefined}\n            icon={!!icon && iconOnly}\n            compact={compact}\n            aria-label={contextualLabel ? `${text} - ${contextualLabel}` : text}\n            disabled={disabled}\n            {...restProps}\n          >\n            {icon && iconOnly ? <Icon name={icon} /> : text}\n          </Button>\n        );\n      })}\n    </>\n  );\n});\n"]}

package/lib/components/AdditionalInfo/AdditionalInfo.d.ts

@@ -8,7 +8,7 @@ export type AdditionalInfoProps = WithAttributes<'div', RequireAtLeastOne<{
     contextualLabel?: string;
     dialogHandle?: Ref<DialogHandleValue>;
 }, 'heading' | 'contextualLabel'>>;
-export declare const StyledAdditionalInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledAdditionalInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 declare const _default: import("react").ForwardRefExoticComponent<PropsWithoutRef<AdditionalInfoProps> & import("react").RefAttributes<HTMLDivElement>>;
 export default _default;
 //# sourceMappingURL=AdditionalInfo.d.ts.map

package/lib/components/AdditionalInfo/AdditionalInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AdditionalInfo.d.ts","sourceRoot":"","sources":["../../../src/components/AdditionalInfo/AdditionalInfo.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIlD,OAAO,KAAK,EAAc,iBAAiB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAIjF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAOnD,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAC9C,KAAK,EACL,iBAAiB,CACf;IACE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,4EAA4E;IAC5E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACvC,EACD,SAAS,GAAG,iBAAiB,CAC9B,CACF,CAAC;AAEF,eAAO,MAAM,oBAAoB,yGAAe,CAAC;;AAEjD,wBAuDE"}
+{"version":3,"file":"AdditionalInfo.d.ts","sourceRoot":"","sources":["../../../src/components/AdditionalInfo/AdditionalInfo.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAIlD,OAAO,KAAK,EAAc,iBAAiB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAIjF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAOnD,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAC9C,KAAK,EACL,iBAAiB,CACf;IACE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,GAAG,GAAG,CAAC,OAAO,CAAC;IAC/B,4EAA4E;IAC5E,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,GAAG,CAAC,iBAAiB,CAAC,CAAC;CACvC,EACD,SAAS,GAAG,iBAAiB,CAC9B,CACF,CAAC;AAEF,eAAO,MAAM,oBAAoB,6NAAe,CAAC;;AAEjD,wBAuDE"}

package/lib/components/AppShell/AppHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAMjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAIhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAevD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CA4G9D,CAAC;AAEH,eAAe,SAAS,CAAC"}
+{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iBAAiB,EAAoB,MAAM,OAAO,CAAC;AAMjE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAKhD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAgBvD,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAwH9D,CAAC;AAEH,eAAe,SAAS,CAAC"}

package/lib/components/AppShell/AppHeader.js

@@ -6,11 +6,13 @@ import SearchInput from '../SearchInput';
 import { useBreakpoint, useElement, useI18n, useTheme } from '../../hooks';
 import VisuallyHiddenText from '../VisuallyHiddenText';
 import { ThemeOverride } from '../Configuration';
+import useThemeMode from '../../hooks/useThemeMode';
 import AppShellOperator from './Operator';
 import ContextSwitcher from './ContextSwitcher';
 import { StyledAppHeader, StyledAppHeaderInfo, StyledAppHeaderSearchForm, StyledAppHeaderSpacer, StyledAppHeaderText, StyledAppHeaderOperator, StyledAppHeaderLogo } from './AppHeader.styles';
 import AppShellContext from './AppShellContext';
 import { getHeaderTheme } from './style-utils';
+import ThemeSwitcher from './ThemeSwitcher';
 const AppHeader = forwardRef(function AppHeader({ appName, contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {}, fullImageSrc, imageSrc, imageAltText, href, onClick, portalName, target, appNameHidden, operator, searchInput, searchLabel, searchPage }, ref) {
     const t = useI18n();
     const isMediumOrAbove = useBreakpoint('md');
@@ -26,10 +28,11 @@ const AppHeader = forwardRef(function AppHeader({ appName, contextSwitcher: { co
             setSearchContainerEl(null);
         }
     }, [searchPage, searchContainer, setSearchContainerEl]);
+    const { themeMode, onThemeModeChange } = useThemeMode();
     let appInfoAs = 'div';
     if (href)
         appInfoAs = 'a';
-    return (_jsx(ThemeOverride, { theme: headerTheme, children: _jsxs(Flex, { as: StyledAppHeader, container: { alignItems: 'center', pad: 1 }, hideTitle: !isMediumOrAbove, drawerOpen: drawerOpen, ref: ref, children: [contexts && contexts.length > 1 && onContextClick && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel })), _jsx(StyledAppHeaderInfo, { centerLogo: !fullImageSrc, children: _jsxs(Flex, { container: { inline: true, alignItems: 'center', gap: 1 }, as: appInfoAs, href: href, onClick: href ? onClick : undefined, target: target, children: [(fullImageSrc || imageSrc) && (_jsx(StyledAppHeaderLogo, { children: _jsx(Image, { src: fullImageSrc || imageSrc, alt: imageAltText ?? t('application_logo') }) })), _jsx(StyledAppHeaderText, { as: appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span', variant: 'primary', children: appName }), portalName && (_jsx(StyledAppHeaderText, { as: appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span', variant: 'secondary', children: portalName }))] }) }), _jsx(Flex, { item: { grow: 1 }, container: { justify: 'end' }, children: searchInput ? (_jsx(StyledAppHeaderSearchForm, { ref: setSearchContainer, role: 'search', "aria-label": searchLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: !searchPage && _jsx(SearchInput, { ...searchInput }) })) : (_jsx(StyledAppHeaderSpacer, {})) }), _jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, name: operator.name, children: operator.avatar })] }) }));
+    return (_jsx(ThemeOverride, { theme: headerTheme, children: _jsxs(Flex, { as: StyledAppHeader, container: { alignItems: 'center', pad: 1 }, hideTitle: !isMediumOrAbove, drawerOpen: drawerOpen, ref: ref, children: [contexts && contexts.length > 1 && onContextClick && (_jsx(ContextSwitcher, { contexts: contexts, onContextClick: onContextClick, label: contextSwitcherLabel })), _jsx(StyledAppHeaderInfo, { centerLogo: !fullImageSrc, children: _jsx(Flex, { container: { inline: true, alignItems: 'center' }, as: appInfoAs, href: href, onClick: href ? onClick : undefined, target: target, children: _jsxs(Flex, { container: { alignItems: 'center', gap: 1 }, children: [(fullImageSrc || imageSrc) && (_jsx(Flex, { container: { alignItems: 'center' }, as: StyledAppHeaderLogo, children: _jsx(Image, { src: fullImageSrc || imageSrc, alt: imageAltText ?? t('application_logo') }) })), _jsxs("div", { children: [_jsx(StyledAppHeaderText, { as: appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span', variant: 'primary', children: appName }), portalName && (_jsx(StyledAppHeaderText, { as: appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span', variant: 'secondary', children: portalName }))] })] }) }) }), _jsx(Flex, { item: { grow: 1 }, container: { justify: 'end' }, children: searchInput ? (_jsx(StyledAppHeaderSearchForm, { ref: setSearchContainer, role: 'search', "aria-label": searchLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove, children: !searchPage && _jsx(SearchInput, { ...searchInput }) })) : (_jsx(StyledAppHeaderSpacer, {})) }), onThemeModeChange && (_jsx(ThemeSwitcher, { themeMode: themeMode, onThemeModeChange: onThemeModeChange })), _jsx(AppShellOperator, { as: StyledAppHeaderOperator, actions: operator.actions, popover: { placement: 'bottom-start' }, name: operator.name, children: operator.avatar })] }) }));
 });
 export default AppHeader;
 //# sourceMappingURL=AppHeader.js.map

package/lib/components/AppShell/AppHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useContext, useEffect, useMemo } from 'react';\nimport type { FunctionComponent, Ref, ElementType } from 'react';\n\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport SearchInput from '../SearchInput';\nimport { useBreakpoint, useElement, useI18n, useTheme } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { ThemeOverride } from '../Configuration';\n\nimport type { AppHeaderProps } from './AppShell.types';\nimport AppShellOperator from './Operator';\nimport ContextSwitcher from './ContextSwitcher';\nimport {\n  StyledAppHeader,\n  StyledAppHeaderInfo,\n  StyledAppHeaderSearchForm,\n  StyledAppHeaderSpacer,\n  StyledAppHeaderText,\n  StyledAppHeaderOperator,\n  StyledAppHeaderLogo\n} from './AppHeader.styles';\nimport AppShellContext from './AppShellContext';\nimport { getHeaderTheme } from './style-utils';\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(function AppHeader(\n  {\n    appName,\n    contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n    fullImageSrc,\n    imageSrc,\n    imageAltText,\n    href,\n    onClick,\n    portalName,\n    target,\n    appNameHidden,\n    operator,\n    searchInput,\n    searchLabel,\n    searchPage\n  }: AppHeaderProps,\n  ref: Ref<Element>\n) {\n  const t = useI18n();\n  const isMediumOrAbove = useBreakpoint('md');\n  const [searchContainer, setSearchContainer] = useElement<HTMLElement>();\n  const { drawerOpen, setSearchContainerEl } = useContext(AppShellContext);\n  const theme = useTheme();\n  const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);\n  useEffect(() => {\n    if (searchPage && searchContainer) {\n      setSearchContainerEl(searchContainer);\n    } else {\n      setSearchContainerEl(null);\n    }\n  }, [searchPage, searchContainer, setSearchContainerEl]);\n\n  let appInfoAs: ElementType = 'div';\n  if (href) appInfoAs = 'a';\n  return (\n    <ThemeOverride theme={headerTheme}>\n      <Flex\n        as={StyledAppHeader}\n        container={{ alignItems: 'center', pad: 1 }}\n        hideTitle={!isMediumOrAbove}\n        drawerOpen={drawerOpen}\n        ref={ref}\n      >\n        {contexts && contexts.length > 1 && onContextClick && (\n          <ContextSwitcher\n            contexts={contexts}\n            onContextClick={onContextClick}\n            label={contextSwitcherLabel}\n          />\n        )}\n\n        <StyledAppHeaderInfo centerLogo={!fullImageSrc}>\n          <Flex\n            container={{ inline: true, alignItems: 'center', gap: 1 }}\n            as={appInfoAs}\n            href={href}\n            onClick={href ? onClick : undefined}\n            target={target}\n          >\n            {(fullImageSrc || imageSrc) && (\n              <StyledAppHeaderLogo>\n                <Image src={fullImageSrc || imageSrc} alt={imageAltText ?? t('application_logo')} />\n              </StyledAppHeaderLogo>\n            )}\n            <StyledAppHeaderText\n              as={appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span'}\n              variant='primary'\n            >\n              {appName}\n            </StyledAppHeaderText>\n            {portalName && (\n              <StyledAppHeaderText\n                as={appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span'}\n                variant='secondary'\n              >\n                {portalName}\n              </StyledAppHeaderText>\n            )}\n          </Flex>\n        </StyledAppHeaderInfo>\n        <Flex item={{ grow: 1 }} container={{ justify: 'end' }}>\n          {searchInput ? (\n            <StyledAppHeaderSearchForm\n              ref={setSearchContainer}\n              role='search'\n              aria-label={searchLabel}\n              onSubmit={e => e.preventDefault()}\n              isMediumOrAbove={isMediumOrAbove}\n            >\n              {!searchPage && <SearchInput {...searchInput} />}\n            </StyledAppHeaderSearchForm>\n          ) : (\n            <StyledAppHeaderSpacer />\n          )}\n        </Flex>\n\n        <AppShellOperator\n          as={StyledAppHeaderOperator}\n          actions={operator.actions}\n          popover={{ placement: 'bottom-start' }}\n          name={operator.name}\n        >\n          {operator.avatar}\n        </AppShellOperator>\n      </Flex>\n    </ThemeOverride>\n  );\n});\n\nexport default AppHeader;\n"]}
+{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useContext, useEffect, useMemo } from 'react';\nimport type { FunctionComponent, Ref, ElementType } from 'react';\n\nimport Flex from '../Flex';\nimport Image from '../Image';\nimport SearchInput from '../SearchInput';\nimport { useBreakpoint, useElement, useI18n, useTheme } from '../../hooks';\nimport type { ForwardProps } from '../../types';\nimport VisuallyHiddenText from '../VisuallyHiddenText';\nimport { ThemeOverride } from '../Configuration';\nimport useThemeMode from '../../hooks/useThemeMode';\n\nimport type { AppHeaderProps } from './AppShell.types';\nimport AppShellOperator from './Operator';\nimport ContextSwitcher from './ContextSwitcher';\nimport {\n  StyledAppHeader,\n  StyledAppHeaderInfo,\n  StyledAppHeaderSearchForm,\n  StyledAppHeaderSpacer,\n  StyledAppHeaderText,\n  StyledAppHeaderOperator,\n  StyledAppHeaderLogo\n} from './AppHeader.styles';\nimport AppShellContext from './AppShellContext';\nimport { getHeaderTheme } from './style-utils';\nimport ThemeSwitcher from './ThemeSwitcher';\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(function AppHeader(\n  {\n    appName,\n    contextSwitcher: { contexts, onContextClick, label: contextSwitcherLabel } = {},\n    fullImageSrc,\n    imageSrc,\n    imageAltText,\n    href,\n    onClick,\n    portalName,\n    target,\n    appNameHidden,\n    operator,\n    searchInput,\n    searchLabel,\n    searchPage\n  }: AppHeaderProps,\n  ref: Ref<Element>\n) {\n  const t = useI18n();\n  const isMediumOrAbove = useBreakpoint('md');\n  const [searchContainer, setSearchContainer] = useElement<HTMLElement>();\n  const { drawerOpen, setSearchContainerEl } = useContext(AppShellContext);\n  const theme = useTheme();\n  const headerTheme = useMemo(() => getHeaderTheme(theme), [theme]);\n  useEffect(() => {\n    if (searchPage && searchContainer) {\n      setSearchContainerEl(searchContainer);\n    } else {\n      setSearchContainerEl(null);\n    }\n  }, [searchPage, searchContainer, setSearchContainerEl]);\n\n  const { themeMode, onThemeModeChange } = useThemeMode();\n\n  let appInfoAs: ElementType = 'div';\n  if (href) appInfoAs = 'a';\n  return (\n    <ThemeOverride theme={headerTheme}>\n      <Flex\n        as={StyledAppHeader}\n        container={{ alignItems: 'center', pad: 1 }}\n        hideTitle={!isMediumOrAbove}\n        drawerOpen={drawerOpen}\n        ref={ref}\n      >\n        {contexts && contexts.length > 1 && onContextClick && (\n          <ContextSwitcher\n            contexts={contexts}\n            onContextClick={onContextClick}\n            label={contextSwitcherLabel}\n          />\n        )}\n\n        <StyledAppHeaderInfo centerLogo={!fullImageSrc}>\n          <Flex\n            container={{ inline: true, alignItems: 'center' }}\n            as={appInfoAs}\n            href={href}\n            onClick={href ? onClick : undefined}\n            target={target}\n          >\n            <Flex container={{ alignItems: 'center', gap: 1 }}>\n              {(fullImageSrc || imageSrc) && (\n                <Flex container={{ alignItems: 'center' }} as={StyledAppHeaderLogo}>\n                  <Image\n                    src={fullImageSrc || imageSrc}\n                    alt={imageAltText ?? t('application_logo')}\n                  />\n                </Flex>\n              )}\n              <div>\n                <StyledAppHeaderText\n                  as={appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span'}\n                  variant='primary'\n                >\n                  {appName}\n                </StyledAppHeaderText>\n                {portalName && (\n                  <StyledAppHeaderText\n                    as={appNameHidden || !isMediumOrAbove ? VisuallyHiddenText : 'span'}\n                    variant='secondary'\n                  >\n                    {portalName}\n                  </StyledAppHeaderText>\n                )}\n              </div>\n            </Flex>\n          </Flex>\n        </StyledAppHeaderInfo>\n        <Flex item={{ grow: 1 }} container={{ justify: 'end' }}>\n          {searchInput ? (\n            <StyledAppHeaderSearchForm\n              ref={setSearchContainer}\n              role='search'\n              aria-label={searchLabel}\n              onSubmit={e => e.preventDefault()}\n              isMediumOrAbove={isMediumOrAbove}\n            >\n              {!searchPage && <SearchInput {...searchInput} />}\n            </StyledAppHeaderSearchForm>\n          ) : (\n            <StyledAppHeaderSpacer />\n          )}\n        </Flex>\n        {onThemeModeChange && (\n          <ThemeSwitcher themeMode={themeMode} onThemeModeChange={onThemeModeChange} />\n        )}\n\n        <AppShellOperator\n          as={StyledAppHeaderOperator}\n          actions={operator.actions}\n          popover={{ placement: 'bottom-start' }}\n          name={operator.name}\n        >\n          {operator.avatar}\n        </AppShellOperator>\n      </Flex>\n    </ThemeOverride>\n  );\n});\n\nexport default AppHeader;\n"]}

package/lib/components/AppShell/AppHeader.styles.d.ts

@@ -1,19 +1,21 @@
 import type { TextProps } from '../Text';
-export declare const StyledContextSwitcher: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledAppHeaderInfo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+export declare const StyledContextSwitcher: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledAppHeaderInfo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     centerLogo: boolean;
-}, never>;
-export declare const StyledAppHeaderSearchForm: import("styled-components").StyledComponent<"form", import("styled-components").DefaultTheme, {
+}>> & string;
+export declare const StyledAppHeaderSearchForm: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, {
     isMediumOrAbove: boolean;
-}, never>;
-export declare const StyledAppHeaderSpacer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledAppHeaderLogo: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledAppHeaderText: import("styled-components").StyledComponent<import("../..").ForwardRefForwardPropsComponent<TextProps>, import("styled-components").DefaultTheme, {
+}>> & string;
+export declare const StyledAppHeaderSpacer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledAppHeaderLogo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledAppHeaderText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<TextProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement | HTMLSpanElement> & import("../..").ForwardProps, "ref"> & {
+    ref?: ((instance: HTMLHeadingElement | HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLHeadingElement | HTMLSpanElement> | null | undefined;
+}, {
     variant: TextProps["variant"];
-}, never>;
-export declare const StyledAppHeaderOperator: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
-export declare const StyledAppHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {
+}>> & string & Omit<import("../..").ForwardRefForwardPropsComponent<TextProps>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledAppHeaderOperator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
+export declare const StyledAppHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {
     hideTitle: boolean;
     drawerOpen: boolean;
-}, never>;
+}>> & string;
 //# sourceMappingURL=AppHeader.styles.d.ts.map

package/lib/components/AppShell/AppHeader.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"AAsBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIzC,eAAO,MAAM,qBAAqB,yGAIhC,CAAC;AAIH,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;SA2BjE,CAAC;AAIH,eAAO,MAAM,yBAAyB;qBAAkC,OAAO;SA2D9E,CAAC;AAIF,eAAO,MAAM,qBAAqB,yGAEjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,yGAI9B,CAAC;AAGH,eAAO,MAAM,mBAAmB;aAA2B,SAAS,CAAC,SAAS,CAAC;SA8B7E,CAAC;AAIH,eAAO,MAAM,uBAAuB,4GAQnC,CAAC;AAIF,eAAO,MAAM,eAAe;eAA8B,OAAO;gBAAc,OAAO;SAkErF,CAAC"}
+{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppHeader.styles.ts"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAIzC,eAAO,MAAM,qBAAqB,6NAIhC,CAAC;AAIH,eAAO,MAAM,mBAAmB;gBAA4B,OAAO;YA2BjE,CAAC;AAIH,eAAO,MAAM,yBAAyB;qBAAkC,OAAO;YA0D9E,CAAC;AAIF,eAAO,MAAM,qBAAqB,6NAEjC,CAAC;AAEF,eAAO,MAAM,mBAAmB,6NAI9B,CAAC;AAGH,eAAO,MAAM,mBAAmB;;;aAA2B,SAAS,CAAC,SAAS,CAAC;8HAyC7E,CAAC;AAIH,eAAO,MAAM,uBAAuB,yOAQnC,CAAC;AAIF,eAAO,MAAM,eAAe;eAA8B,OAAO;gBAAc,OAAO;YAkErF,CAAC"}

package/lib/components/AppShell/AppHeader.styles.js

@@ -1,6 +1,6 @@
 import { mix, rgba, transparentize } from 'polished';
 import styled, { css } from 'styled-components';
-import { calculateFontSize, getHoverColors, calculateForegroundColor, calculateBackgroundAndContrastColor } from '../../styles';
+import { calculateFontSize, getHoverColors, calculateForegroundColor } from '../../styles';
 import { defaultThemeProp } from '../../theme';
 import { tryCatch } from '../../utils';
 import { StyledImage } from '../Image';
@@ -47,7 +47,6 @@ export const StyledAppHeaderInfo = styled.div(({ centerLogo, theme }) => {
 StyledAppHeaderInfo.defaultProps = defaultThemeProp;
 export const StyledAppHeaderSearchForm = styled.form(({ isMediumOrAbove, theme: { base: { animation, palette }, components: { 'app-shell': { header: { background: headerBg, 'foreground-color': headerFgColor } } } } }) => {
     const foregroundColor = calculateForegroundColor(headerBg, headerFgColor);
-    const { backgroundColor } = calculateBackgroundAndContrastColor(headerBg, headerFgColor);
     return css `
       max-width: 33vw;
       min-width: 10rem;
@@ -73,19 +72,19 @@ export const StyledAppHeaderSearchForm = styled.form(({ isMediumOrAbove, theme:
       `}
       &:not([focused]) {
         ${StyledSearchInput} {
-          background: ${backgroundColor};
+          background: transparent;
           ${StyledSearchButton} {
-            background: ${backgroundColor};
+            background: transparent;
             color: ${foregroundColor};
           }
 
           ${StyledSearchTextInput} {
-            background: ${backgroundColor};
+            background: transparent;
             color: ${foregroundColor};
           }
 
           ${StyledSearchFiltersButton} {
-            background: ${backgroundColor};
+            background: transparent;
             color: ${foregroundColor};
           }
         }
@@ -105,7 +104,9 @@ StyledAppHeaderLogo.defaultProps = defaultThemeProp;
 export const StyledAppHeaderText = styled(Text)(({ theme, variant }) => {
     const headerBg = theme.components['app-shell'].header.background;
     const headerFgColor = theme.components['app-shell'].header['foreground-color'];
-    const foregroundColor = calculateForegroundColor(headerBg, headerFgColor);
+    const foregroundColor = theme.components['app-shell'].header['app-name-color'] === 'auto'
+        ? calculateForegroundColor(headerBg, headerFgColor)
+        : theme.components['app-shell'].header['app-name-color'];
     const secondaryColor = tryCatch(() => rgba(foregroundColor ?? theme.base.palette['foreground-color'], theme.base.transparency['transparent-2']));
     const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);
     return css `
@@ -113,13 +114,21 @@ export const StyledAppHeaderText = styled(Text)(({ theme, variant }) => {
     overflow: hidden;
     white-space: nowrap;
     color: ${variant === 'secondary' ? secondaryColor : foregroundColor};
-    font-size: ${fontSize[theme.components.text['brand-primary']['font-size']]};
     font-family: ${theme.components.text['brand-primary']['font-family']};
 
-    ${variant !== 'secondary' &&
+    ${variant === 'primary' &&
         css `
+      font-size: ${fontSize[theme.components.text['brand-primary']['font-size']]};
       font-weight: ${theme.components.text['brand-primary']['font-weight']};
     `}
+
+    ${variant === 'secondary' &&
+        css `
+      display: inline;
+      margin-inline-start: ${theme.base.spacing};
+      font-size: ${fontSize};
+      align-self: flex-end;
+    `}
   `;
 });
 StyledAppHeaderText.defaultProps = defaultThemeProp;