@aivenio/aquarium 0.0.1

package/dist/src/components/CheckboxGroup/CheckboxGroup.js

@@ -0,0 +1,60 @@
+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, { useState } from 'react';
+import uniqueId from 'lodash/uniqueId';
+import { tw } from '../../../src/utils/tailwind';
+import { getLabelControlProps, LabelControl } from '../../../src/utils/form/Label/Label';
+import { Checkbox } from '../../../src/components/Checkbox/Checkbox';
+import { InputGroup } from '../../../src/common/InputGroup/InputGroup';
+const isCheckbox = (c) => {
+    return React.isValidElement(c) && c.type === Checkbox;
+};
+export const CheckboxGroup = (_a) => {
+    var _b;
+    var { value, defaultValue, onChange, readOnly = false, cols, children } = _a, props = __rest(_a, ["value", "defaultValue", "onChange", "readOnly", "cols", "children"]);
+    const [selectedItems, setSelectedItems] = useState((_b = value !== null && value !== void 0 ? value : defaultValue) !== null && _b !== void 0 ? _b : []);
+    if (value !== undefined && value !== selectedItems) {
+        setSelectedItems(value);
+    }
+    const errorMessageId = uniqueId();
+    const errorProps = props.valid === false ? { 'aria-invalid': true, 'aria-describedby': errorMessageId } : {};
+    const labelControlProps = getLabelControlProps(props);
+    const handleChange = (e) => {
+        const { value } = e.target;
+        const updated = e.target.checked ? [...selectedItems, value] : selectedItems.filter((v) => v !== value);
+        setSelectedItems(updated);
+        onChange === null || onChange === void 0 ? void 0 : onChange(updated);
+    };
+    return (React.createElement(LabelControl, Object.assign({ fieldset: true }, labelControlProps, errorProps),
+        React.createElement(InputGroup, { cols: cols }, React.Children.map(children, (c) => {
+            var _a, _b;
+            if (!isCheckbox(c)) {
+                return null;
+            }
+            const str = (_a = c.props.value) === null || _a === void 0 ? void 0 : _a.toString();
+            const defaultChecked = defaultValue === undefined ? undefined : str !== undefined && defaultValue.includes(str);
+            const checked = value === undefined ? undefined : str !== undefined && value.includes(str);
+            return React.cloneElement(c, {
+                defaultChecked,
+                checked,
+                onChange: (_b = c.props.onChange) !== null && _b !== void 0 ? _b : handleChange,
+                disabled: props.disabled || c.props.disabled,
+                readOnly,
+            });
+        }))));
+};
+const CheckboxGroupSkeleton = ({ options = 2 }) => {
+    return (React.createElement(LabelControl.Skeleton, null,
+        React.createElement("div", { className: tw('flex flex-wrap flex-col gap-2') }, Array.from({ length: options }).map((_, key) => (React.createElement(Checkbox.Skeleton, { key: key }))))));
+};
+CheckboxGroup.Skeleton = CheckboxGroupSkeleton;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hlY2tib3hHcm91cC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NoZWNrYm94R3JvdXAvQ2hlY2tib3hHcm91cC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQztBQUN4QyxPQUFPLFFBQVEsTUFBTSxpQkFBaUIsQ0FBQztBQUN2QyxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDeEMsT0FBTyxFQUFFLG9CQUFvQixFQUFFLFlBQVksRUFBcUIsTUFBTSw0QkFBNEIsQ0FBQztBQUNuRyxPQUFPLEVBQUUsUUFBUSxFQUFpQixNQUFNLGtDQUFrQyxDQUFDO0FBQzNFLE9BQU8sRUFBRSxVQUFVLEVBQWUsTUFBTSxrQ0FBa0MsQ0FBQztBQUczRSxNQUFNLFVBQVUsR0FBRyxDQUFDLENBQWtCLEVBQTBDLEVBQUU7SUFDaEYsT0FBTyxLQUFLLENBQUMsY0FBYyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxJQUFJLEtBQUssUUFBUSxDQUFDO0FBQ3hELENBQUMsQ0FBQztBQXlDRixNQUFNLENBQUMsTUFBTSxhQUFhLEdBQThFLENBQUMsRUFReEcsRUFBRSxFQUFFOztRQVJvRyxFQUN2RyxLQUFLLEVBQ0wsWUFBWSxFQUNaLFFBQVEsRUFDUixRQUFRLEdBQUcsS0FBSyxFQUNoQixJQUFJLEVBQ0osUUFBUSxPQUVULEVBREksS0FBSyxjQVArRixxRUFReEcsQ0FEUztJQUVSLE1BQU0sQ0FBQyxhQUFhLEVBQUUsZ0JBQWdCLENBQUMsR0FBRyxRQUFRLENBQVcsTUFBQSxLQUFLLGFBQUwsS0FBSyxjQUFMLEtBQUssR0FBSSxZQUFZLG1DQUFJLEVBQUUsQ0FBQyxDQUFDO0lBRTFGLElBQUksS0FBSyxLQUFLLFNBQVMsSUFBSSxLQUFLLEtBQUssYUFBYSxFQUFFO1FBQ2xE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

