@it-holding-ui/atomic 9.19.1 → 9.21.0

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

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { ITHTileSelectProps } from './ITHTileSelect.types';
+/**
+ * A grid of tiles, one of which is the answer.
+ *
+ * <p>For choices short enough to show whole — a dozen expense categories, the
+ * doors on a dashboard. Everything is on screen at once, which is the point:
+ * a list that scrolls asks the person to remember what they have already
+ * passed, and a select asks them to open it first. Past roughly sixteen
+ * entries that stops being true and a searchable select is the better control.
+ *
+ * <p>Buttons in a group rather than radios: the tiles are pressed, and with
+ * `multiple` there is no single answer for a radio to hold. `aria-pressed`
+ * carries the state either way, so the same markup reads correctly for one
+ * choice and for several.
+ *
+ * <p>No `value` at all means nothing is chosen and nothing can look chosen —
+ * that is the grid used as navigation, where each tile opens a screen rather
+ * than answering a question.
+ */
+export declare const ITHTileSelect: React.NamedExoticComponent<ITHTileSelectProps>;

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

@@ -0,0 +1,45 @@
+import { default as React } from 'react';
+export type ITHTile = {
+    /** What comes back from `onChange`. Unique within the grid. */
+    value: string;
+    label: string;
+    /** Drawn above the label. An icon component, or a URL to one. */
+    icon?: string | JSX.Element;
+    /** The quiet second line — a sum, a count, a date. Optional. */
+    details?: string;
+    disabled?: boolean;
+};
+export declare enum ITHTileSelectSize {
+    /** A square tile with the icon centred over the label — the chooser. */
+    MEDIUM = "medium",
+    /** A shorter tile with the icon and label to the left — a row of doors. */
+    COMPACT = "compact"
+}
+export type ITHTileSelectProps = {
+    tiles: ITHTile[];
+    /**
+     * What is chosen: one value, or several when `multiple` is set.
+     *
+     * <p>Left out entirely, nothing is chosen and nothing ever looks chosen —
+     * which is how a grid of doors behaves, as opposed to a grid of answers.
+     */
+    value?: string | string[];
+    multiple?: boolean;
+    /** How many across. Three is the phone default; four needs a tablet. */
+    columns?: 2 | 3 | 4;
+    size?: ITHTileSelectSize;
+    /**
+     * What the grid as a whole is called for a screen reader — "Expense
+     * category". Without it the tiles are announced one by one with nothing
+     * saying what the choice is about.
+     */
+    ariaLabel?: string;
+    /**
+     * Called with the tile's value. With `multiple`, the caller keeps the
+     * array: this component says which tile was pressed, not what the set
+     * should become, because only the caller knows whether a second choice
+     * adds or replaces.
+     */
+    onChange?: (value: string, event: React.MouseEvent<HTMLButtonElement>) => void;
+    className?: string;
+};

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

@@ -0,0 +1,3 @@
+export { ITHTileSelect } from './ITHTileSelect';
+export type { ITHTile, ITHTileSelectProps } from './ITHTileSelect.types';
+export { ITHTileSelectSize } from './ITHTileSelect.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';
@@ -82,6 +84,8 @@ export { ITHStarRating } from './ITHStarRating';
 export { ITHStepper } from './ITHStepper';
 export { ITHText, ITHTextType } from './ITHText';
 export { ITHTextEditor } from './ITHTextEditor';
+export type { ITHTile, ITHTileSelectProps } from './ITHTileSelect';
+export { ITHTileSelect, ITHTileSelectSize } from './ITHTileSelect';
 export { ITHToggle } from './ITHToggle';
 export type { ITHTrendChartProps, ITHTrendPoint } from './ITHTrendChart';
 export { ITHTrendChart, ITHTrendChartTone } from './ITHTrendChart';