@chayns-components/core 5.3.9 → 5.3.11-alpha.0

package/lib/types/components/slider-button/useSliderButtonPopupKeyboard.d.ts

@@ -0,0 +1,17 @@
+import type { KeyboardEventHandler, MutableRefObject } from 'react';
+import type { PopupRef } from '../../types/popup';
+import type { SliderButtonItem } from '../../types/slider-button';
+type UseSliderButtonPopupKeyboardProps = {
+    isPopupOpen: boolean;
+    popupItems: SliderButtonItem[];
+    currentPopupId: string;
+    shownItemsCount: number;
+    popupItemRefs: MutableRefObject<Array<HTMLDivElement | null>>;
+    popupRef: MutableRefObject<PopupRef | null>;
+    focusThumb: VoidFunction;
+    onSelectPopupItem: (id: string, index: number) => void;
+};
+export declare const useSliderButtonPopupKeyboard: ({ isPopupOpen, popupItems, currentPopupId, shownItemsCount, popupItemRefs, popupRef, focusThumb, onSelectPopupItem, }: UseSliderButtonPopupKeyboardProps) => {
+    handlePopupKeyDown: KeyboardEventHandler<HTMLDivElement>;
+};
+export {};

package/lib/types/components/slider-button/useSliderButtonThumbKeyboard.d.ts

@@ -0,0 +1,13 @@
+import type { KeyboardEventHandler } from 'react';
+import type { SliderButtonItem } from '../../types/slider-button';
+type UseSliderButtonThumbKeyboardProps = {
+    currentId: string;
+    currentIndex: number;
+    shownItemsCount: number;
+    items: SliderButtonItem[];
+    onSelectThumbItem: (id: string, index: number) => void;
+};
+export declare const useSliderButtonThumbKeyboard: ({ currentId, currentIndex, shownItemsCount, items, onSelectThumbItem, }: UseSliderButtonThumbKeyboardProps) => {
+    handleThumbKeyDown: KeyboardEventHandler<HTMLDivElement>;
+};
+export {};

package/lib/types/components/tag-input/TagInput.d.ts

@@ -21,6 +21,10 @@ export type TagInputProps = {
      * Function to be executed when the input is focused.
      */
     onFocus?: FocusEventHandler;
+    /**
+     * Enables keyboard-only focus highlighting.
+     */
+    shouldEnableKeyboardHighlighting?: boolean;
     /**
      * Function to be executed when a tag is removed.
      */

package/lib/types/components/tag-input/TagInput.styles.d.ts

@@ -1,13 +1,22 @@
-export declare const StyledTagInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$shouldChangeColor"> & {
+type StyledTagInputTagFocusWrapperProps = {
+    $isSelected: boolean;
+    $shouldShowKeyboardHighlighting: boolean;
+};
+export declare const StyledTagInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$shouldShowKeyboardHighlighting" | "$shouldChangeColor" | "$shouldShowTagHighlighting"> & {
     $shouldChangeColor: boolean;
+    $shouldShowKeyboardHighlighting: boolean;
+    $shouldShowTagHighlighting: boolean;
 } & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
-}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$shouldChangeColor"> & {
+}, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$shouldShowKeyboardHighlighting" | "$shouldChangeColor" | "$shouldShowTagHighlighting"> & {
     $shouldChangeColor: boolean;
+    $shouldShowKeyboardHighlighting: boolean;
+    $shouldShowTagHighlighting: boolean;
 } & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>>> & string;
 export declare const StyledTagInputTagWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const StyledTagInputTagFocusWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledTagInputTagFocusWrapperProps> & StyledTagInputTagFocusWrapperProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof StyledTagInputTagFocusWrapperProps> & StyledTagInputTagFocusWrapperProps, never>>> & string;
 export declare const StyledTagInputTagWrapperText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>>> & string;
 export declare const StyledTagInputTagInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "theme"> & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
