@g4rcez/components 4.1.1 → 4.1.3

package/dist/components/table/table-lib.d.ts

@@ -0,0 +1,135 @@
+import React from "react";
+import { AllPaths } from "sidekicker";
+import { Any, POJO, SetState } from "../../types";
+import { OptionProps } from "../form/select";
+import { FilterConfig } from "./filter";
+import { GroupItem } from "./group";
+import { Sorter } from "./sort";
+export declare const getLabel: <T extends POJO>(col: Col<T>) => string | number | bigint | boolean | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined>;
+export type TableConfiguration<T extends POJO, M extends POJO = Any> = M & {
+    cols: Col<T>[];
+    options: OptionProps[];
+};
+export declare const createOptionCols: <T extends POJO>(cols: Col<T>[]) => OptionProps[];
+export declare enum ColType {
+    Boolean = "boolean",
+    Number = "number",
+    Select = "select",
+    Text = "text"
+}
+export declare const valueFromType: (input: HTMLInputElement) => string | number;
+type THead = React.ReactElement | React.ReactNode;
+export type ColMatrix = `${number},${number}`;
+type ParsePath<path, output extends string[] = [], currentChunk extends string = ""> = path extends number ? [`${path}`] : path extends `${infer first}${infer rest}` ? first extends "." | "[" | "]" ? ParsePath<rest, [...output, ...(currentChunk extends "" ? [] : [currentChunk])], ""> : ParsePath<rest, output, `${currentChunk}${first}`> : [...output, ...(currentChunk extends "" ? [] : [currentChunk])];
+type RecursiveGet<Obj, pathList> = Obj extends any ? pathList extends [infer first, ...infer rest] ? first extends keyof Obj ? RecursiveGet<Obj[first], rest> : [first, Obj] extends [`${number}` | "number", readonly any[]] ? RecursiveGet<Extract<Obj, any[]>[number], rest> : undefined : Obj : never;
+type GetFromPath<Obj, path> = RecursiveGet<Obj, ParsePath<path>>;
+export type CellAsideElement<T extends POJO> = {
+    row: T;
+    rowIndex: number;
+    col: ColOptions<T, AllPaths<T>>;
+};
+export type CellPropsElement<T extends POJO, K extends AllPaths<T>> = {
+    row: T;
+    value: GetFromPath<T, K>;
+    rowIndex: number;
+    matrix: ColMatrix;
+    col: ColOptions<T, K> & {
+        id: K;
+        thead: THead;
+    };
+};
+type ColOptions<T extends POJO, K extends AllPaths<T>> = Partial<{
+    type: ColType;
+    allowSort: boolean;
+    headerLabel: string;
+    allowFilter: boolean;
+    Element: React.FC<CellPropsElement<T, K>>;
+    thProps: React.HTMLAttributes<HTMLTableCellElement>;
+    cellProps: React.HTMLAttributes<HTMLTableCellElement>;
+}>;
+export type ColConstructor<T extends POJO> = {
+    getAll: () => Col<T>[];
+    remove: <K extends AllPaths<T>>(id: K) => void;
+    filter: (c: (c: Col<T>) => boolean) => Col<T>[];
+    add: <K extends AllPaths<T>>(id: K, thead: THead, props?: ColOptions<T, K>) => void;
+};
+declare const cols: <T extends POJO>() => <K extends AllPaths<T>>(id: K, thead: THead, options: ColOptions<T, K>) => {
+    id: K;
+    thead: THead;
+    type?: ColType | undefined;
+    allowSort?: boolean | undefined;
+    headerLabel?: string | undefined;
+    allowFilter?: boolean | undefined;
+    Element?: React.FC<CellPropsElement<T, K>> | undefined;
+    thProps?: React.HTMLAttributes<HTMLTableCellElement> | undefined;
+    cellProps?: React.HTMLAttributes<HTMLTableCellElement> | undefined;
+};
+export type Col<T extends POJO> = ReturnType<ReturnType<typeof cols<T>>>;
+export type TablePagination = {
+    size: number;
+    pages: number;
+    current: number;
+    hasNext: boolean;
+    sizes?: number[];
+    totalItems: number;
+    hasPrevious: boolean;
+    onChangeSize?: (size: number) => void;
+    asLink?: React.FC<React.PropsWithChildren<{
+        href: number | "previous" | "next";
+        className: string;
+    }>>;
+};
+export type TableGetters<T extends POJO> = {
+    rows: T[];
+    cols: Col<T>[];
+    sorters: Sorter<T>[];
+    groups: GroupItem<T>[];
+    filters: FilterConfig<T>[];
+    pagination: TablePagination | null;
+};
+type TableSetters<T extends POJO> = {
+    setCols: SetState<Col<T>[]>;
+    setSorters: SetState<Sorter<T>[]>;
+    setGroups: SetState<GroupItem<T>[]>;
+    setFilters: SetState<FilterConfig<T>[]>;
+};
+export type TableOperationProps<T extends POJO> = TableConfiguration<T, TableSetters<T> & TableGetters<T> & {
+    set?: (v: TableGetters<T>) => void;
+} & {
+    inlineSorter: boolean;
+    inlineFilter: boolean;
+}>;
+export declare const createColumns: <T extends POJO>(callback: (o: ColConstructor<T>) => void) => {
+    id: AllPaths<T, never>;
+    thead: THead;
+    type?: ColType | undefined;
+    allowSort?: boolean | undefined;
+    headerLabel?: string | undefined;
+    allowFilter?: boolean | undefined;
+    Element?: React.FC<CellPropsElement<T, AllPaths<T, never>>> | undefined;
+    thProps?: React.HTMLAttributes<HTMLTableCellElement> | undefined;
+    cellProps?: React.HTMLAttributes<HTMLTableCellElement> | undefined;
+}[];
+export declare const useTablePreferences: <T extends POJO>(name: string, cols: Col<T>[], options?: Partial<TableGetters<T>>) => {
+    name: string;
+    set: (getters: TableGetters<T>) => void;
+    cols: {
+        id: AllPaths<T, never>;
+        thead: THead;
+        type?: ColType | undefined;
+        allowSort?: boolean | undefined;
+        headerLabel?: string | undefined;
+        allowFilter?: boolean | undefined;
+        Element?: React.FC<CellPropsElement<T, AllPaths<T, never>>> | undefined;
+        thProps?: React.HTMLAttributes<HTMLTableCellElement> | undefined;
+        cellProps?: React.HTMLAttributes<HTMLTableCellElement> | undefined;
+    }[];
+    sorters: Sorter<T>[];
+    groups: GroupItem<T>[];
+    filters: FilterConfig<T>[];
+    pagination: TablePagination | null;
+};
+export declare const useWidthControl: <T extends object>(reorder: (c: Col<T>[]) => void) => readonly [React.RefObject<HTMLTableRowElement | null>, (cols: Col<T>[]) => void];
+export declare const getModalScrollerRef: () => HTMLElement | undefined;
+export {};
+//# sourceMappingURL=table-lib.d.ts.map