package/dist/src/components/Chip/Chip.d.ts

@@ -0,0 +1,76 @@
+import React from 'react';
+import type { IconProps } from '../../../src/components/Icon/Icon';
+export declare type ChipStatus = 'neutral' | 'info' | 'warning' | 'danger' | 'success';
+declare type BaseChipProps = {
+    /**
+     * Textual content for the chip.
+     */
+    text: string | number;
+    /**
+     * If true, dense version of the component will be rendered.
+     */
+    dense?: boolean;
+};
+export declare type ChipProps = BaseChipProps & {
+    /**
+     * Optional icon for chip. If provided, it will be displayed on the left side of the text.
+     */
+    icon?: IconProps['icon'];
+    /**
+     * If true, chip will be displayed as locked.
+     */
+    locked?: boolean;
+    /**
+     * If badge value is provided, additional badge will be displayed inside the chip.
+     */
+    badge?: number;
+    /**
+     * If onClose() callback is provided, additional close icon will be displayed and the
+     * callback will be called when clicking the chip.
+     */
+    onClose?: () => void;
+};
+export declare const Chip: React.FC<ChipProps> & {
+    Skeleton: React.FC<SkeletonProps>;
+};
+declare type SkeletonProps = {
+    dense?: boolean;
+};
+export declare type StatusChipProps = BaseChipProps & {
+    /**
+     * Status for the status chip. Defaults to 'neutral'.
+     */
+    status?: ChipStatus;
+    /**
+     * For the sake of backwards compatibility, icon can be provided also for the status chip. Using
+     * this property is not adviced and it will be eventually deprecated.
+     *
+     * @deprecated Icons should not be used with status chips.
+     */
+    UNSAFE_icon?: IconProps['icon'];
+};
+export declare const StatusChip: React.ForwardRefExoticComponent<BaseChipProps & {
+    /**
+     * Status for the status chip. Defaults to 'neutral'.
+     */
+    status?: ChipStatus | undefined;
+    /**
+     * For the sake of backwards compatibility, icon can be provided also for the status chip. Using
+     * this property is not adviced and it will be eventually deprecated.
+     *
+     * @deprecated Icons should not be used with status chips.
+     */
+    UNSAFE_icon?: string | import("@iconify/react").IconifyIcon | undefined;
+} & React.RefAttributes<HTMLSpanElement>>;
+export declare type ChipContainerProps = {
+    /**
+     * If true, all chips within the container will be showed as dense.
+     */
+    dense?: boolean;
+    /**
+     * Only chips or status chips are allowed as children.
+     */
+    children: Array<React.ReactElement<ChipProps> | React.ReactElement<StatusChipProps>>;
+};
+export declare const ChipContainer: React.FC<ChipContainerProps>;
+export {};

package/dist/src/components/Chip/Chip.js