@@ -15,3 +24,4 @@ export declare const StyledTagInputTagInput: import("styled-components/dist/type
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>>> & string;
 export declare const StyledTagInputIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export {};

package/lib/types/components/text-area/TextArea.d.ts

@@ -52,6 +52,10 @@ export type TextAreaProps = {
      * Provide custom colors to the TextArea Component
      */
     colors?: TextAreaColors;
+    /**
+     * Enables keyboard-only focus highlighting.
+     */
+    shouldEnableKeyboardHighlighting?: boolean;
 };
 declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export default TextArea;

package/lib/types/components/text-area/TextArea.styles.d.ts

@@ -54,3 +54,4 @@ export declare const StyledTextAreaLabel: import("styled-components/dist/types")
 } & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>>> & string;
+export declare const StyledRightElementWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;

package/lib/types/components/truncation/Truncation.d.ts

@@ -29,6 +29,10 @@ export type TruncationProps = {
      * Function to be executed when the component is expanding or collapsing.
      */
     onChange?: (event: MouseEvent<HTMLAnchorElement>, isOpen: boolean) => void;
+    /**
+     * Enables keyboard-only focus highlighting.
+     */
+    shouldEnableKeyboardHighlighting?: boolean;
 };
 declare const Truncation: FC<TruncationProps>;
 export default Truncation;

package/lib/types/components/truncation/Truncation.styles.d.ts

@@ -1,9 +1,9 @@
 import { ClampPosition } from '../../types/truncation';
 export declare const StyledTruncation: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const StyledMotionTruncationContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
 }, never> & Partial<Pick<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & React.RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | null | undefined;
+    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
 }, never>>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof React.Component<any, {}, any>>;
 export declare const StyledTruncationPseudoContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export declare const StyledTruncationClampWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "theme" | "$position"> & {
@@ -15,4 +15,9 @@ export declare const StyledTruncationClampWrapper: import("styled-components/dis
 } & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>>> & string;
+type StyledTruncationClampProps = {
+    $shouldShowKeyboardHighlighting: boolean;
+};
+export declare const StyledTruncationClampFocusWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$shouldShowKeyboardHighlighting"> & StyledTruncationClampProps, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$shouldShowKeyboardHighlighting"> & StyledTruncationClampProps, never>>> & string;
 export declare const StyledTruncationClamp: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never> & Partial<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>>> & string;
+export {};

package/lib/types/hooks/useKeyboardFocusHighlighting.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Tracks whether focus highlighting should be visible for keyboard navigation.
+ * Keyboard mode is enabled via Tab and reset by mouse interaction.
+ */
+export declare const useKeyboardFocusHighlighting: (isEnabledProp?: boolean) => boolean;

package/lib/types/index.d.ts

@@ -100,3 +100,4 @@ export { ComboBoxSize } from './components/combobox/ComboBox.types';
 export type { IComboBoxItem as ComboBoxItem, ComboBoxTextStyles, IComboBoxItems as ComboBoxItems, ComboBoxRef, } from './components/combobox/ComboBox.types';
 export { default as Skeleton } from './components/skeleton';
 export { SkeletonAnimationType } from './components/skeleton/types';
+export { default as Masonry } from './components/masonry/Masonry';

package/lib/types/utils/file.d.ts

@@ -1,4 +1,4 @@
-import { UploadedFile } from '../components/file-select/FileSelect';
+import type { UploadedFile } from '../components/file-select/FileSelect';
 export declare const hasDuplicate: <T>(items: T[], newItem: T, comparator: (a: T, b: T) => boolean) => boolean;
 interface FilerDuplicateFileOptions {
     files: File[];

package/lib/types/utils/keyboardFocusHighlighting.styles.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Shared focus ring for components with keyboard-only highlighting.
+ * Apply this only when keyboard highlighting is enabled/active.
+ */
+export declare const keyboardFocusHighlightingRingCss: import("styled-components").RuleSet<object>;
+/**
+ * Circular focus ring variant for round controls (e.g. RadioButton).
+ */
+export declare const keyboardFocusHighlightingCircleRingCss: import("styled-components").RuleSet<object>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.3.9",
+    "version": "5.3.11-alpha.0",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -88,5 +88,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "d47204bde2d504689320e48b9f2520bd90338ba6"
+    "gitHead": "f6a05afc99eff8ae273e80334b5d09f8f555c8aa"
 }