package/dist/components/table/table-lib.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-lib.d.ts","sourceRoot":"","sources":["../../../src/components/table/table-lib.ts"],"names":[],"mappings":"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"}

package/dist/components/table/table-lib.js

@@ -0,0 +1,83 @@
+"use client";
+import { useCallback, useRef } from "react";
+import { LocalStorage } from "storage-manager-js";
+import { useReducer } from "use-typed-reducer";
+import { useStableRef } from "../../hooks/use-stable-ref";
+import { isSsr } from "../../lib/fns";
+export const getLabel = (col) => col.headerLabel ?? col.thead ?? col.id;
+export const createOptionCols = (cols) => cols.map((opt) => ({
+    value: opt.id,
+    label: (opt.thead ?? opt.headerLabel ?? opt.id),
+}));
+export var ColType;
+(function (ColType) {
+    ColType["Boolean"] = "boolean";
+    ColType["Number"] = "number";
+    ColType["Select"] = "select";
+    ColType["Text"] = "text";
+})(ColType || (ColType = {}));
+export const valueFromType = (input) => (input.type === "number" ? input.valueAsNumber : input.value);
+const cols = () => (id, thead, options) => ({ ...options, id, thead });
+export const createColumns = (callback) => {
+    let items = [];
+    const add = (id, thead, options) => items.push({ ...options, id, thead });
+    const remove = (id) => (items = items.filter((x) => x.id !== id));
+    const getAll = () => Array.from(items);
+    const filter = (c) => (items = Array.from(items.filter(c)));
+    callback({ add, remove, getAll, filter });
+    return items;
+};
+const noop = {};
+const mergeCols = (cols, saved) => {
+    if (!Array.isArray(saved))
+        return cols;
+    const savedSet = new Set(saved.map((x) => x.id));
+    if (!cols.every((x) => savedSet.has(x.id))) {
+        return cols;
+    }
+    const map = new Map(cols.map((x) => [x.id, x]));
+    return saved.map((mock, index) => {
+        const original = map.get(mock.id);
+        if (original === undefined)
+            return cols[index];
+        return original;
+    });
+};
+export const useTablePreferences = (name, cols, options = noop) => {
+    const init = isSsr() ? null : LocalStorage.get(`@components/table-${name}`) || null;
+    const [state, dispatch] = useReducer({
+        name,
+        groups: options.groups || init?.groups || [],
+        sorters: options.sorters || init?.sorters || [],
+        filters: options.filters || init?.filters || [],
+        cols: mergeCols(cols, init?.cols),
+    }, (get) => {
+        const intercept = (partial) => {
+            const prev = get.state();
+            const result = { ...prev, ...partial };
+            if (!isSsr())
+                LocalStorage.set(`@components/table-${prev.name}`, result);
+            return result;
+        };
+        intercept(get.state());
+        return {
+            set: (getters) => intercept(getters),
+        };
+    });
+    return { ...state, ...dispatch, name };
+};
+export const useWidthControl = (reorder) => {
+    const stableRef = useStableRef(reorder);
+    const ref = useRef(null);
+    const onChange = useCallback((cols) => {
+        stableRef.current(cols);
+        cols.forEach((x) => {
+            const c = ref.current.querySelector(`th[data-tableheader="${x.id}"]`);
+            if (!c)
+                return;
+            c.style.width = "auto";
+        });
+    }, [stableRef]);
+    return [ref, onChange];
+};
+export const getModalScrollerRef = () => (isSsr() ? undefined : document.querySelector(`[data-component="modal-body"]`));