@@ -0,0 +1,63 @@
+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 isNumber from 'lodash/isNumber';
+import { InlineIcon } from '../../../src/components/Icon/Icon';
+import { ChipBadge } from '../../../src/components/Badge/Badge';
+import { Skeleton } from '../../../src/components/Skeleton/Skeleton';
+import { Chip as BaseChip } from '../../../src/common/Chip/Chip';
+import { tw } from '../../../src/utils/tailwind';
+import crossIcon from '../../../src/icons/cross';
+import lockIcon from '../../../src/icons/lock';
+import { isComponentType } from '../../../types/utils';
+const getStatusClassNames = (status = 'neutral') => {
+    switch (status) {
+        case 'info':
+            return tw('text-info-100 bg-info-5');
+        case 'warning':
+            return tw('text-secondary-80 bg-secondary-5');
+        case 'danger':
+            return tw('text-error-100 bg-error-5');
+        case 'success':
+            return tw('text-success-100 bg-success-5');
+        case 'neutral':
+        default:
+            return tw('text-grey-70 bg-grey-5');
+    }
+};
+export const Chip = (_a) => {
+    var { icon, text, dense = false, locked = false, badge, onClose } = _a, rest = __rest(_a, ["icon", "text", "dense", "locked", "badge", "onClose"]);
+    return (React.createElement(BaseChip.Container, Object.assign({ dense: dense, className: tw({
+            'bg-grey-0 text-grey-70': !locked,
+            'bg-grey-5 text-grey-40': locked,
+        }) }, rest),
+        icon && React.createElement(InlineIcon, { icon: icon }),
+        text,
+        isNumber(badge) && React.createElement(ChipBadge, { dense: dense, value: badge, textClassname: tw('text-grey-50') }),
+        onClose && (React.createElement(InlineIcon, { role: "button", "aria-hidden": false, icon: crossIcon, className: tw({ 'cursor-pointer': onClose !== undefined }), onClick: () => onClose === null || onClose === void 0 ? void 0 : onClose() })),
+        locked && React.createElement(InlineIcon, { icon: lockIcon })));
+};
+const ChipSkeleton = ({ dense = false }) => (React.createElement(Skeleton, { width: dense ? 34 : 46, height: dense ? 20 : 28 }));
+Chip.Skeleton = ChipSkeleton;
+export const StatusChip = React.forwardRef((_a, ref) => {
+    var { UNSAFE_icon: icon, text, dense = false, status } = _a, rest = __rest(_a, ["UNSAFE_icon", "text", "dense", "status"]);
+    return (React.createElement(BaseChip.Container, Object.assign({ ref: ref, dense: dense }, rest, { className: getStatusClassNames(status) }),
+        icon && React.createElement(InlineIcon, { icon: icon }),
+        text));
+});
+export const ChipContainer = ({ dense, children }) => (React.createElement("div", { className: tw('flex items-center', {
+        'gap-x-3': !dense,
+        'gap-x-2': Boolean(dense),
+    }) }, React.Children.map(children, (child) => isComponentType(child, Chip) || isComponentType(child, StatusChip)
+    ? React.cloneElement(child, { dense })
+    : undefined)));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hpcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NoaXAvQ2hpcC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxRQUFRLE1BQU0saUJBQWlCLENBQUM7QUFDdkMsT0FBTyxFQUFFLFVBQVUsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBQ3RELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUN2RCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFFNUQsT0FBTyxFQUFFLElBQUksSUFBSSxRQUFRLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUN4RCxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDeEMsT0FBTyxTQUFTLE1BQU0saUJBQWlCLENBQUM7QUFDeEMsT0FBTyxRQUFRLE1BQU0sZ0JBQWdCLENBQUM7QUFDdEMsT0FBTyxFQUFFLGVBQWUsRUFBRSxNQUFNLGFBQWEsQ0FBQztBQXVDOUMsTUFBTSxtQkFBbUIsR0FBRyxDQUFDLFNBQXFCLFNBQVMsRUFBVSxFQUFFO0lBQ3JFLFFBQVEsTUFBTSxFQUFFO1FBQ2QsS0FBSyxNQUFNO1lBQ1QsT0FBTyxFQUFFLENBQUMseUJBQXlCLENBQUMsQ0FBQztRQUV2QyxLQUFLLFNBQVM7WUFDWixPQUFPLEVBQUUsQ0FBQyxrQ0FBa0MsQ0FBQyxDQUFDO1FBRWhELEtBQUssUUFBUTtZQUNYLE9BQU8sRUFBRSxDQUFDLDJCQUEyQixDQUFDLENBQUM7UUFFekMsS0FBSyxTQUFTO1lBQ1osT0FBTyxFQUFFLENBQUMsK0JBQStCLENBQUMsQ0FBQztRQUU3QyxLQUFLLFNBQVMsQ0FBQztRQUNmO1lBQ0UsT0FBTyxFQUFFLENBQUMsd0JBQXdCLENBQUMsQ0FBQztLQUN2QztBQUNILENBQUMsQ0FBQztBQUVG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

package/dist/src/components/ChoiceChip/ChoiceChip.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export declare type ChoiceChipProps = {
+    /**
+     * Texttual content for the choice chip.
+     */
+    text: string;
+    /**
+     * If true, dense version of the component will be rendered.
+     */
+    dense?: boolean;
+    /**
+     * Optional selection value. If provided, it will be used instead of the internal state.
+     */
+    value?: boolean;
+    /**
+     * Optional default value for component.
+     */
+    defaultValue?: boolean;
+    /**
+     * onChange() callback will be called when choice chip value updates.
+     */
+    onChange?: (val: boolean) => void;
+};
+export declare const ChoiceChip: React.FC<ChoiceChipProps>;

package/dist/src/components/ChoiceChip/ChoiceChip.js

