@laerdal/life-react-components 3.5.1-dev.16 → 3.5.1-dev.18

package/dist/src/InputFields/QuickSearch.js

@@ -1,92 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import IconButton, { IconButtonStyledSecondary } from '../Button/Iconbutton';
-import { SearchIconWrapper, StyledIcon } from './styling';
-import { Size } from '../types';
-import { COLORS, LoadingIndicator } from '..';
-import { SystemIcons } from '../icons';
-import SearchBarInput from './components/SearchBarInput';
-import SearchField, { StyledSearchField } from './components/SearchField';
-var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n\n  ", " {\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n    background-color: transparent;\n\n    &.small {\n      width: 48px;\n    }\n\n    &.medium {\n      width: 56px;\n    }\n\n    &.expanded {\n      width: 100%;\n    }\n\n    box-shadow: none;\n\n    &:hover {\n      box-shadow: none;\n    }\n\n    &.expanded {\n      background-color: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n\n    &.expanded:hover,\n    &.expanded:focus-within {\n      box-shadow: inset 0 0 0 2px ", ";\n    }\n  }\n\n  ", " {\n    pointer-events: ", ";\n  }\n"], ["\n  width: 100%;\n\n  ", " {\n    transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;\n\n    background-color: transparent;\n\n    &.small {\n      width: 48px;\n    }\n\n    &.medium {\n      width: 56px;\n    }\n\n    &.expanded {\n      width: 100%;\n    }\n\n    box-shadow: none;\n\n    &:hover {\n      box-shadow: none;\n    }\n\n    &.expanded {\n      background-color: ", ";\n      box-shadow: inset 0 0 0 1px ", ";\n    }\n\n    &.expanded:hover,\n    &.expanded:focus-within {\n      box-shadow: inset 0 0 0 2px ", ";\n    }\n  }\n\n  ", " {\n    pointer-events: ", ";\n  }\n"])), StyledSearchField, COLORS.white, COLORS.neutral_400, COLORS.primary_800, IconButtonStyledSecondary, function (props) { return (props.shouldNotInteract ? 'none' : 'auto'); });
-var QuickSearch = function (_a) {
-    var id = _a.id, searchTerm = _a.searchTerm, setSearchTerm = _a.setSearchTerm, enterSearch = _a.enterSearch, removeSearch = _a.removeSearch, placeholder = _a.placeholder, performSearchLabel = _a.performSearchLabel, disabled = _a.disabled, onKeyDown = _a.onKeyDown, size = _a.size, margin = _a.margin, loading = _a.loading;
-    var searchFieldRef = React.useRef(null);
-    var searchFieldInputRef = React.useRef(null);
-    var _b = React.useState({
-        visible: false,
-    }), searchFieldVisible = _b[0], setSearchFieldVisible = _b[1];
-    var handleClickOutside = function (e) {
-        if ((searchFieldRef === null || searchFieldRef === void 0 ? void 0 : searchFieldRef.current) && !searchFieldRef.current.contains(e.target)) {
-            if ((searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) && !(searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.length)) {
-                setSearchFieldVisible({ visible: false });
-            }
-        }
-    };
-    var handleKeyDown = function (e) {
-        if (onKeyDown) {
-            onKeyDown(e);
-        }
-        if (e.key === 'Escape') {
-            if ((searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) && !(searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.length)) {
-                setSearchFieldVisible({ visible: false });
-            }
-        }
-    };
-    var handleBlur = function (e) {
-        var _a;
-        if (!searchTerm && (!e.relatedTarget || !((_a = searchFieldRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.relatedTarget)))) {
-            setSearchFieldVisible({ visible: false });
-        }
-    };
-    var handleSearchIconAction = function (e) {
-        if (!(searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible)) {
-            setSearchFieldVisible({
-                visible: !searchFieldVisible.visible,
-                focus: !searchFieldVisible.visible && (e === null || e === void 0 ? void 0 : e.detail) !== 1,
-            });
-        }
-    };
-    // set search field visibility on search term change
-    React.useEffect(function () {
-        if (!!(searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.length) && !(searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible)) {
-            setSearchFieldVisible({ visible: true, focus: false });
-        }
-    }, [searchTerm, searchFieldVisible]);
-    // register click outside handler
-    React.useEffect(function () {
-        document.addEventListener('click', handleClickOutside);
-        return function () {
-            document.removeEventListener('click', handleClickOutside);
-        };
-    }, []);
-    // focus search input on visibility change
-    React.useEffect(function () {
-        var _a;
-        if (searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) {
-            (_a = searchFieldInputRef === null || searchFieldInputRef === void 0 ? void 0 : searchFieldInputRef.current) === null || _a === void 0 ? void 0 : _a.focus({ focusVisible: searchFieldVisible.focus });
-        }
-    }, [searchFieldVisible.visible, searchFieldInputRef]);
-    return (React.createElement(Wrapper, { shouldNotInteract: searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible },
-        React.createElement(SearchField, { ref: searchFieldRef, id: id, size: size, searchTerm: searchTerm, style: {
-                margin: margin,
-            }, onBlur: handleBlur, className: (searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) ? 'expanded' : '' },
-            (searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) && (React.createElement(SearchBarInput, { placeholder: disabled ? '' : placeholder, id: id, ref: searchFieldInputRef, disabled: disabled, onKeyDown: handleKeyDown, size: size, setSearchTerm: function (term) { return setSearchTerm(term); }, searchTerm: searchTerm, enterSearch: enterSearch, focusParentRefs: [searchFieldRef] })),
-            React.createElement(SearchIconWrapper, { className: size ? size : '', role: "button", "aria-label": performSearchLabel },
-                React.createElement(IconButton, { id: "".concat(id, "_Searchbutton"), dataTestId: "".concat(id, "_Searchbutton"), variant: "secondary", shape: "circular", tabIndex: (searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) ? -1 : 0, action: handleSearchIconAction },
-                    React.createElement(SystemIcons.Search, { size: "24px", color: disabled ? COLORS.neutral_300 : COLORS.neutral_600 }))),
-            React.createElement(StyledIcon, { className: size ? size : '', role: "button", hidden: !searchTerm || !(searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) },
-                React.createElement(IconButton, { id: "".concat(id, "_Clearicon"), dataTestId: "".concat(id, "_Clearicon"), variant: "secondary", shape: "circular", action: function (e) {
-                        var _a;
-                        removeSearch(e);
-                        (_a = searchFieldInputRef === null || searchFieldInputRef === void 0 ? void 0 : searchFieldInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                    } },
-                    React.createElement(SystemIcons.Clear, { size: "24px", color: disabled ? COLORS.neutral_300 : COLORS.neutral_600 }))),
-            loading && (searchFieldVisible === null || searchFieldVisible === void 0 ? void 0 : searchFieldVisible.visible) && (React.createElement(StyledIcon, { className: size ? size : '' },
-                React.createElement(LoadingIndicator, { size: Size.Small, color: COLORS.neutral_600 }))))));
-};
-export default QuickSearch;
-var templateObject_1;

package/dist/src/InputFields/RadioButton.d.ts

@@ -1,55 +0,0 @@
-import * as React from 'react';
-import { Size, Testable } from '../types';
-export declare type RadioButtonProps = Testable & Omit<React.HTMLAttributes<HTMLDivElement>, 'tabIndex' | 'className' | 'onClick' | 'onMouseDown' | 'onKeyDown'> & {
-    /** Optional. Id of the component */
-    id?: string;
-    /** Required. Current state of the component. */
-    selected: boolean;
-    /** Required. Handler to be called when user selects/unselected the radio button. */
-    select: (selected: boolean) => void;
-    /** Optional. Label to be shown on the right side of the radio button. */
-    label?: string;
-    /** Optional. Secondary label to be shown under the main 'label' */
-    additionalLabel?: string;
-    /** Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. */
-    invalid?: boolean;
-    /** Optional. If disabled, user can not interact with the component. */
-    disabled?: boolean;
-    /** Optional. If set, then 'pointer-events: none' will be set on the component. */
-    iconPointerEventsTransparent?: boolean;
-    /** Optional. Margin style attribute to be set on the top level tag of the component. */
-    margin?: string;
-    /** Optional. Size of the radio button, defaults to 'medium'. */
-    size?: Size.Small | Size.Medium | Size.Large;
-    /** Optional. TabIndex attribute to be set on the component. */
-    tabIndexVal?: number;
-    /** Optional. Extra classname to be set on the container of the component. */
-    className?: string;
-};
-declare const RadioButton: React.ForwardRefExoticComponent<Testable & Omit<React.HTMLAttributes<HTMLDivElement>, "className" | "tabIndex" | "onKeyDown" | "onClick" | "onMouseDown"> & {
-    /** Optional. Id of the component */
-    id?: string | undefined;
-    /** Required. Current state of the component. */
-    selected: boolean;
-    /** Required. Handler to be called when user selects/unselected the radio button. */
-    select: (selected: boolean) => void;
-    /** Optional. Label to be shown on the right side of the radio button. */
-    label?: string | undefined;
-    /** Optional. Secondary label to be shown under the main 'label' */
-    additionalLabel?: string | undefined;
-    /** Optional. If set, then if radiobutton is in unselected state it will be shown in invalid state. */
-    invalid?: boolean | undefined;
-    /** Optional. If disabled, user can not interact with the component. */
-    disabled?: boolean | undefined;
-    /** Optional. If set, then 'pointer-events: none' will be set on the component. */
-    iconPointerEventsTransparent?: boolean | undefined;
-    /** Optional. Margin style attribute to be set on the top level tag of the component. */
-    margin?: string | undefined;
-    /** Optional. Size of the radio button, defaults to 'medium'. */
-    size?: Size.Small | Size.Medium | Size.Large | undefined;
-    /** Optional. TabIndex attribute to be set on the component. */
-    tabIndexVal?: number | undefined;
-    /** Optional. Extra classname to be set on the container of the component. */
-    className?: string | undefined;
-} & React.RefAttributes<HTMLDivElement>>;
-export default RadioButton;

package/dist/src/InputFields/RadioButton.js

@@ -1,54 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import styled from 'styled-components';
-import { SystemIcons } from '../icons';
-import { COLORS, ComponentTextStyle, focusStyles } from '../styles';
-import { Size } from '../types';
-import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentXXSStyling } from '../styles';
-import { defaultOnMouseDownHandler } from '../common';
-var StyledRadioButton = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ", "\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ", ";\n    }\n\n    .radio-button-icon svg {\n      color: ", ";\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"], ["\n  display: flex;\n  width: 100%;\n  min-height: 48px;\n  min-width: 48px;\n\n  ", "\n  cursor: pointer;\n\n  color: ", ";\n\n  .pointerTransparent {\n    pointer-events: none;\n  }\n\n  .radio-button-icon {\n    margin: 6px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 36px;\n    min-width: 36px;\n    border-radius: 50%;\n\n    svg {\n      color: ", ";\n    }\n  }\n\n  .radio-button-label {\n    user-select: none;\n    display: flex;\n    flex-direction: column;\n\n    label {\n      cursor: inherit;\n    }\n\n    span {\n      ", "\n    }\n  }\n\n  &.small {\n    ", "\n    .radio-button-label {\n      padding-top: 14px;\n    }\n  }\n\n  &.medium {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &.large {\n    ", "\n    .radio-button-label {\n      padding-top: 12px;\n    }\n  }\n\n  &:not(.disabled):focus {\n    ", "\n  }\n\n  &:not(.disabled):hover {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &:not(.disabled):active {\n    .radio-button-icon {\n      background: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    color: ", ";\n\n    .radio-button-icon,\n    .radio-button-label {\n      pointer-events: none;\n    }\n\n    .radio-button-icon {\n      background-color: ", ";\n    }\n\n    .radio-button-icon svg {\n      color: ", ";\n    }\n  }\n\n  &.dropdown-hover:not(.disabled) {\n    .radio-button-icon {\n      background-color: ", ";\n\n      svg {\n        color: ", ";\n      }\n    }\n  }\n"])), function (props) { return (props.margin ? "margin: ".concat(props.margin, ";") : ''); }, COLORS.black, function (props) { return (props.selected ? COLORS.primary_500 : props.invalid ? COLORS.critical_400 : COLORS.neutral_600); }, ComponentXXSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentLStyling(ComponentTextStyle.Regular, COLORS.black), focusStyles, COLORS.primary_20, COLORS.primary_700, COLORS.primary_100, COLORS.primary_800, COLORS.neutral_300, COLORS.white, COLORS.neutral_300, COLORS.primary_20, COLORS.primary_700);
-var RadioButton = React.forwardRef(function (_a, ref) {
-    var id = _a.id, selected = _a.selected, label = _a.label, additionalLabel = _a.additionalLabel, invalid = _a.invalid, select = _a.select, disabled = _a.disabled, margin = _a.margin, iconPointerEventsTransparent = _a.iconPointerEventsTransparent, size = _a.size, tabIndexVal = _a.tabIndexVal, className = _a.className, dataTestId = _a.dataTestId, rest = __rest(_a, ["id", "selected", "label", "additionalLabel", "invalid", "select", "disabled", "margin", "iconPointerEventsTransparent", "size", "tabIndexVal", "className", "dataTestId"]);
-    var onKeyPress = function (e) {
-        if (e.keyCode === 13 && !disabled) {
-            select(!selected);
-        }
-    };
-    size = size !== null && size !== void 0 ? size : Size.Medium;
-    var cls = "".concat(size, " ").concat(className || '', " ").concat(disabled ? ' disabled' : '');
-    return (React.createElement(StyledRadioButton, __assign({ key: id, margin: margin, ref: ref, onClick: function () { return !disabled && select(!selected); }, onMouseDown: defaultOnMouseDownHandler, onKeyDown: onKeyPress, disabled: disabled, className: cls, tabIndex: disabled ? -1 : (tabIndexVal ? tabIndexVal : 0), invalid: invalid, selected: selected }, rest),
-        React.createElement("div", { className: 'radio-button-icon', id: id, "data-testid": dataTestId },
-            selected && React.createElement(SystemIcons.RadioButtonOn, { className: iconPointerEventsTransparent ? 'pointerTransparent' : '', size: "24px" }),
-            !selected &&
-                React.createElement(SystemIcons.RadioButtonOff, { className: iconPointerEventsTransparent ? 'pointerTransparent' : '', size: "24px" })),
-        React.createElement("div", { className: 'radio-button-label' },
-            label && React.createElement("label", { htmlFor: id }, label),
-            additionalLabel !== undefined && React.createElement("span", null, additionalLabel))));
-});
-export default RadioButton;
-var templateObject_1;

package/dist/src/InputFields/ResponsiveComponentWrapper.d.ts

@@ -1,11 +0,0 @@
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-import { Size } from '../types';
-declare type LabelProps = {
-    size?: Size.Small | Size.Medium;
-    children?: any;
-};
-declare const ReponsiveComponentWrapper: React.FunctionComponent<LabelProps>;
-export default ReponsiveComponentWrapper;

package/dist/src/InputFields/ResponsiveComponentWrapper.js

@@ -1,24 +0,0 @@
-/**
- * Import React libraries.
- */
-import * as React from 'react';
-import { Size } from '../types';
-/**
- * Import custom styles.
- */
-import { BREAKPOINTS, ComponentXXS, ComponentXS } from '../styles';
-var ReponsiveComponentWrapper = function (_a) {
-    var children = _a.children, size = _a.size;
-    // Globally used variables within the component
-    var _b = React.useState(false), isMediumView = _b[0], setIsMediumView = _b[1];
-    React.useEffect(function () {
-        var handleResize = function () {
-            var mql = window.matchMedia("".concat(BREAKPOINTS.MEDIUM.replace('@media ', '')));
-            setIsMediumView(mql.matches);
-        };
-        window.addEventListener('resize', handleResize);
-        return function () { return window.removeEventListener('resize', handleResize); };
-    }, []);
-    return size && size === Size.Medium ? (React.createElement(ComponentXS, null, children)) : size && size === Size.Small ? (React.createElement(ComponentXXS, null, children)) : isMediumView ? (React.createElement(ComponentXS, null, children)) : (React.createElement(ComponentXXS, null, children));
-};
-export default ReponsiveComponentWrapper;

package/dist/src/InputFields/RichTextField.d.ts

@@ -1,109 +0,0 @@
-import React from 'react';
-import { Range, UnprivilegedEditor } from "react-quill";
-import { TextFieldNote } from "./types";
-import { Size, States } from "../types";
-import { Sources, StringMap } from "quill";
-import 'react-quill/dist/quill.snow.css';
-export declare const RichTextFieldContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare enum RichTextFieldFormats {
-    Background = "background",
-    Bold = "bold",
-    Color = "color",
-    Font = "font",
-    Code = "code",
-    Italic = "italic",
-    Link = "link",
-    Size = "size",
-    Strike = "strike",
-    Script = "script",
-    Underline = "underline",
-    Blockquote = "blockquote",
-    Header = "header",
-    Indent = "indent",
-    List = "list",
-    Align = "align",
-    Direction = "direction",
-    CodeBlock = "code-block",
-    Formula = "formula",
-    Image = "image",
-    Video = "video"
-}
-export interface RichTextFieldProps {
-    /**
-     * Optional. The ID of the rich text field.
-     */
-    id?: string;
-    /**
-     * Optional. The CSS class name of the rich text field.
-     */
-    className?: string;
-    /**
-     * Optional. The placeholder text to be displayed in the rich text field when it is empty.
-     */
-    placeholder?: string;
-    /**
-     * Optional. A boolean indicating whether the rich text field is read-only.
-     */
-    readOnly?: boolean;
-    /**
-     * Optional. A boolean indicating whether the rich text field is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Optional. A boolean indicating whether the rich text field is resizable.
-     */
-    resizable?: boolean;
-    /**
-     * Optional. An object containing the modules to be used by the rich text field.
-     */
-    modules?: StringMap;
-    /**
-     * Optional. An array of formats to be used by the rich text field.
-     */
-    formats?: RichTextFieldFormats[];
-    /**
-     * Optional. A function to be called when the rich text field gains focus.
-     */
-    onFocus?(selection: Range, source: Sources, editor: UnprivilegedEditor): void;
-    /**
-     * Optional. A function to be called when the rich text field loses focus.
-     */
-    onBlur?(previousSelection: Range, source: Sources, editor: UnprivilegedEditor): void;
-    /**
-     * Optional. A function to be called when a keydown event occurs in the rich text field.
-     */
-    onKeyDown?: React.EventHandler<any>;
-    /**
-     * Optional. A function to be called when a keypress event occurs in the rich text field.
-     */
-    onKeyPress?: React.EventHandler<any>;
-    /**
-     * Optional. A function to be called when a keyup event occurs in the rich text field.
-     */
-    onKeyUp?: React.EventHandler<any>;
-    /**
-     * Required. The current value of the rich text field.
-     */
-    value: any;
-    /**
-     * Required. A function to be called when the value of the rich text field changes.
-     */
-    onChange: (value: any) => void;
-    /**
-     * Optional. The validation message to be displayed when the rich text field is in an error state.
-     */
-    validationMessage?: string;
-    /**
-     * Optional. A note to be displayed below the rich text field.
-     */
-    note?: TextFieldNote;
-    /**
-     * Optional. The size of the rich text field. Can be 'Small' or 'Medium'.
-     */
-    size?: Size.Small | Size.Medium;
-    /**
-     * Optional. The state of the rich text field. Can be 'Invalid' or 'Valid'.
-     */
-    state?: States.Invalid | States.Valid;
-}
-export declare const RichTextField: React.ForwardRefExoticComponent<RichTextFieldProps & React.RefAttributes<any>>;

package/dist/src/InputFields/RichTextField.js

@@ -1,83 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React from 'react';
-import ReactQuill from "react-quill";
-import styled from "styled-components";
-import { NoteMessage, readOnlyState, ValidationMessage } from "./styling";
-import { Size, States } from "../types";
-import { COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, scrollBarStyling } from "../styles";
-import { CheckMark, TechnicalWarning } from "../icons/systemicons";
-import 'react-quill/dist/quill.snow.css';
-export var RichTextFieldContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .quill {\n    width: 100%;\n    margin-bottom: 4px;\n    overflow: hidden;\n\n    box-shadow: inset 0 0 0 1px ", ";\n    border-radius: 4px;\n  }\n\n  .quill.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .ql-editor,\n  .ql-editor p{\n    ", "\n  }\n\n  .ql-editor.ql-blank::before {\n    ", "\n  }\n\n  &.medium {\n    .ql-editor,\n    .ql-editor p{\n      ", "\n    }\n\n    .ql-editor.ql-blank::before {\n      ", "\n    }\n  }\n\n  .ql-toolbar.ql-snow {\n    border: none;\n    padding: 8px 7px;\n    margin: 0 1px;\n    border-bottom: 1px solid ", ";\n  }\n\n  .quill.valid .ql-toolbar,\n  .quill.invalid .ql-toolbar,\n  .quill:hover .ql-toolbar,\n  .quill:focus-within .ql-toolbar {\n    padding: 8px 6px;\n    margin: 0 2px;\n  }\n\n  .ql-container {\n    font-family: unset !important;\n  }\n\n  .ql-container.ql-snow {\n    border: none;\n    overflow-y: hidden;\n    padding: 8px;\n  }\n\n  .ql-editor {\n    padding: 8px;\n    overflow-y: auto;\n\n    ", "\n  }\n\n  &.resizable {\n    height: initial;\n\n    .quill {\n      flex: none;\n      overflow: initial;\n    }\n\n    .ql-container {\n      flex: none;\n      resize: vertical;\n    }\n\n    .ql-editor {\n      height: 100%;\n    }\n  }\n\n  &.readonly {\n    .quill {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    .quill {\n      pointer-events: none;\n      box-shadow: inset 0 0 0 1px ", ";\n      color: ", ";\n\n      .ql-editor.ql-blank::before {\n        color: ", ";\n      }\n    }\n  }\n"], ["\n  .quill {\n    width: 100%;\n    margin-bottom: 4px;\n    overflow: hidden;\n\n    box-shadow: inset 0 0 0 1px ", ";\n    border-radius: 4px;\n  }\n\n  .quill.valid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill.invalid {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill:hover {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .quill:focus-within {\n    box-shadow: inset 0 0 0 2px ", ";\n  }\n\n  .ql-editor,\n  .ql-editor p{\n    ", "\n  }\n\n  .ql-editor.ql-blank::before {\n    ", "\n  }\n\n  &.medium {\n    .ql-editor,\n    .ql-editor p{\n      ", "\n    }\n\n    .ql-editor.ql-blank::before {\n      ", "\n    }\n  }\n\n  .ql-toolbar.ql-snow {\n    border: none;\n    padding: 8px 7px;\n    margin: 0 1px;\n    border-bottom: 1px solid ", ";\n  }\n\n  .quill.valid .ql-toolbar,\n  .quill.invalid .ql-toolbar,\n  .quill:hover .ql-toolbar,\n  .quill:focus-within .ql-toolbar {\n    padding: 8px 6px;\n    margin: 0 2px;\n  }\n\n  .ql-container {\n    font-family: unset !important;\n  }\n\n  .ql-container.ql-snow {\n    border: none;\n    overflow-y: hidden;\n    padding: 8px;\n  }\n\n  .ql-editor {\n    padding: 8px;\n    overflow-y: auto;\n\n    ", "\n  }\n\n  &.resizable {\n    height: initial;\n\n    .quill {\n      flex: none;\n      overflow: initial;\n    }\n\n    .ql-container {\n      flex: none;\n      resize: vertical;\n    }\n\n    .ql-editor {\n      height: 100%;\n    }\n  }\n\n  &.readonly {\n    .quill {\n      ", "\n    }\n  }\n\n  &.disabled {\n    cursor: not-allowed;\n\n    .quill {\n      pointer-events: none;\n      box-shadow: inset 0 0 0 1px ", ";\n      color: ", ";\n\n      .ql-editor.ql-blank::before {\n        color: ", ";\n      }\n    }\n  }\n"])), COLORS.neutral_400, COLORS.correct_500, COLORS.critical_500, COLORS.primary_700, COLORS.primary_800, ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), ComponentSStyling(ComponentTextStyle.Italic, COLORS.neutral_500), ComponentMStyling(ComponentTextStyle.Regular, COLORS.black), ComponentMStyling(ComponentTextStyle.Italic, COLORS.neutral_500), COLORS.neutral_200, scrollBarStyling(Size.Small), readOnlyState, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300);
-export var RichTextFieldFormats;
-(function (RichTextFieldFormats) {
-    RichTextFieldFormats["Background"] = "background";
-    RichTextFieldFormats["Bold"] = "bold";
-    RichTextFieldFormats["Color"] = "color";
-    RichTextFieldFormats["Font"] = "font";
-    RichTextFieldFormats["Code"] = "code";
-    RichTextFieldFormats["Italic"] = "italic";
-    RichTextFieldFormats["Link"] = "link";
-    RichTextFieldFormats["Size"] = "size";
-    RichTextFieldFormats["Strike"] = "strike";
-    RichTextFieldFormats["Script"] = "script";
-    RichTextFieldFormats["Underline"] = "underline";
-    RichTextFieldFormats["Blockquote"] = "blockquote";
-    RichTextFieldFormats["Header"] = "header";
-    RichTextFieldFormats["Indent"] = "indent";
-    RichTextFieldFormats["List"] = "list";
-    RichTextFieldFormats["Align"] = "align";
-    RichTextFieldFormats["Direction"] = "direction";
-    RichTextFieldFormats["CodeBlock"] = "code-block";
-    RichTextFieldFormats["Formula"] = "formula";
-    RichTextFieldFormats["Image"] = "image";
-    RichTextFieldFormats["Video"] = "video";
-})(RichTextFieldFormats || (RichTextFieldFormats = {}));
-var defaultToolBarOptions = [
-    [{ header: [1, 2, 3, false] }],
-    ['bold', 'italic', 'underline', 'strike'],
-    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
-    ['link'],
-    ['clean']
-];
-export var RichTextField = React.forwardRef(function (_a, ref) {
-    var _b;
-    var readOnly = _a.readOnly, disabled = _a.disabled, validationMessage = _a.validationMessage, note = _a.note, _c = _a.size, size = _c === void 0 ? Size.Medium : _c, state = _a.state, resizable = _a.resizable, modules = _a.modules, formats = _a.formats, rest = __rest(_a, ["readOnly", "disabled", "validationMessage", "note", "size", "state", "resizable", "modules", "formats"]);
-    var m = __assign(__assign({}, (modules !== null && modules !== void 0 ? modules : {})), { toolbar: (_b = modules === null || modules === void 0 ? void 0 : modules.toolbar) !== null && _b !== void 0 ? _b : defaultToolBarOptions });
-    var f = formats !== null && formats !== void 0 ? formats : Object.values(RichTextFieldFormats).filter(function (a) { return a !== RichTextFieldFormats.Image && a !== RichTextFieldFormats.Video && a !== RichTextFieldFormats.Formula; });
-    return (React.createElement(RichTextFieldContainer, { className: "".concat(resizable ? 'resizable' : '', " ").concat(size, " ").concat(state || '', " ").concat(readOnly ? 'readonly' : '', "  ").concat(disabled ? 'disabled' : '') },
-        React.createElement(ReactQuill, __assign({ ref: ref, readOnly: readOnly || disabled, modules: m, theme: 'snow', formats: f }, rest)),
-        validationMessage && (React.createElement(ValidationMessage, { className: size || '', type: state !== null && state !== void 0 ? state : States.Invalid },
-            state === States.Valid
-                ? React.createElement(CheckMark, { color: COLORS.correct_400 })
-                : React.createElement(TechnicalWarning, { color: COLORS.critical_400 }),
-            React.createElement("span", null, validationMessage))),
-        note && !disabled && (React.createElement(NoteMessage, { className: size },
-            note.icon,
-            React.createElement("span", null, note.message)))));
-});
-var templateObject_1;

package/dist/src/InputFields/SearchBar.d.ts

@@ -1,91 +0,0 @@
-import React from 'react';
-import { Size } from '../types';
-import { DropdownItem } from '../Dropdown';
-export declare type SearchBarProps = {
-    /**
-     * Required. The ID of the search bar.
-     */
-    id: string;
-    /**
-     * Optional. The current search term in the search bar.
-     */
-    searchTerm?: string;
-    /**
-     * Required. A function to be called when the search term changes.
-     * It should take a string representing the new search term.
-     */
-    setSearchTerm: (term: string) => void;
-    /**
-     * Required. A function to be called when the enter key is pressed in the search bar.
-     * It should take an event object as a parameter.
-     */
-    enterSearch: (e: any) => void;
-    /**
-     * Required. A function to be called when the search term is removed.
-     * It should take an event object as a parameter.
-     */
-    removeSearch: (e: any) => void;
-    /**
-     * Optional. The placeholder text to be displayed in the search bar when it is empty.
-     */
-    placeholder?: string;
-    /**
-     * Optional. The label for the search button in the search bar.
-     */
-    performSearchLabel?: string;
-    /**
-     * Optional. A boolean indicating whether the search bar is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Optional. The validation message to be displayed when the search bar is in an error state.
-     */
-    validationMessage?: string;
-    /**
-     * Optional. A function to be called when a keydown event occurs in the search bar.
-     */
-    onKeyDown?: (e: React.KeyboardEvent) => void;
-    /**
-     * Optional. The size of the search bar. Can be 'Small' or 'Medium'.
-     */
-    size?: Size.Small | Size.Medium;
-    /**
-     * Optional. The margin of the search bar. Can be any valid CSS margin value.
-     */
-    margin?: string;
-    /**
-     * Optional. A boolean indicating whether the dropdown in the search bar should be shown.
-     */
-    showDropdown?: boolean;
-    /**
-     * Optional. The icon for the dropdown button in the search bar.
-     */
-    dropdownButtonIcon?: React.ReactNode;
-    /**
-     * Optional. The label for the dropdown button in the search bar.
-     */
-    dropdownButtonLabel?: string;
-    /**
-     * Optional. The variant of the dropdown button in the search bar. Can be 'primary', 'secondary', or 'tertiary'.
-     */
-    dropdownButtonVariant?: 'primary' | 'secondary' | 'tertiary';
-    /**
-     * Optional. A function to be called when the dropdown button in the search bar is clicked.
-     */
-    dropdownButtonAction?: () => boolean | void | undefined;
-    /**
-     * Optional. An array of DropdownItem objects representing the items in the dropdown.
-     */
-    searchList?: DropdownItem[];
-    /**
-     * Optional. A function to be called when an item is added to the dropdown.
-     * It should take a DropdownItem object as a parameter.
-     */
-    addToSearchList?: (e: DropdownItem) => void;
-    /**
-     * Optional. A boolean indicating whether the dropdown in the search bar is scrollable.
-     */
-    dropdownScrollable?: boolean;
-};
-declare const SearchBar: React.FunctionComponent<SearchBarProps>;
-export default SearchBar;

package/dist/src/InputFields/SearchBar.js

@@ -1,63 +0,0 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-import React from 'react';
-import { COLORS } from '../styles/index';
-import { SystemIcons } from '../icons';
-import { ErrorMessage, InputWrapper, SearchIconWrapper } from './styling';
-import { IconButton } from '../Button';
-import SearchBarInput from './components/SearchBarInput';
-import SearchField from './components/SearchField';
-import styled from 'styled-components';
-import { DropdownContent } from '../Dropdown';
-import { useClickOutsideRef } from '../common';
-var ClearIconWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n\n  &.hidden {\n    display: none !important;\n  }\n"])));
-var SearchBar = function (_a) {
-    var id = _a.id, searchTerm = _a.searchTerm, setSearchTerm = _a.setSearchTerm, enterSearch = _a.enterSearch, removeSearch = _a.removeSearch, placeholder = _a.placeholder, performSearchLabel = _a.performSearchLabel, disabled = _a.disabled, validationMessage = _a.validationMessage, onKeyDown = _a.onKeyDown, size = _a.size, margin = _a.margin, showDropdown = _a.showDropdown, dropdownButtonIcon = _a.dropdownButtonIcon, dropdownButtonLabel = _a.dropdownButtonLabel, dropdownButtonVariant = _a.dropdownButtonVariant, dropdownButtonAction = _a.dropdownButtonAction, _b = _a.searchList, searchList = _b === void 0 ? [] : _b, addToSearchList = _a.addToSearchList, dropdownScrollable = _a.dropdownScrollable;
-    var containerRef = React.useRef(null);
-    var topLevelRef = React.useRef(null);
-    var _c = React.useState(false), isOpen = _c[0], setIsOpen = _c[1];
-    var dropdownRef = useClickOutsideRef(function () { return setIsOpen(false); }, [containerRef, topLevelRef]);
-    var isPressingEnter = function (e) {
-        if (e.key === 'Enter') {
-            e.preventDefault();
-            e.stopPropagation();
-            return true;
-        }
-        return false;
-    };
-    var enteredSearchTerm = function (e) {
-        addToSearchList && addToSearchList({ value: e.target.value });
-        enterSearch(e);
-    };
-    var dropdownAction = function () {
-        if (dropdownButtonAction)
-            dropdownButtonAction();
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(InputWrapper, { disabled: disabled, ref: topLevelRef, margin: margin },
-            React.createElement(SearchField, { id: 'id', size: size, ref: containerRef, searchTerm: searchTerm, disabled: disabled, validationMessage: validationMessage },
-                React.createElement(SearchBarInput, { placeholder: disabled ? '' : placeholder, id: id, size: size, disabled: disabled, setSearchTerm: function (term) { return setSearchTerm(term); }, searchTerm: searchTerm, onKeyDown: onKeyDown, enterSearch: enteredSearchTerm, focusParentRefs: [containerRef], onClick: function () { return setIsOpen(!isOpen); }, ref: dropdownRef }),
-                React.createElement(SearchIconWrapper, { className: size ? size : '', "aria-label": performSearchLabel },
-                    React.createElement(IconButton, { id: "".concat(id, "_Search"), variant: "secondary", shape: "circular", action: enterSearch, disabled: disabled, onKeyPress: function (e) { return (isPressingEnter(e) ? enterSearch(e) : null); } },
-                        React.createElement(SystemIcons.Search, { size: "24px" }))),
-                React.createElement(ClearIconWrapper, { className: (size ? size : '').concat(!searchTerm ? ' hidden' : '') },
-                    React.createElement(IconButton, { id: "".concat(id, "_Clear"), variant: "secondary", shape: "circular", action: removeSearch, disabled: disabled, onKeyPress: function (e) { return (isPressingEnter(e) ? removeSearch(e) : null); } },
-                        React.createElement(SystemIcons.Clear, { size: "24px" })))),
-            showDropdown && React.createElement(DropdownContent, { id: 'search', containerRef: containerRef, size: size, isButton: false, ariaRolesType: "input", customizationProps: {
-                    items: searchList,
-                    action: dropdownAction,
-                    actionLabel: dropdownButtonLabel,
-                    actionIcon: dropdownButtonIcon,
-                    actionVariant: dropdownButtonVariant,
-                    onValueUpdate: function (e) { },
-                    scrollable: dropdownScrollable,
-                    pinTopItem: true
-                }, isOpen: isOpen, setIsOpen: setIsOpen, filter: '', selectedValues: searchTerm ? [searchTerm] : [], setSelectedValues: function (e) { return setSearchTerm(e[0]); }, messageOnNoResults: '', focused: null, setFocused: function () { } })),
-        validationMessage && (React.createElement(ErrorMessage, { className: size || '' },
-            React.createElement(SystemIcons.TechnicalWarning, { color: COLORS.critical_400, className: size || '' }),
-            React.createElement("span", null, validationMessage)))));
-};
-export default SearchBar;
-var templateObject_1;