package/dist/components/table/table.context.d.ts

@@ -0,0 +1,10 @@
+export type TableContextProps = Partial<{
+    sticky: number;
+}>;
+export declare const TableProvider: import("react").Provider<Partial<{
+    sticky: number;
+}>>;
+export declare const useTable: () => Partial<{
+    sticky: number;
+}>;
+//# sourceMappingURL=table.context.d.ts.map

package/dist/components/table/table.context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.context.d.ts","sourceRoot":"","sources":["../../../src/components/table/table.context.tsx"],"names":[],"mappings":"AAEA,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAAE,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAI5D,eAAO,MAAM,aAAa;YAJwB,MAAM;GAIN,CAAC;AAEnD,eAAO,MAAM,QAAQ;YAN6B,MAAM;EAMF,CAAC"}

package/dist/components/table/table.context.jsx

@@ -0,0 +1,4 @@
+import { createContext, useContext } from "react";
+const TableContext = createContext({});
+export const TableProvider = TableContext.Provider;
+export const useTable = () => useContext(TableContext);

package/dist/components/table/thead.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+import { Col, TableOperationProps } from "./table-lib";
+type TableHeaderProps<T extends object> = {
+    loading: boolean;
+    headers: Col<T>[];
+} & Pick<TableOperationProps<T>, "filters" | "setFilters" | "setCols" | "setSorters" | "sorters" | "inlineSorter" | "inlineFilter">;
+export declare const TableHeader: <T extends object>(props: TableHeaderProps<T>) => React.JSX.Element;
+export {};
+//# sourceMappingURL=thead.d.ts.map