@@ -0,0 +1,34 @@
+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, { useState } from 'react';
+import { tw } from '../../../src/utils/tailwind';
+export const ChoiceChip = (_a) => {
+    var _b;
+    var { text, dense, defaultValue, value, onChange } = _a, rest = __rest(_a, ["text", "dense", "defaultValue", "value", "onChange"]);
+    const [prevValue, setPrevValue] = useState(value !== null && value !== void 0 ? value : defaultValue);
+    const [selected, setSelected] = useState((_b = value !== null && value !== void 0 ? value : defaultValue) !== null && _b !== void 0 ? _b : false);
+    if (value !== prevValue) {
+        setSelected(value !== null && value !== void 0 ? value : false);
+        setPrevValue(value);
+    }
+    const handleClick = () => {
+        setSelected(!selected);
+        onChange === null || onChange === void 0 ? void 0 : onChange(!selected);
+    };
+    return (React.createElement("span", Object.assign({ role: "button", "aria-pressed": selected }, rest, { className: tw('inline-flex items-center border rounded-sm transition whitespace-nowrap cursor-pointer', {
+            'bg-white border-grey-20 text-grey-60': !selected,
+            'bg-grey-0 border-grey-100 text-grey-100': selected,
+            'typography-body-small py-2 px-3 gap-x-3': !dense,
+            'typography-caption-default py-1 px-2 gap-x-2': Boolean(dense),
+        }), onClick: handleClick }), text));
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ2hvaWNlQ2hpcC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0Nob2ljZUNoaXAvQ2hvaWNlQ2hpcC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssRUFBRSxFQUFFLFFBQVEsRUFBRSxNQUFNLE9BQU8sQ0FBQztBQUN4QyxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUE2QnhDLE1BQU0sQ0FBQyxNQUFNLFVBQVUsR0FBOEIsQ0FBQyxFQUF1RCxFQUFFLEVBQUU7O1FBQTNELEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFFLFFBQVEsT0FBVyxFQUFOLElBQUksY0FBckQsc0RBQXVELENBQUY7SUFDekcsTUFBTSxDQUFDLFNBQVMsRUFBRSxZQUFZLENBQUMsR0FBRyxRQUFRLENBQUMsS0FBSyxhQUFMLEtBQUssY0FBTCxLQUFLLEdBQUksWUFBWSxDQUFDLENBQUM7SUFDbEUsTUFBTSxDQUFDLFFBQVEsRUFBRSxXQUFXLENBQUMsR0FBRyxRQUFRLENBQUMsTUFBQSxLQUFLLGFBQUwsS0FBSyxjQUFMLEtBQUssR0FBSSxZQUFZLG1DQUFJLEtBQUssQ0FBQyxDQUFDO0lBRXpFLElBQUksS0FBSyxLQUFLLFNBQVMsRUFBRTtRQUN2QixXQUFXLENBQUMsS0FBSyxhQUFMLEtBQUssY0FBTCxLQUFLLEdBQUksS0FBSyxDQUFDLENBQUM7UUFDNUIsWUFBWSxDQUFDLEtBQUssQ0FBQyxDQUFDO0tBQ3JCO0lBRUQsTUFBTSxXQUFXLEdBQUcsR0FBRyxFQUFFO1FBQ3ZCLFdBQVcsQ0FBQyxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQ3ZCLFFBQVEsYUFBUixRQUFRLHVCQUFSLFFBQVEsQ0FBRyxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ3hCLENBQUMsQ0FBQztJQUVGLE9BQU8sQ0FDTCw0Q0FDRSxJQUFJLEVBQUMsUUFBUSxrQkFDQyxRQUFRLElBQ2xCLElBQUksSUFDUixTQUFTLEVBQUUsRUFBRSxDQUFDLHdGQUF3RixFQUFFO1lBQ3RHLHNDQUFzQyxFQUFFLENBQUMsUUFBUTtZQUNqRCx5Q0FBeUMsRUFBRSxRQUFRO1lBQ25ELHlDQUF5QyxFQUFFLENBQUMsS0FBSztZQUNqRCw4Q0FBOEMsRUFBRSxPQUFPLENBQUMsS0FBSyxDQUFDO1NBQy9ELENBQUMsRUFDRixPQUFPLEVBQUUsV0FBVyxLQUVuQixJQUFJLENBQ0EsQ0FDUixDQUFDO0FBQ0osQ0FBQyxDQUFDIn0=

package/dist/src/components/Combobox/Combobox.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import { LabelControlProps } from '../../../src/utils/form/Label/Label';
+export declare type ComboboxBaseProps<Option extends unknown> = {
+    id?: string;
+    name?: string;
+    placeholder?: string;
+    valid?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    maxHeight?: string;
+    options: Option[];
+    optionKeys?: string[];
+    noResults: string;
+    optionToString?: (opt: Option | null) => string;
+    createOption?: (value: string | undefined) => Option | undefined;
+    renderOption?: (opt: Option) => React.ReactNode;
+    isOptionDisabled?: (opt: Option, index: number) => boolean;
+    defaultValue?: Option | null;
+    value?: Option | null;
+    onChange?: (value?: Option | null) => void;
+};
+export declare const ComboboxBase: {
+    <Option extends unknown>({ id, name, placeholder, maxHeight, options, optionKeys, noResults, optionToString: itemToString, createOption, renderOption, isOptionDisabled, defaultValue, value, onChange, children, valid, disabled, readOnly, ...props }: React.PropsWithChildren<ComboboxBaseProps<Option>>): React.ReactElement<ComboboxBaseProps<Option>, string | React.JSXElementConstructor<any>>;
+    Skeleton: React.FC<{}>;
+};
+export declare type ComboboxProps<Option extends unknown> = ComboboxBaseProps<Option> & Omit<LabelControlProps, 'length' | 'maxLength'>;
+export declare const Combobox: {
+    <Option extends unknown>({ options, noResults, ...props }: ComboboxProps<Option>): React.ReactElement<ComboboxProps<Option>, string | React.JSXElementConstructor<any>>;
+    Skeleton(): JSX.Element;
+};

package/dist/src/components/Combobox/Combobox.js

@@ -0,0 +1,109 @@
+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;
+};
+// https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html
+import React, { useState, useEffect, useRef } from 'react';
+import { useCombobox } from 'downshift';
+import { matchSorter } from 'match-sorter';
+import uniqueId from 'lodash/uniqueId';
+import omit from 'lodash/omit';
+import { useOverlayPosition } from '@react-aria/overlays';
+import { Skeleton } from '../../../src/components/Skeleton/Skeleton';
+import { PopoverWrapper } from '../../../src/components/Popover/PopoverWrapper';
+import { getLabelControlProps, LabelControl } from '../../../src/utils/form/Label/Label';
+import { tw } from '../../../src/utils/tailwind';
+import { Select, getOptionLabelBuiltin, isOptionDisabledBuiltin } from '../../../src/common/Select/Select';
+export const ComboboxBase = (_a) => {
+    var _b;
+    var { id, name, placeholder, maxHeight, options, optionKeys = ['label', 'value'], noResults, optionToString: itemToString = getOptionLabelBuiltin, createOption, renderOption = (opt) => itemToString(opt), isOptionDisabled = isOptionDisabledBuiltin, defaultValue, value, onChange, children, valid = true, disabled = false, readOnly = false } = _a, props = __rest(_a, ["id", "name", "placeholder", "maxHeight", "options", "optionKeys", "noResults", "optionToString", "createOption", "renderOption", "isOptionDisabled", "defaultValue", "value", "onChange", "children", "valid", "disabled", "readOnly"]);
+    const targetRef = useRef(null);
+    const overlayRef = useRef(null);
+    const [inputItems, setInputItems] = useState(options);
+    const [hasFocus, setFocus] = useState(false);
+    const updateInputItems = (query) => {
+        const keys = typeof options[0] === 'string' ? undefined : optionKeys;
+        setInputItems(query ? matchSorter(options, query, { keys }) : options);
+    };
+    const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, highlightedIndex, inputValue, getItemProps, selectedItem, closeMenu, } = useCombobox({
+        id,
+        selectedItem: value,
+        defaultSelectedItem: defaultValue,
+        itemToString,
+        items: inputItems,
+        stateReducer: (_, actionChanges) => {
+            const { changes, type } = actionChanges;
+            switch (type) {
+                case useCombobox.stateChangeTypes.InputBlur: {
+                    return Object.assign(Object.assign({}, changes), { selectedItem: createOption ? createOption === null || createOption === void 0 ? void 0 : createOption(changes.inputValue) : changes.selectedItem });
+                }
+            }
+            return changes;
+        },
+        onSelectedItemChange: (e) => onChange === null || onChange === void 0 ? void 0 : onChange(e.selectedItem),
+        onInputValueChange: ({ inputValue }) => updateInputItems(inputValue),
+    });
+    const { overlayProps } = useOverlayPosition({
+        targetRef,
+        overlayRef,
+        placement: 'bottom start',
+        shouldFlip: true,
+        isOpen,
+    });
+    useEffect(() => {
+        updateInputItems(inputValue);
+    }, [JSON.stringify(options)]);
+    const inputProps = getInputProps({ disabled: disabled || readOnly });
+    const hasNoResults = options.length === 0 || inputItems.length === 0;
+    const width = (_b = targetRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth;
+    const style = isOpen ? Object.assign(Object.assign({}, overlayProps.style), { width }) : { display: 'none' };
+    return (React.createElement("div", { className: tw('relative') },
+        React.createElement(Select.InputContainer, { ref: targetRef, variant: disabled ? 'disabled' : !valid ? 'error' : readOnly ? 'readOnly' : hasFocus ? 'focused' : 'default' },
+            React.createElement(Select.Input, Object.assign({ id: id, name: name, placeholder: readOnly ? undefined : placeholder }, inputProps, props, { disabled: disabled, readOnly: readOnly, onFocus: (e) => {
+                    var _a;
+                    setFocus(true);
+                    (_a = inputProps.onFocus) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+                }, onBlur: (e) => {
+                    var _a;
+                    setFocus(false);
+                    (_a = inputProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+                }, onKeyDown: (e) => {
+                    var _a;
+                    e.stopPropagation();
+                    (_a = inputProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(inputProps, e);
+                }, onKeyUp: (e) => e.stopPropagation() })),
+            !readOnly && React.createElement(Select.Toggle, Object.assign({ hasFocus: hasFocus, isOpen: isOpen }, getToggleButtonProps({ disabled })))),
+        React.createElement(PopoverWrapper
+        // Downshift expects the menu to be in the DOM all the time.
+        , Object.assign({ 
+            // Downshift expects the menu to be in the DOM all the time.
+            isOpen: true, isDismissable: true, autoFocus: true }, getMenuProps({ ref: overlayRef }), { style: style, onClose: closeMenu }),
+            React.createElement(Select.Menu, { maxHeight: maxHeight },
+                isOpen && hasNoResults && React.createElement(Select.NoResults, null, noResults),
+                isOpen &&
+                    inputItems.map((item, index) => (React.createElement(Select.Item, Object.assign({ key: itemToString(item), selected: item === selectedItem, highlighted: index === highlightedIndex }, getItemProps({ item, index, disabled: isOptionDisabled(item, index) })), renderOption(item))))))));
+};
+const ComboboxSkeleton = () => React.createElement(Skeleton, { height: 38 });
+ComboboxBase.Skeleton = ComboboxSkeleton;
+export const Combobox = (_a) => {
+    var _b;
+    var { options, noResults } = _a, props = __rest(_a, ["options", "noResults"]);
+    // we need a unique ID to be used for an accessible connection between the input and its error message
+    const id = useRef((_b = props.id) !== null && _b !== void 0 ? _b : `combobox-${uniqueId()}`);
+    const errorMessageId = uniqueId();
+    const errorProps = props.valid === false ? { 'aria-invalid': true, 'aria-describedby': errorMessageId } : {};
+    const labelControlProps = getLabelControlProps(props);
+    const baseProps = omit(props, Object.keys(labelControlProps));
+    return (React.createElement(LabelControl, Object.assign({ id: `${id.current}-label`, htmlFor: `${id.current}-input`, messageId: errorMessageId }, labelControlProps),
+        React.createElement(ComboboxBase, Object.assign({}, baseProps, errorProps, { id: id.current, options: options, noResults: noResults, disabled: props.disabled, valid: props.valid }))));
+};
+Combobox.Skeleton = () => (React.createElement(LabelControl.Skeleton, null,
+    React.createElement(ComboboxBase.Skeleton, null)));
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29tYm9ib3guanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Db21ib2JveC9Db21ib2JveC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxxRkFBcUY7QUFDckYsT0FBTyxLQUFLLEVBQUUsRUFBRSxRQUFRLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxNQUFNLE9BQU8sQ0FBQztBQUMzRCxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sV0FBVyxDQUFDO0FBQ3hDLE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSxjQUFjLENBQUM7QUFDM0MsT0FBTyxRQUFRLE1BQU0saUJBQWlCLENBQUM7QUFDdkMsT0FBTyxJQUFJLE1BQU0sYUFBYSxDQUFDO0FBQy9CLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQzFELE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUM1RCxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFDdkUsT0FBTyxFQUFFLG9CQUFvQixFQUFFLFlBQVksRUFBcUIsTUFBTSw0QkFBNEIsQ0FBQztBQUNuRyxPQUFPLEVBQUUsRUFBRSxFQUFFLE1BQU0sb0JBQW9CLENBQUM7QUFDeEMsT0FBTyxFQUFFLE1BQU0sRUFBRSxxQkFBcUIsRUFBRSx1QkFBdUIsRUFBRSxNQUFNLDBCQUEwQixDQUFDO0FBc0JsRyxNQUFNLENBQUMsTUFBTSxZQUFZLEdBQUcsQ0FBeUIsRUFvQkEsRUFBaUQsRUFBRTs7UUFwQm5ELEVBQ25ELEVBQUUsRUFDRixJQUFJLEVBQ0osV0FBVyxFQUNYLFNBQVMsRUFDVCxPQUFPLEVBQ1AsVUFBVSxHQUFHLENBQUMsT0FBTyxFQUFFLE9BQU8sQ0FBQyxFQUMvQixTQUFTLEVBQ1QsY0FBYyxFQUFFLFlBQVksR0FBRyxxQkFBcUIsRUFDcEQsWUFBWSxFQUNaLFlBQVksR0FBRyxDQUFD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

package/dist/src/components/Context/Context.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { BreakpointMatches } from '../../../src/utils/breakpoints';
+export declare type ContextObject = {
+    breakpointMatches: BreakpointMatches;
+};
+export declare type ContextProps = {
+    children: React.ReactNode;
+};
+export declare const Context: ({ children }: ContextProps) => JSX.Element;
+export declare const DesignSystemContext: React.Context<ContextObject>;

package/dist/src/components/Context/Context.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ModalProvider } from '@react-aria/overlays';
+import { getMatches } from '../../../src/utils/breakpoints';
+import { useWindowSize } from '../../../src/utils/useWindowSize';
+export const Context = ({ children }) => {
+    const windowSize = useWindowSize();
+    const [breakpointMatches, setBreakpointMatches] = React.useState(getMatches(windowSize));
+    React.useEffect(() => {
+        setBreakpointMatches(getMatches(windowSize));
+    }, [windowSize]);
+    return (React.createElement(DesignSystemContext.Provider, { value: { breakpointMatches } },
+        React.createElement(ModalProvider, null, children)));
+};
+const context = {
+    breakpointMatches: getMatches(undefined),
+};
+export const DesignSystemContext = React.createContext(context);
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29udGV4dC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NvbnRleHQvQ29udGV4dC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxLQUFLLE1BQU0sT0FBTyxDQUFDO0FBQzFCLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQztBQUNyRCxPQUFPLEVBQUUsVUFBVSxFQUFxQixNQUFNLHVCQUF1QixDQUFDO0FBQ3RFLE9BQU8sRUFBRSxhQUFhLEVBQUUsTUFBTSx5QkFBeUIsQ0FBQztBQVV4RCxNQUFNLENBQUMsTUFBTSxPQUFPLEdBQUcsQ0FBQyxFQUFFLFFBQVEsRUFBZ0IsRUFBZSxFQUFFO0lBQ2pFLE1BQU0sVUFBVSxHQUFHLGFBQWEsRUFBRSxDQUFDO0lBQ25DLE1BQU0sQ0FBQyxpQkFBaUIsRUFBRSxvQkFBb0IsQ0FBQyxHQUFHLEtBQUssQ0FBQyxRQUFRLENBQW9CLFVBQVUsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDO0lBRTVHLEtBQUssQ0FBQyxTQUFTLENBQUMsR0FBRyxFQUFFO1FBQ25CLG9CQUFvQixDQUFDLFVBQVUsQ0FBQyxVQUFVLENBQUMsQ0FBQyxDQUFDO0lBQy9DLENBQUMsRUFBRSxDQUFDLFVBQVUsQ0FBQyxDQUFDLENBQUM7SUFFakIsT0FBTyxDQUNMLG9CQUFDLG1CQUFtQixDQUFDLFFBQVEsSUFBQyxLQUFLLEVBQUUsRUFBRSxpQkFBaUIsRUFBRTtRQUN4RCxvQkFBQyxhQUFhLFFBQUUsUUFBUSxDQUFpQixDQUNaLENBQ2hDLENBQUM7QUFDSixDQUFDLENBQUM7QUFFRixNQUFNLE9BQU8sR0FBa0I7SUFDN0IsaUJBQWlCLEVBQUUsVUFBVSxDQUFDLFNBQVMsQ0FBQztDQUN6QyxDQUFDO0FBQ0YsTUFBTSxDQUFDLE1BQU0sbUJBQW1CLEdBQUcsS0FBSyxDQUFDLGFBQWEsQ0FBZ0IsT0FBTyxDQUFDLENBQUMifQ==

package/dist/src/components/ControlLabel/ControlLabel.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ElementProps } from '../../../src/components';
+declare type LabelPlacement = 'top' | 'bottom' | 'right' | 'left';
+export declare type ControlLabelProps = Omit<ElementProps<'label'>, 'component'> & {
+    label?: React.ReactNode;
+    labelPlacement?: LabelPlacement;
+    caption?: React.ReactNode;
+    disabled?: boolean;
+    readOnly?: boolean;
+};
+export declare const ControlLabel: React.FC<ControlLabelProps>;
+export {};

