@it-holding-ui/atomic 9.20.0 → 9.22.0

package/build/atomic/src/ITHTextEditor/ITHTextEditor.hooks.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
-import type ReactQuill from 'react-quill';
+import { default as ReactQuill } from 'react-quill';
 export declare const useEditorRtlFormatEffect: () => {
-    editorRef: import("react").MutableRefObject<ReactQuill | null>;
+    editorRef: import('react').MutableRefObject<ReactQuill | null>;
     handleRefNodeChange: (node: ReactQuill | null) => void;
 };

package/build/atomic/src/ITHTextEditor/ITHTextEditor.types.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 import { ReactQuillProps } from 'react-quill';
-import type { ClipboardStatic, Key, RangeStatic } from 'quill';
+import { ClipboardStatic, Key, RangeStatic } from 'quill';
 import { ITHCustomToolbarProps } from './ITHCustomToolbar';
 export declare class ITHEditorBlot {
     static blotName: string;

package/build/atomic/src/ITHTileSelect/ITHTileSelect.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
+import { default as React } from 'react';
 import { ITHTileSelectProps } from './ITHTileSelect.types';
-import './ITHTileSelect.scss';
 /**
  * A grid of tiles, one of which is the answer.
  *

package/build/atomic/src/ITHTileSelect/ITHTileSelect.types.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { default as React } from 'react';
 export type ITHTile = {
     /** What comes back from `onChange`. Unique within the grid. */
     value: string;

package/build/atomic/src/ITHTimeline/ITHTimeline.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { ITHTimelineProps } from './ITHTimeline.types';
+/**
+ * Stages on a vertical line, with a marker for where the reader is.
+ *
+ * <p>The line is schematic. Distances between nodes follow the height of
+ * what each node holds, not the kilometres or days between them: a scale
+ * drawn to proportion would put the two stages that matter a screen apart
+ * and crowd the rest into a row of dots.
+ *
+ * <p>The marker sits between nodes, never on the line by itself. A car at
+ * 148 200 km belongs after the 120 000 stage and before the 150 000 one, and
+ * that is where the eye finds it; an exact match — the odometer standing on
+ * a stage — is drawn on that stage, because a second dot for the same place
+ * would read as two events.
+ *
+ * <p>Disclosure is a real button with `aria-expanded`, so a keyboard and a
+ * screen reader open a stage the same way a thumb does. Which stages are
+ * open is the caller's state: the list is drawn from it, not the other way
+ * round, so a screen can keep it per car and restore it on return.
+ */
+export declare const ITHTimeline: React.NamedExoticComponent<ITHTimelineProps>;

package/build/atomic/src/ITHTimeline/ITHTimeline.types.d.ts

@@ -0,0 +1,55 @@
+import { default as React } from 'react';
+export declare enum ITHTimelineNodeStatus {
+    /** Nothing recorded against this stage — a neutral point. */
+    NONE = "none",
+    /** Some of the stage's work has a record, the rest has none. */
+    PARTIAL = "partial",
+    /** Every piece of the stage's work has a record. */
+    DONE = "done",
+    /** The stage coming up — the one the reader is most likely looking for. */
+    NEXT = "next"
+}
+/** One stage on the line: a service visit, a milestone, a step. */
+export type ITHTimelineNode = {
+    id: string;
+    /** «150 000 km», «Step 3», «Dispatched». */
+    title: string;
+    /** The second line: «in 1 800 km · 6 jobs», «No records». */
+    summary?: string;
+    status?: ITHTimelineNodeStatus;
+    /** A short count beside the title: «4 of 6». */
+    badge?: string;
+    /**
+     * What the stage contains, shown when expanded. A node without children
+     * draws no disclosure at all — a chevron that opens nothing is a promise
+     * the component cannot keep.
+     */
+    children?: React.ReactNode;
+    expanded?: boolean;
+};
+/** Where the reader is on the line — the odometer today, the current step. */
+export type ITHTimelineMarker = {
+    /** «You are here · 148 200 km». */
+    label: string;
+    /**
+     * The node the marker follows, by index. −1 puts it before the first
+     * node, `nodes.length − 1` after the last.
+     */
+    afterIndex: number;
+    /**
+     * Draw the marker on the node at `afterIndex` instead of after it — the
+     * exact-match case, where a second dot for the same place would read as
+     * two events.
+     */
+    onNode?: boolean;
+};
+export type ITHTimelineProps = {
+    nodes: ITHTimelineNode[];
+    marker?: ITHTimelineMarker | null;
+    /** Called with the node's id when its disclosure is pressed. */
+    onToggle?: (id: string) => void;
+    /** The line after the last node: «Further schedule not available yet». */
+    tail?: string;
+    ariaLabel?: string;
+    className?: string;
+};

package/build/atomic/src/ITHTimeline/index.d.ts

@@ -0,0 +1,3 @@
+export { ITHTimeline } from './ITHTimeline';
+export type { ITHTimelineMarker, ITHTimelineNode, ITHTimelineProps } from './ITHTimeline.types';
+export { ITHTimelineNodeStatus } from './ITHTimeline.types';

package/build/atomic/src/ITHToggle/ITHToggle.d.ts

@@ -1,3 +1,2 @@
 import { ITHToggleProps } from './ITHToggle.types';
-import './ITHToggle.scss';
 export declare const ITHToggle: ({ className, ...props }: ITHToggleProps) => JSX.Element;

package/build/atomic/src/ITHTrendChart/ITHTrendChart.d.ts

@@ -1,5 +1,4 @@
 import { ITHTrendChartProps } from './ITHTrendChart.types';
-import './ITHTrendChart.scss';
 /**
  * A few measurements over distance or time, as a line with the area under it.
  *

package/build/atomic/src/ITHVideoModal/ITHVideoModal.d.ts

@@ -1,3 +1,2 @@
 import { ITHVideoModalProps } from './ITHVideoModal.types';
-import './ITHVideoModal.scss';
 export declare const ITHVideoModal: ({ className, description, video, onClose, isOpen, ...props }: ITHVideoModalProps) => JSX.Element;

package/build/atomic/src/ITHVideoModal/ITHVideoModal.types.d.ts

@@ -1,5 +1,5 @@
-import { ITHPopoverProps } from "../ITHPopover";
-import { ITHVideoPlayerProps } from "../ITHVideoPlayer";
+import { ITHPopoverProps } from '../ITHPopover';
+import { ITHVideoPlayerProps } from '../ITHVideoPlayer';
 export type ITHVideoModalProps = ITHPopoverProps & {
     description?: string;
     video: ITHVideoPlayerProps;

package/build/atomic/src/ITHVideoModal/ITHVideoModal.utils.d.ts

@@ -1,2 +1,2 @@
-import { ITHVideoPlayerType } from "../ITHVideoPlayer";
+import { ITHVideoPlayerType } from '../ITHVideoPlayer';
 export declare const createThumbnailVideoURLLink: (id: string, type: ITHVideoPlayerType) => string;

package/build/atomic/src/ITHVoiceCapture/ITHVoiceCapture.d.ts

@@ -1,6 +1,5 @@
-import React from 'react';
+import { default as React } from 'react';
 import { ITHVoiceCaptureProps } from './ITHVoiceCapture.types';
-import './ITHVoiceCapture.scss';
 /**
  * The microphone, big enough to be the screen.
  *

package/build/atomic/src/ITHWalletCard/ITHWalletCard.d.ts

@@ -1,3 +1,2 @@
 import { ITHWalletCardProps } from './ITHWalletCard.types';
-import './ITHWalletCard.scss';
 export declare const ITHWalletCard: ({ iconFlag, headerText, headerTextType, headerTextClass, headerContent, description, descriptionType, descriptionClass, expirationDate, expirationDateType, expirationDateClass, text, textType, textClass, version, ...props }: ITHWalletCardProps) => JSX.Element;

package/build/atomic/src/ITHWalletCard/ITHWalletCard.types.d.ts

@@ -1,6 +1,6 @@
 import { ComponentProps, ReactNode } from 'react';
-import { ITHCard } from "../ITHCard";
-import { ITHTextType } from "../ITHText";
+import { ITHCard } from '../ITHCard';
+import { ITHTextType } from '../ITHText';
 export type ITHWalletCardVersion = 'item' | 'small';
 export type ITHWalletCardProps = Omit<ComponentProps<typeof ITHCard>, 'children'> & {
     version?: ITHWalletCardVersion;

package/build/atomic/src/ITHWheelDiagram/ITHWheelDiagram.d.ts

@@ -1,5 +1,4 @@
 import { ITHWheelDiagramProps } from './ITHWheelDiagram.types';
-import './ITHWheelDiagram.scss';
 /**
  * A car from above, with a tyre at each corner that can be coloured, named
  * and tapped.

package/build/atomic/src/Select/ITHNothingFound/ITHNothingFound.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
+import { default as React } from 'react';
 import { ITHNothingFoundProps } from './ITHNothingFound.types';
-import './ITHNothingFound.scss';
 export declare const ITHNothingFound: React.FC<ITHNothingFoundProps>;

package/build/atomic/src/Select/ITHSelect/ITHSelect.d.ts

@@ -1,4 +1,3 @@
 import { ITHSelectProps } from './ITHSelect.types';
-import './ITHSelect.scss';
-import { ITHSelectOption } from "../ITHSelect.types";
+import { ITHSelectOption } from '../ITHSelect.types';
 export declare const ITHSelect: <Option extends ITHSelectOption>({ onFocus, onBlur, label, icon, iconLeft, iconClassName, prefix, prefixIcon, hasError, errorHint, hint, requiredSign, className, sheetClassName, popoverClassName, valueFormatKey, withVirtualScroll, scrollingContainerRef, disabled, withChips, ...props }: ITHSelectProps<Option>) => JSX.Element;

package/build/atomic/src/Select/ITHSelect/ITHSelect.hooks.d.ts

@@ -2,5 +2,5 @@
 export declare const usePopoverStyle: (container: DOMRect | undefined) => Record<string, string>;
 export declare const useInputContainer: () => {
     container: DOMRect | undefined;
-    ref: import("react").RefObject<HTMLDivElement>;
+    ref: import('react').RefObject<HTMLDivElement>;
 };

package/build/atomic/src/Select/ITHSelect/ITHSelect.types.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
-import { ITHInputProps } from "../../ITHInput";
-import { ITHInputFacadeInputProps } from "../../ITHInput/ITHInputFacade/ITHInputFacade.types";
-import { ITHSheetProps } from "../../ITHSheet";
-import { ITHAbstractSelectProps, ITHSelectOption } from "../ITHSelect.types";
-import { ITHSelectPopoverContentProps } from "../ITHSelectPopover/ITHSelectPopover.types";
+import { ITHInputProps } from '../../ITHInput';
+import { ITHInputFacadeInputProps } from '../../ITHInput/ITHInputFacade/ITHInputFacade.types';
+import { ITHSheetProps } from '../../ITHSheet';
+import { ITHAbstractSelectProps, ITHSelectOption } from '../ITHSelect.types';
+import { ITHSelectPopoverContentProps } from '../ITHSelectPopover/ITHSelectPopover.types';
 export type ITHSelectProps<Option extends ITHSelectOption = ITHSelectOption> = ITHAbstractSelectProps<Option> & Pick<ITHInputProps, 'label' | 'icon' | 'iconLeft' | 'iconClassName' | 'prefix' | 'prefixIcon' | 'hasError' | 'errorHint' | 'hint' | 'requiredSign' | 'className'> & Pick<ITHInputFacadeInputProps, 'onBlur' | 'onFocus' | 'withChips'> & Pick<ITHSheetProps, 'closeIconSlot' | 'closeIcon' | 'customButtons' | 'customButtonsSlot'> & Pick<ITHSelectPopoverContentProps<Option>, 'checkboxRadioSlot' | 'withCheckboxRadio' | 'iconSlot'> & {
     sheetClassName?: string;
     popoverClassName?: string;

package/build/atomic/src/Select/ITHSelect.hooks.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
 import { ITHAbstractSelectProps, ITHSelectOption } from './ITHSelect.types';
 export declare const useSelectSearch: <Option extends ITHSelectOption>(items: Option[], withSearch: boolean | undefined) => {
     searchbarProps: {
         value: string;
-        setValue: import("react").Dispatch<import("react").SetStateAction<string>>;
-        onIonChange: (e: import("@ionic/core").IonSearchbarCustomEvent<import("@ionic/core").SearchbarChangeEventDetail>) => void;
+        setValue: import('react').Dispatch<import('react').SetStateAction<string>>;
+        onIonChange: (e: import('@ionic/core').IonSearchbarCustomEvent<import('@ionic/core').SearchbarChangeEventDetail>) => void;
         onIonCancel: () => void;
         onIonClear: () => void;
     };

package/build/atomic/src/Select/ITHSelectItem/ITHSelectItem.d.ts

@@ -1,4 +1,3 @@
 import { ITHSelectItemProps } from './ITHSelectItem.types';
-import './ITHSelectItem.scss';
-import { ITHSelectOption } from "../ITHSelect.types";
+import { ITHSelectOption } from '../ITHSelect.types';
 export declare const ITHSelectItem: <Option extends ITHSelectOption>({ item, inlineDetails, isSelected, withoutCheckMark, onClick, slot, withCheckbox, withRadio, value, checkboxRadioSlot, iconSlot, }: ITHSelectItemProps<Option>) => JSX.Element;

package/build/atomic/src/Select/ITHSelectItem/ITHSelectItem.types.d.ts

@@ -1,4 +1,4 @@
-import { ITHSelectOption } from "..";
+import { ITHSelectOption } from '..';
 export type ITHSelectItemProps<Option extends ITHSelectOption> = {
     item: Option;
     withoutCheckMark?: boolean;

package/build/atomic/src/Select/ITHSelectPopover/ITHSelectPopover.d.ts

@@ -1,7 +1,6 @@
 import { Ref } from 'react';
 import { ITHSelectPopoverContentProps, ITHSelectPopoverProps } from './ITHSelectPopover.types';
-import './ITHSelectPopover.scss';
-import { ITHSelectOption } from "../ITHSelect.types";
+import { ITHSelectOption } from '../ITHSelect.types';
 export declare const ITHSelectPopoverContent: <Option extends ITHSelectOption>({ label, withVirtualScroll, inlineDetails, additionalItems, withoutCheckMark, closePopover, withCheckboxRadio, checkboxRadioSlot, onClose, iconSlot, ...props }: ITHSelectPopoverContentProps<Option>) => JSX.Element;
 export declare const ITHSelectPopover: <Option extends ITHSelectOption>(props: ITHSelectPopoverProps<Option> & {
     ref: Ref<HTMLIonPopoverElement>;

package/build/atomic/src/Select/ITHSelectPopover/ITHSelectPopover.types.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 import { IonPopover } from '@ionic/react';
-import { ITHAbstractSelectProps, ITHSelectOption } from "../ITHSelect.types";
-import { ITHSelectItemProps } from "../ITHSelectItem";
+import { ITHAbstractSelectProps, ITHSelectOption } from '../ITHSelect.types';
+import { ITHSelectItemProps } from '../ITHSelectItem';
 export type ITHSelectPopoverContentProps<Option extends ITHSelectOption> = ITHAbstractSelectProps<Option> & Pick<ITHSelectItemProps<Option>, 'checkboxRadioSlot' | 'iconSlot'> & {
     label?: React.ReactText;
     withVirtualScroll?: boolean;

package/build/atomic/src/Select/ITHSelectSheet/ITHSelectSheet.d.ts

@@ -1,4 +1,3 @@
 import { ITHSelectSheetProps } from './ITHSelectSheet.types';
-import './ITHSelectSheet.scss';
-import { ITHSelectOption } from "../ITHSelect.types";
+import { ITHSelectOption } from '../ITHSelect.types';
 export declare const ITHSelectSheet: <Option extends ITHSelectOption>({ hasHeader, onClose, inlineDetails, additionalItems, withVirtualScroll, withoutCheckMark, withCheckboxRadio, checkboxRadioSlot, iconSlot, ...props }: ITHSelectSheetProps<Option>) => JSX.Element;

package/build/atomic/src/Select/ITHSelectSheet/ITHSelectSheet.types.d.ts

@@ -1,6 +1,6 @@
-import { ITHSheetProps } from "../../ITHSheet";
-import { ITHAbstractSelectProps, ITHSelectOption } from "../ITHSelect.types";
-import { ITHSelectPopoverContentProps } from "../ITHSelectPopover/ITHSelectPopover.types";
+import { ITHSheetProps } from '../../ITHSheet';
+import { ITHAbstractSelectProps, ITHSelectOption } from '../ITHSelect.types';
+import { ITHSelectPopoverContentProps } from '../ITHSelectPopover/ITHSelectPopover.types';
 export type ITHSelectSheetProps<Option extends ITHSelectOption = ITHSelectOption> = Omit<ITHSheetProps, 'searchValue' | 'onSearchChange' | 'onSearchCancel' | 'onSearchClear'> & ITHAbstractSelectProps<Option> & Pick<ITHSelectPopoverContentProps<Option>, 'checkboxRadioSlot' | 'withCheckboxRadio' | 'iconSlot'> & {
     title?: string;
     withVirtualScroll?: boolean;

package/build/atomic/src/index.d.ts

@@ -9,6 +9,8 @@ export { ITHAddItem } from './ITHAddItem';
 export type { ITHAvatarProps } from './ITHAvatar';
 export { ITHAvatar } from './ITHAvatar';
 export { ITHBadge, ITHBadgeColor } from './ITHBadge';
+export type { ITHBar, ITHBarChartProps, ITHBarSegment } from './ITHBarChart';
+export { ITHBarChart, ITHBarChartTone } from './ITHBarChart';
 export type { ITHBreadcrumbsProps } from './ITHBreadcrumbs';
 export { ITHBreadcrumbs } from './ITHBreadcrumbs';
 export type { ITHBubbleMessageProps } from './ITHBubbleMessage';
@@ -84,6 +86,8 @@ export { ITHText, ITHTextType } from './ITHText';
 export { ITHTextEditor } from './ITHTextEditor';
 export type { ITHTile, ITHTileSelectProps } from './ITHTileSelect';
 export { ITHTileSelect, ITHTileSelectSize } from './ITHTileSelect';
+export type { ITHTimelineMarker, ITHTimelineNode, ITHTimelineProps } from './ITHTimeline';
+export { ITHTimeline, ITHTimelineNodeStatus } from './ITHTimeline';
 export { ITHToggle } from './ITHToggle';
 export type { ITHTrendChartProps, ITHTrendPoint } from './ITHTrendChart';
 export { ITHTrendChart, ITHTrendChartTone } from './ITHTrendChart';