package/dist/components/table/thead.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"thead.d.ts","sourceRoot":"","sources":["../../../src/components/table/thead.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAwC,MAAM,OAAO,CAAC;AAM7D,OAAO,EAAE,GAAG,EAAY,mBAAmB,EAAmB,MAAM,aAAa,CAAC;AAIlF,KAAK,gBAAgB,CAAC,CAAC,SAAS,MAAM,IAAI;IACtC,OAAO,EAAE,OAAO,CAAC;IACjB,OAAO,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;CACrB,GAAG,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,SAAS,GAAG,YAAY,GAAG,SAAS,GAAG,YAAY,GAAG,SAAS,GAAG,cAAc,GAAG,cAAc,CAAC,CAAC;AAmKpI,eAAO,MAAM,WAAW,GAAI,CAAC,SAAS,MAAM,EAAE,OAAO,gBAAgB,CAAC,CAAC,CAAC,sBAuBvE,CAAC"}

package/dist/components/table/thead.jsx

@@ -0,0 +1,103 @@
+"use client";
+import { AnimatePresence, motion, Reorder } from "motion/react";
+import { Order } from "linq-arrays";
+import { PlusIcon, MagnifyingGlassIcon, MagnifyingGlassMinusIcon } from "@phosphor-icons/react";
+import React, { Fragment, useCallback, useRef } from "react";
+import { useTranslations } from "../../hooks/use-translations";
+import { useTweaks } from "../../hooks/use-tweaks";
+import { Dropdown } from "../floating/dropdown";
+import { ColumnHeaderFilter, createFilterFromCol, useOperators } from "./filter";
+import { SorterHead } from "./sort";
+import { getLabel, useWidthControl } from "./table-lib";
+const dragConstraints = { top: 0, left: 0, right: 0, bottom: -1 };
+const HeaderChild = (props) => {
+    const tweaks = useTweaks();
+    const translation = useTranslations();
+    const ownFilters = props.filters.filter((x) => x.name === props.header.id);
+    const hasFilters = ownFilters.length > 0;
+    const defaultAllowSort = props.header.allowSort ?? tweaks.table.sorters ?? true;
+    const defaultAllowFilter = props.header.allowFilter ?? tweaks.table.filters ?? true;
+    const operators = useOperators();
+    const FilterIcon = hasFilters ? MagnifyingGlassIcon : MagnifyingGlassMinusIcon;
+    const th = useRef(null);
+    const onDelete = (e) => {
+        const id = e.currentTarget.dataset.id || "";
+        return props.setFilters((prev) => prev.filter((x) => x.id !== id));
+    };
+    const dragRef = useCallback((dom) => {
+        if (dom === null)
+            return;
+        th.current = dom;
+        const controller = new AbortController();
+        dom.addEventListener("pointerdown", (e) => {
+            const target = e.target;
+            if (target.dataset.type === "resizer") {
+                e.stopPropagation();
+                return e.stopImmediatePropagation();
+            }
+        }, { signal: controller.signal });
+        return () => controller.abort();
+    }, []);
+    const ownSorter = props.sorters.find((x) => props.header.id === x.value);
+    const ariaSort = !ownSorter?.type ? "none" : ownSorter.type === Order.Asc ? "ascending" : "descending";
+    const label = getLabel(props.header);
+    return (<Reorder.Item {...props.header.thProps} as="th" ref={dragRef} initial={false} dragSnapToOrigin dragDirectionLock role="columnheader" aria-sort={ariaSort} value={props.header} aria-busy={props.loading} data-tableheader={props.header.id} whileDrag={{ cursor: "grabbing" }} className={`typography relative min-w-0 cursor-grab overflow-clip border-r-[1px] border-table-border bg-table-header font-medium first:rounded-tl-lg last:rounded-tr-lg last:border-r-transparent md:h-14 ${props.header.thProps?.className ?? ""}`}>
+            <span className={`flex h-full items-center justify-between bg-table-header p-[var(--table-cell-padding)] ${props.isLast ? "rounded-tr-lg" : ""} ${props.index === 0 ? "rounded-tl-lg" : ""}`}>
+                <span className="flex items-center gap-1">
+                    {props.inlineFilter && defaultAllowFilter ? (<Dropdown arrow trigger={<span>
+                                    <span id={`${props.header.id}-filter-dropdown-button`} className="sr-only">
+                                        {translation.tableFilterDropdownTitleUnique} {label}
+                                    </span>
+                                    <FilterIcon aria-labelledby={`${props.header.id}-filter-dropdown-button`} size={14}/>
+                                </span>} title={<span className="text-lg">
+                                    {translation.tableFilterDropdownTitleUnique} <span className="font-medium">{label}</span>
+                                </span>}>
+                            <ul className="font-medium">
+                                {ownFilters.length === 0 ? null : (<Fragment>
+                                        {ownFilters.map((filter) => (<li key={`thead-filter-${filter.id}`} className="my-1">
+                                                <ColumnHeaderFilter onDelete={onDelete} filter={filter} set={props.setFilters}/>
+                                            </li>))}
+                                    </Fragment>)}
+                                <li>
+                                    <button type="button" className="flex items-center gap-1 text-primary" onClick={() => props.setFilters((prev) => prev.concat(createFilterFromCol(props.header, operators.options, operators.operations)))}>
+                                        <PlusIcon size={14}/> {translation.tableFilterNewFilter}
+                                    </button>
+                                </li>
+                            </ul>
+                        </Dropdown>) : null}
+                    <span className="pointer-events-auto text-balance text-base">{props.header.thead}</span>
+                    {props.inlineSorter && defaultAllowSort ? (<SorterHead col={props.header} setSorters={props.setSorters} sorters={props.sorters}/>) : null}
+                </span>
+            </span>
+            {props.isLast ? null : (<motion.button drag="x" draggable dragListener dragMomentum type="button" animate={false} dragElastic={0} dragPropagation initial={false} dragSnapToOrigin dragDirectionLock data-type="resizer" title={props.header.id} dragConstraints={dragConstraints} className="absolute -right-[0.5px] top-0 z-calendar block h-full w-[1px] cursor-col-resize bg-transparent hover:w-1.5 hover:bg-primary active:w-1.5 active:bg-primary" onClick={(e) => void e.currentTarget.focus()} onKeyDown={(e) => {
+                if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+                    if (th.current === null)
+                        return;
+                    th.current.setAttribute("data-resized", "true");
+                    const v = th.current.getBoundingClientRect().width;
+                    const move = e.shiftKey ? 50 : 10;
+                    const delta = move * (e.key === "ArrowLeft" ? -1 : 1);
+                    th.current.style.width = `${Math.abs(v + delta)}px`;
+                }
+            }} onDoubleClick={() => {
+                if (th.current === null)
+                    return;
+                th.current.style.width = "auto";
+            }} onDrag={(_, info) => {
+                if (th.current === null)
+                    return;
+                th.current.setAttribute("data-resized", "true");
+                const v = th.current.getBoundingClientRect().width;
+                const delta = info.delta.x;
+                th.current.style.width = `${Math.abs(v + delta)}px`;
+            }}/>)}
+        </Reorder.Item>);
+};
+export const TableHeader = (props) => {
+    const [ref, onChange] = useWidthControl(props.setCols);
+    return (<Reorder.Group layout as="tr" axis="x" drag="x" ref={ref} layoutRoot role="row" layoutScroll onReorder={onChange} values={props.headers}>
+            <AnimatePresence>
+                {props.headers.map((header, index) => (<HeaderChild index={index} header={header} filters={props.filters} loading={props.loading} sorters={props.sorters} setFilters={props.setFilters} setSorters={props.setSorters} inlineFilter={props.inlineFilter} inlineSorter={props.inlineSorter} isLast={index === props.headers.length - 1} key={`header-child-item-${header.id}`}/>))}
+            </AnimatePresence>
+        </Reorder.Group>);
+};