package/dist/src/components/ControlLabel/ControlLabel.js

@@ -0,0 +1,26 @@
+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 { tw } from '../../../src/utils/tailwind';
+import { Typography } from '../../../src/components/Typography/Typography';
+export const ControlLabel = (_a) => {
+    var { label, caption, disabled = false, readOnly = false, children, style } = _a, rest = __rest(_a, ["label", "caption", "disabled", "readOnly", "children", "style"]);
+    const textClass = disabled ? 'text-grey-40' : 'text-grey-100';
+    return (React.createElement("label", Object.assign({ className: tw('inline-grid grid-cols-[auto_1fr]', {
+            'cursor-pointer': !disabled && !readOnly,
+            'cursor-not-allowed': disabled,
+        }, textClass), style: Object.assign({}, style) }, rest),
+        children,
+        label && React.createElement("span", { className: tw('typography-body-small self-center') }, label),
+        caption && (React.createElement(Typography, { className: tw('col-start-2'), variant: "caption-default", color: disabled ? 'grey-40' : 'grey-50' }, caption))));
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiQ29udHJvbExhYmVsLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQ29udHJvbExhYmVsL0NvbnRyb2xMYWJlbC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxPQUFPLEtBQUssTUFBTSxPQUFPLENBQUM7QUFDMUIsT0FBTyxFQUFFLEVBQUUsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBRXhDLE9BQU8sRUFBRSxVQUFVLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQztBQVlsRSxNQUFNLENBQUMsTUFBTSxZQUFZLEdBQWdDLENBQUMsRUFRekQsRUFBRSxFQUFFO1FBUnFELEVBQ3hELEtBQUssRUFDTCxPQUFPLEVBQ1AsUUFBUSxHQUFHLEtBQUssRUFDaEIsUUFBUSxHQUFHLEtBQUssRUFDaEIsUUFBUSxFQUNSLEtBQUssT0FFTixFQURJLElBQUksY0FQaUQsaUVBUXpELENBRFE7SUFFUCxNQUFNLFNBQVMsR0FBRyxRQUFRLENBQUMsQ0FBQyxDQUFDLGNBQWMsQ0FBQyxDQUFDLENBQUMsZUFBZSxDQUFDO0lBRTlELE9BQU8sQ0FDTCw2Q0FDRSxTQUFTLEVBQUUsRUFBRSxDQUNYLGtDQUFrQyxFQUNsQztZQUNFLGdCQUFnQixFQUFFLENBQUMsUUFBUSxJQUFJLENBQUMsUUFBUTtZQUN4QyxvQkFBb0IsRUFBRSxRQUFRO1NBQy9CLEVBQ0QsU0FBUyxDQUNWLEVBQ0QsS0FBSyxvQkFBTyxLQUFLLEtBQ2IsSUFBSTtRQUVQLFFBQVE7UUFDUixLQUFLLElBQUksOEJBQU0sU0FBUyxFQUFFLEVBQUUsQ0FBQyxtQ0FBbUMsQ0FBQyxJQUFHLEtBQUssQ0FBUTtRQUNqRixPQUFPLElBQUksQ0FDVixvQkFBQyxVQUFVLElBQUMsU0FBUyxFQUFFLEVBQUUsQ0FBQyxhQUFhLENBQUMsRUFBRSxPQUFPLEVBQUMsaUJBQWlCLEVBQUMsS0FBSyxFQUFFLFFBQVEsQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxTQUFTLElBQ3hHLE9BQU8sQ0FDRyxDQUNkLENBQ0ssQ0FDVCxDQUFDO0FBQ0osQ0FBQyxDQUFDIn0=

package/dist/src/components/DataTable/DataTable.d.ts

@@ -0,0 +1,107 @@
+import React from 'react';
+import { TableProps } from '../../../src/components/Table/Table';
+import { SortDirection } from '../../../src/common/Table/Table.utils';
+import { ChipStatus } from '../../../src/components/Chip/Chip';
+import { ActionType } from '../../../types/ActionType';
+declare type Column = {
+    /**
+     * Display name for the column.
+     */
+    headerName: string;
+    /**
+     * Width of the column. Number for pixels and string for percentages
+     */
+    width?: number | `${number}%`;
+};
+declare type TextColumn<T> = Column & {
+    /**
+     * Name of the property field that this column represents in the data rows.
+     */
+    field: keyof T & (string | number);
+    /**
+     * When true, user will be able to sort data rows by clicking this column header.
+     */
+    sortable?: boolean;
+};
+declare type NumberColumn<T> = Column & {
+    /**
+     * Type of the column.
+     */
+    type: 'number';
+    /**
+     * Name of the property field that this column represents in the data rows.
+     */
+    field: keyof T & (string | number);
+    /**
+     * When true, user will be able to sort data rows by clicking this column header.
+     */
+    sortable?: boolean;
+};
+declare type ActionColumn<T> = Column & {
+    /**
+     * Type of the column.
+     */
+    type: 'action';
+    /**
+     * Callback function that resolves to Button props.
+     */
+    action: (row: T, index: number, rows: T[]) => ActionType;
+};
+declare type CustomColumn<T> = Column & {
+    /**
+     * Type of the column.
+     */
+    type: 'custom';
+    /**
+     * Unsafe render method. Consider consulting the designer instead of using this.
+     * Using render callback will also disallow sorting on that column.
+     */
+    UNSAFE_render: (row: T, index: number, rows: T[]) => React.ReactNode;
+};
+declare type StatusColumn<T> = Column & {
+    /**
+     * Type of the column.
+     */
+    type: 'status';
+    /**
+     * Callback function that resolves to StatusChip props
+     */
+    status: (row: T, index: number, rows: T[]) => {
+        status: ChipStatus;
+        text: string | number;
+    };
+};
+export declare type DataTableColumn<T extends DataTableRow> = TextColumn<T> | CustomColumn<T> | StatusColumn<T> | NumberColumn<T> | ActionColumn<T>;
+export declare type DataTableRow = Record<string, any> & {
+    /**
+     * Assigned ID for each data row.
+     * Used as a key. Use something unqiue derived from the data, not index.
+     */
+    id: string | number;
+};
+export declare type DataTableProps<T extends DataTableRow> = {
+    /**
+     * Array of column definitions that correspond to the data rows.
+     */
+    columns: Array<DataTableColumn<T>>;
+    /**
+     * Array of data rows to be displayed.
+     */
+    rows: T[];
+    /**
+     * When true, sets column whitespace to nowrap. Defaults to false.
+     * Use when you dont want text to wrap due to 100% width column for example.
+     */
+    noWrap?: boolean;
+    /**
+     * Set table layout. Defaults to 'auto'.
+     */
+    layout?: 'auto' | 'fixed';
+} & Pick<TableProps, 'ariaLabel' | 'onNext' | 'onPrev'>;
+declare type Sort<T extends DataTableRow> = {
+    key: keyof T;
+    direction: SortDirection;
+};
+export declare const useTableSort: <T extends DataTableRow>() => [Sort<T> | undefined, (field: keyof T) => void];
+export declare const DataTable: <T extends DataTableRow>({ columns, rows, noWrap, layout, ...rest }: DataTableProps<T>) => JSX.Element;
+export {};