package/dist/config/context.d.ts

@@ -0,0 +1,21 @@
+import type { IconProps } from "@phosphor-icons/react";
+import type { Locales } from "the-mask-input";
+import { parsers } from "../styles/design-tokens";
+import { type Translations } from "./default-translations";
+import { type Tweaks } from "./default-tweaks";
+export type ContextProps = Partial<{
+    tweaks: Partial<Tweaks>;
+    map: Partial<Translations>;
+    locale: Locales | undefined;
+    parser: typeof parsers.hsla;
+    rootFloating?: HTMLElement | null;
+    iconWeight: IconProps["weight"];
+}>;
+export declare const Context: import("react").Context<Partial<{
+    tweaks: Tweaks;
+    map: Translations;
+    locale: Locales | undefined;
+    parser: typeof parsers.hsla;
+    floatingRef?: HTMLElement | null;
+}>>;
+//# sourceMappingURL=context.d.ts.map

package/dist/config/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/config/context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAuB,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAiB,KAAK,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAE9D,MAAM,MAAM,YAAY,GAAG,OAAO,CAAC;IAC/B,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC;IACxB,GAAG,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC3B,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,MAAM,EAAE,OAAO,OAAO,CAAC,IAAI,CAAC;IAC5B,YAAY,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAClC,UAAU,EAAE,SAAS,CAAC,QAAQ,CAAC,CAAC;CACnC,CAAC,CAAC;AAEH,eAAO,MAAM,OAAO;;;;;;GAMlB,CAAC"}

package/dist/config/context.js

@@ -0,0 +1,12 @@
+"use client";
+import { createContext } from "react";
+import { parsers } from "../styles/design-tokens";
+import { defaultTranslations } from "./default-translations";
+import { defaultTweaks } from "./default-tweaks";
+export const Context = createContext({
+    parser: parsers.hsla,
+    tweaks: defaultTweaks,
+    floatingRef: undefined,
+    map: defaultTranslations,
+    locale: undefined,
+});

package/dist/config/default-translations.d.ts

@@ -0,0 +1,94 @@
+import React from "react";
+export declare const defaultTranslations: {
+    autocompleteEmpty: string;
+    calendarBackMonth: string;
+    calendarFromDate: string;
+    calendarMonthLabel: string;
+    calendarNextMonth: string;
+    calendarDatetimeTitle: string;
+    calendarToDate: string;
+    calendarToday: string;
+    pageCalendarMonthView: string;
+    pageCalendarWeekView: string;
+    pageCalendarDayView: string;
+    pageCalendarPrevious: string;
+    pageCalendarNext: string;
+    pageCalendarToday: string;
+    pageCalendarAddEvent: string;
+    pageCalendarWeekLabel: (n: number) => string;
+    pageCalendarFilter: string;
+    pageCalendarMoreEvents: (n: number) => string;
+    pageCalendarLabel: string;
+    pageCalendarNavigation: string;
+    pageCalendarMonthGrid: string;
+    pageCalendarFilterEnabled: string;
+    pageCalendarFilterDisabled: string;
+    pageCalendarEventCount: (n: number) => string;
+    pageCalendarEventAt: (title: string, time: string) => string;
+    commandPaletteEmpty: string;
+    commandPaletteLoading: string;
+    datePickerCalendarButtonLabel: string;
+    emptyDataMessage: string;
+    inputCaretDown: string;
+    inputCloseValue: string;
+    inputOptionalLabel: string;
+    wizardNext: string;
+    wizardPrev: string;
+    wizardFinish: string;
+    wizardSkip: string;
+    multiSelectInnerPlaceholder: string;
+    multiSelectSelectedLabel: string;
+    tableColumnResizer: string;
+    tableFilterColumnPlaceholder: string;
+    tableFilterColumnTitle: string;
+    tableFilterDropdownTitle: string;
+    tableFilterDropdownTitleUnique: string;
+    tableFilterLabel: string;
+    tableFilterNewFilter: string;
+    tableFilterOperatorPlaceholder: string;
+    tableFilterOperatorTitle: string;
+    tableFilterTypeContains: string;
+    tableFilterTypeEndsWith: string;
+    tableFilterTypeGreaterThan: string;
+    tableFilterTypeIs: string;
+    tableFilterTypeIsNot: string;
+    tableFilterTypeLessThan: string;
+    tableFilterTypeNotContains: string;
+    tableFilterTypeStartsWith: string;
+    tableFilterValuePlaceholder: string;
+    tableFilterValueTitle: string;
+    tableGroupLabel: string;
+    tableGroupLabelWithCount: string;
+    tablePaginationFooter: (pagination: {
+        pages: number;
+        totalItems: number;
+        sizes?: number[];
+        current: number;
+        select: React.ReactNode;
+    }) => React.JSX.Element;
+    tablePaginationNext: string;
+    tablePaginationPrevious: string;
+    tablePaginationSelectLabel: string;
+    tableSortAddButton: string;
+    tableSortAsc: string;
+    tableSortDesc: string;
+    tableSortDropdownTitle: string;
+    tableSortOrderByLabel: string;
+    tableSortOrderInputPlaceholder: string;
+    tableSortOrderInputTitle: string;
+    tableSortTypeInputPlaceholder: string;
+    tableSortTypeInputTitle: string;
+    uploadIdle: string;
+    uploadIdleButton: string;
+    uploadDragging: (props: {
+        n: number;
+    }) => string;
+    uploadDialogTitle: string;
+    datepickerPlaceholder: (_: string) => string;
+    spinnerLoading: string;
+    skeletonLoading: string;
+    closeButton: string;
+    fileUploadZoneLabel: string;
+};
+export type Translations = typeof defaultTranslations;
+//# sourceMappingURL=default-translations.d.ts.map

package/dist/config/default-translations.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-translations.d.ts","sourceRoot":"","sources":["../../src/config/default-translations.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAExC,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;+BAgBD,MAAM;;gCAEL,MAAM;;;;;;gCAMN,MAAM;iCACL,MAAM,QAAQ,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAmCb;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;QAAC,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE;;;;;;;;;;;;;;;4BAqB7G;QAAE,CAAC,EAAE,MAAM,CAAA;KAAE;;+BAGV,MAAM;;;;;CAKpC,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,OAAO,mBAAmB,CAAC"}

package/dist/config/default-translations.jsx

@@ -0,0 +1,87 @@
+import React, { Fragment } from "react";
+export const defaultTranslations = {
+    autocompleteEmpty: "Nothing here...",
+    calendarBackMonth: "Back month",
+    calendarFromDate: "From",
+    calendarMonthLabel: "Month",
+    calendarNextMonth: "Next month",
+    calendarDatetimeTitle: "Time",
+    calendarToDate: "To",
+    calendarToday: "Today",
+    pageCalendarMonthView: "Month view",
+    pageCalendarWeekView: "Week view",
+    pageCalendarDayView: "Day view",
+    pageCalendarPrevious: "Previous",
+    pageCalendarNext: "Next",
+    pageCalendarToday: "Today",
+    pageCalendarAddEvent: "Add event",
+    pageCalendarWeekLabel: (n) => `Week ${n}`,
+    pageCalendarFilter: "Filter:",
+    pageCalendarMoreEvents: (n) => `+${n} more...`,
+    pageCalendarLabel: "Calendar",
+    pageCalendarNavigation: "Calendar navigation",
+    pageCalendarMonthGrid: "Calendar month",
+    pageCalendarFilterEnabled: "enabled",
+    pageCalendarFilterDisabled: "disabled",
+    pageCalendarEventCount: (n) => (n === 1 ? "1 event" : `${n} events`),
+    pageCalendarEventAt: (title, time) => `${title} at ${time}`,
+    commandPaletteEmpty: "Nothing here...",
+    commandPaletteLoading: "Loading...",
+    datePickerCalendarButtonLabel: "Click to open a date picker",
+    emptyDataMessage: "No data",
+    inputCaretDown: "Click to see all options",
+    inputCloseValue: "Click to clear the value",
+    inputOptionalLabel: "Optional",
+    wizardNext: "Next",
+    wizardPrev: "Previous",
+    wizardFinish: "Finish",
+    wizardSkip: "Skip",
+    multiSelectInnerPlaceholder: "Search...",
+    multiSelectSelectedLabel: "Selected",
+    tableColumnResizer: "Resize column",
+    tableFilterColumnPlaceholder: "Filter by",
+    tableFilterColumnTitle: "Filter by",
+    tableFilterDropdownTitle: "Filters",
+    tableFilterDropdownTitleUnique: "Filter by",
+    tableFilterLabel: "Filters",
+    tableFilterNewFilter: "New filter",
+    tableFilterOperatorPlaceholder: "Equals to...",
+    tableFilterOperatorTitle: "Operation",
+    tableFilterTypeContains: "Contains",
+    tableFilterTypeEndsWith: "Ends with",
+    tableFilterTypeGreaterThan: "Greater than",
+    tableFilterTypeIs: "Is",
+    tableFilterTypeIsNot: "Is not",
+    tableFilterTypeLessThan: "Less than",
+    tableFilterTypeNotContains: "Not contains",
+    tableFilterTypeStartsWith: "Starts with",
+    tableFilterValuePlaceholder: "Something...",
+    tableFilterValueTitle: "Value",
+    tableGroupLabel: "Group",
+    tableGroupLabelWithCount: "Group",
+    tablePaginationFooter: (pagination) => (<Fragment>
+            {pagination.current} to {pagination.pages} of {pagination.totalItems} items.{Array.isArray(pagination.sizes) ? pagination.select : null}{" "}
+            per page.
+        </Fragment>),
+    tablePaginationNext: "Next",
+    tablePaginationPrevious: "Previous",
+    tablePaginationSelectLabel: "Select the size of page",
+    tableSortAddButton: "Add sort",
+    tableSortAsc: "Ascending",
+    tableSortDesc: "Descending",
+    tableSortDropdownTitle: "Order by",
+    tableSortOrderByLabel: "Order by",
+    tableSortOrderInputPlaceholder: "Order by",
+    tableSortOrderInputTitle: "Order by",
+    tableSortTypeInputPlaceholder: "Ascending",
+    tableSortTypeInputTitle: "Sort type",
+    uploadIdle: "You can drag your files here",
+    uploadIdleButton: "Choose your files",
+    uploadDragging: (props) => `Dragging ${props.n} ${props.n > 0 ? "files" : "file"}`,
+    uploadDialogTitle: "Details of your file",
+    datepickerPlaceholder: (_) => "day/month/year",
+    spinnerLoading: "Loading",
+    skeletonLoading: "Loading content",
+    closeButton: "Close",
+    fileUploadZoneLabel: "File upload area. Drag files here or press Enter to browse.",
+};

package/dist/config/default-tweaks.d.ts

@@ -0,0 +1,13 @@
+export type Tweaks = {
+    table: {
+        sorters: boolean;
+        filters: boolean;
+        operations: boolean;
+        sticky: number | undefined;
+    };
+    input: {
+        iconFeedback: boolean;
+    };
+};
+export declare const defaultTweaks: Tweaks;
+//# sourceMappingURL=default-tweaks.d.ts.map

package/dist/config/default-tweaks.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-tweaks.d.ts","sourceRoot":"","sources":["../../src/config/default-tweaks.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG;IACjB,KAAK,EAAE;QACH,OAAO,EAAE,OAAO,CAAC;QACjB,OAAO,EAAE,OAAO,CAAC;QACjB,UAAU,EAAE,OAAO,CAAC;QACpB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;KAC9B,CAAC;IACF,KAAK,EAAE;QACH,YAAY,EAAE,OAAO,CAAC;KACzB,CAAC;CACL,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,MAG3B,CAAC"}

package/dist/config/default-tweaks.js

@@ -0,0 +1,4 @@
+export const defaultTweaks = {
+    input: { iconFeedback: true },
+    table: { operations: true, sorters: true, filters: true, sticky: undefined },
+};

package/dist/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const FLOATING_DELAY = 200;
+export declare const TYPEAHEAD_RESET_DELAY = 500;
+//# sourceMappingURL=constants.d.ts.map

package/dist/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../src/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,MAAM,CAAC;AAElC,eAAO,MAAM,qBAAqB,MAAM,CAAC"}

package/dist/constants.js

@@ -0,0 +1,2 @@
+export const FLOATING_DELAY = 200;
+export const TYPEAHEAD_RESET_DELAY = 500;

package/dist/hooks/use-click-outside.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+export declare const useOnClickOutside: <T extends HTMLElement>(ref: React.RefObject<T>, handler: (event: MouseEvent | TouchEvent) => void) => void;
+//# sourceMappingURL=use-click-outside.d.ts.map

package/dist/hooks/use-click-outside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-click-outside.d.ts","sourceRoot":"","sources":["../../src/hooks/use-click-outside.ts"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAEzC,eAAO,MAAM,iBAAiB,GAAI,CAAC,SAAS,WAAW,EAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,KAAK,IAAI,SAclI,CAAC"}