@economic/taco 2.25.1-alpha.13 → 2.25.1

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/Filter.js

@@ -0,0 +1,102 @@
+import React__default from 'react';
+import { IconButton } from '../../../../../../IconButton/IconButton.js';
+import { useLocalization } from '../../../../../../Provider/Localization.js';
+import { Table3FilterComparator } from '../../../../../types.js';
+import { FilterColumn } from './FilterColumn.js';
+import { FilterComparator } from './FilterComparator.js';
+import { FilterValue } from './FilterValue.js';
+
+function Filter(props) {
+  const {
+    allColumns,
+    filter,
+    filters,
+    onChange: handleChange,
+    onRemove,
+    position
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const column = allColumns.find(c => c.id === filter.id);
+  const ref = React__default.useRef(null);
+  const {
+    id,
+    value: {
+      comparator,
+      value
+    }
+  } = filter;
+  const handleChangeColumn = columnId => {
+    var _columnPrev$columnDef, _columnNext$columnDef;
+    const columnPrev = allColumns.find(column => column.id === id);
+    const columnNext = allColumns.find(column => column.id === columnId);
+    // UX requirement: if old column data type is the same as next column data type,
+    // then we applying the same filter value for the next column,
+    // but when data types are different, we're reseting comparator ans value for the next column
+    const value = (columnPrev === null || columnPrev === void 0 ? void 0 : (_columnPrev$columnDef = columnPrev.columnDef.meta) === null || _columnPrev$columnDef === void 0 ? void 0 : _columnPrev$columnDef.dataType) === (columnNext === null || columnNext === void 0 ? void 0 : (_columnNext$columnDef = columnNext.columnDef.meta) === null || _columnNext$columnDef === void 0 ? void 0 : _columnNext$columnDef.dataType) ? filter.value : {
+      comparator: null,
+      value: null
+    };
+    handleChange(position, {
+      id: columnId,
+      value
+    });
+  };
+  const handleChangeComparator = comparator => {
+    let nextValue = filter.value.value;
+    if (comparator === Table3FilterComparator.IsEmpty || comparator === Table3FilterComparator.IsNotEmpty) {
+      nextValue = undefined;
+    }
+    handleChange(position, {
+      id,
+      value: {
+        comparator,
+        value: nextValue
+      }
+    });
+  };
+  const handleChangeValue = value => {
+    handleChange(position, {
+      id,
+      value: {
+        ...filter.value,
+        value
+      }
+    });
+  };
+  const handleRemove = () => onRemove === null || onRemove === void 0 ? void 0 : onRemove(position);
+  React__default.useEffect(() => {
+    if (ref.current && !id) {
+      ref.current.focus(); // after adding a new filter placeholder, we want to focus it right way.
+    }
+  }, [id]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex items-start gap-2"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "flex min-h-[theme(spacing.8)] w-14 flex-shrink-0 items-center justify-end pr-2 text-right"
+  }, position > 0 ? texts.table3.filters.conditions.and : texts.table3.filters.conditions.where), /*#__PURE__*/React__default.createElement(FilterColumn, {
+    allColumns: allColumns,
+    filters: filters,
+    onChange: handleChangeColumn,
+    value: id,
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement(FilterComparator, {
+    column: column,
+    onChange: handleChangeComparator,
+    value: comparator
+  }), /*#__PURE__*/React__default.createElement(FilterValue, {
+    column: column,
+    comparator: comparator,
+    onChange: handleChangeValue,
+    value: value
+  }), onRemove ? /*#__PURE__*/React__default.createElement(IconButton, {
+    appearance: "discrete",
+    className: "ml-auto",
+    icon: "close",
+    onClick: handleRemove
+  }) : null);
+}
+
+export { Filter };
+//# sourceMappingURL=Filter.js.map

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/Filter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Filter.js","sources":["../../../../../../../../../../../../src/components/Table3/components/toolbar/Filter/filters/components/Filter.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn } from '@tanstack/react-table';\nimport { IconButton } from '../../../../../../IconButton/IconButton';\nimport { Table3Filter, Table3FilterComparator } from '../../../../../types';\nimport { useLocalization } from '../../../../../../Provider/Localization';\nimport { FilterColumn } from './FilterColumn';\nimport { FilterComparator } from './FilterComparator';\nimport { FilterValue } from './FilterValue';\n\nexport type FilterProps<TType = unknown> = {\n    allColumns: RTColumn<TType, unknown>[];\n    filter: Table3Filter;\n    filters: Table3Filter[];\n    position: number;\n    onChange: (position: number, value: Table3Filter) => void;\n    onRemove?: (position: number) => void;\n};\n\nexport function Filter<TType = unknown>(props: FilterProps<TType>) {\n    const { allColumns, filter, filters, onChange: handleChange, onRemove, position } = props;\n    const { texts } = useLocalization();\n    const column = allColumns.find(c => c.id === filter.id) as RTColumn<TType, unknown>;\n    const ref = React.useRef<HTMLButtonElement>(null);\n\n    const {\n        id,\n        value: { comparator, value },\n    } = filter;\n\n    const handleChangeColumn = (columnId: string | null) => {\n        const columnPrev = allColumns.find(column => column.id === id);\n        const columnNext = allColumns.find(column => column.id === columnId);\n        // UX requirement: if old column data type is the same as next column data type,\n        // then we applying the same filter value for the next column,\n        // but when data types are different, we're reseting comparator ans value for the next column\n        const value =\n            columnPrev?.columnDef.meta?.dataType === columnNext?.columnDef.meta?.dataType\n                ? filter.value\n                : { comparator: null, value: null };\n\n        handleChange(position, { id: columnId, value });\n    };\n\n    const handleChangeComparator = (comparator: Table3FilterComparator) => {\n        let nextValue = filter.value.value;\n\n        if (comparator === Table3FilterComparator.IsEmpty || comparator === Table3FilterComparator.IsNotEmpty) {\n            nextValue = undefined;\n        }\n        handleChange(position, { id, value: { comparator, value: nextValue } });\n    };\n\n    const handleChangeValue = (value: any) => {\n        handleChange(position, { id, value: { ...filter.value, value } });\n    };\n\n    const handleRemove = () => onRemove?.(position);\n\n    React.useEffect(() => {\n        if (ref.current && !id) {\n            ref.current.focus(); // after adding a new filter placeholder, we want to focus it right way.\n        }\n    }, [id]);\n\n    return (\n        <div className=\"flex items-start gap-2\">\n            <div className=\"flex min-h-[theme(spacing.8)] w-14 flex-shrink-0 items-center justify-end pr-2 text-right\">\n                {position > 0 ? texts.table3.filters.conditions.and : texts.table3.filters.conditions.where}\n            </div>\n            <FilterColumn\n                allColumns={allColumns as any}\n                filters={filters}\n                onChange={handleChangeColumn as any}\n                value={id}\n                ref={ref}\n            />\n            <FilterComparator column={column} onChange={handleChangeComparator as any} value={comparator} />\n            <FilterValue column={column} comparator={comparator} onChange={handleChangeValue} value={value} />\n            {onRemove ? <IconButton appearance=\"discrete\" className=\"ml-auto\" icon=\"close\" onClick={handleRemove} /> : null}\n        </div>\n    );\n}\n"],"names":["Filter","props","allColumns","filter","filters","onChange","handleChange","onRemove","position","texts","useLocalization","column","find","c","id","ref","React","useRef","value","comparator","handleChangeColumn","columnId","columnPrev","columnNext","_columnPrev$columnDef","columnDef","meta","dataType","_columnNext$columnDef","handleChangeComparator","nextValue","Table3FilterComparator","IsEmpty","IsNotEmpty","undefined","handleChangeValue","handleRemove","useEffect","current","focus","className","table3","conditions","and","where","FilterColumn","FilterComparator","FilterValue","IconButton","appearance","icon","onClick"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/FilterColumn.js

@@ -0,0 +1,50 @@
+import React__default from 'react';
+import { Icon } from '../../../../../../Icon/Icon.js';
+import { Tooltip } from '../../../../../../Tooltip/Tooltip.js';
+import { useLocalization } from '../../../../../../Provider/Localization.js';
+import { Field } from '../../../../../../Field/Field.js';
+import { Select2 } from '../../../../../../Select2/Select2.js';
+
+const FilterColumn = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
+    allColumns,
+    filters,
+    onChange: handleChange,
+    value = null,
+    ...attributes
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const selectedColumn = allColumns.find(column => column.id === value);
+  const warning = selectedColumn && !selectedColumn.getIsVisible();
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "flex flex-col"
+  }, /*#__PURE__*/React__default.createElement(Field, {
+    message: warning ? texts.table3.filters.hiddenColumn : undefined,
+    warning: warning,
+    className: "min-h-[theme(spacing.8)]"
+  }, /*#__PURE__*/React__default.createElement(Select2, Object.assign({}, attributes, {
+    ref: ref,
+    className: "focus:yt-focus !w-32 flex-shrink-0",
+    emptyValue: null,
+    onChange: handleChange,
+    value: value
+  }), allColumns.map(column => {
+    var _column$columnDef$met, _column$parent, _column$parent$column;
+    return /*#__PURE__*/React__default.createElement(Select2.Option, {
+      key: column.id,
+      value: column.id,
+      postfix: !column.getIsVisible() ? ( /*#__PURE__*/React__default.createElement(Tooltip, {
+        title: texts.table3.filters.hiddenColumn
+      }, /*#__PURE__*/React__default.createElement(Icon, {
+        name: "eye-off",
+        className: "text-grey-500 !h-5 !w-5"
+      }))) : undefined,
+      disabled: column.id !== value && (!column.getCanFilter() || !!filters.find(f => f.id === column.id))
+    }, ((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.header) + (column.parent ? ` (${(_column$parent = column.parent) === null || _column$parent === void 0 ? void 0 : (_column$parent$column = _column$parent.columnDef.meta) === null || _column$parent$column === void 0 ? void 0 : _column$parent$column.header})` : ''));
+  }))));
+});
+
+export { FilterColumn };
+//# sourceMappingURL=FilterColumn.js.map

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/FilterColumn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterColumn.js","sources":["../../../../../../../../../../../../src/components/Table3/components/toolbar/Filter/filters/components/FilterColumn.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn } from '@tanstack/react-table';\nimport { Select2, Select2Props } from '../../../../../../Select2/Select2';\nimport { Icon } from '../../../../../../Icon/Icon';\nimport { Tooltip } from '../../../../../../Tooltip/Tooltip';\nimport { useLocalization } from '../../../../../../Provider/Localization';\nimport { Field } from '../../../../../../Field/Field';\nimport { Table3Filter } from '../../../../../types';\n\nexport type FilterColumnProps<TType = unknown> = Omit<Select2Props, 'children'> & {\n    allColumns: RTColumn<TType, unknown>[];\n    filters: Table3Filter[];\n};\n\nexport const FilterColumn = React.forwardRef<HTMLButtonElement, FilterColumnProps>((props, ref) => {\n    const { allColumns, filters, onChange: handleChange, value = null, ...attributes } = props;\n    const { texts } = useLocalization();\n    const selectedColumn = allColumns.find(column => column.id === value);\n    const warning = selectedColumn && !selectedColumn.getIsVisible();\n\n    return (\n        <div className=\"flex flex-col\">\n            <Field\n                message={warning ? texts.table3.filters.hiddenColumn : undefined}\n                warning={warning}\n                className=\"min-h-[theme(spacing.8)]\">\n                <Select2\n                    {...attributes}\n                    ref={ref}\n                    className=\"focus:yt-focus !w-32 flex-shrink-0\"\n                    emptyValue={null}\n                    onChange={handleChange}\n                    value={value}>\n                    {allColumns.map(column => (\n                        <Select2.Option\n                            key={column.id}\n                            value={column.id}\n                            postfix={\n                                !column.getIsVisible() ? (\n                                    <Tooltip title={texts.table3.filters.hiddenColumn}>\n                                        <Icon name=\"eye-off\" className=\"text-grey-500 !h-5 !w-5\" />\n                                    </Tooltip>\n                                ) : undefined\n                            }\n                            disabled={column.id !== value && (!column.getCanFilter() || !!filters.find(f => f.id === column.id))}>\n                            {(column.columnDef.meta?.header as string) +\n                                (column.parent ? ` (${column.parent?.columnDef.meta?.header})` : '')}\n                        </Select2.Option>\n                    ))}\n                </Select2>\n            </Field>\n        </div>\n    );\n});\n"],"names":["FilterColumn","React","forwardRef","props","ref","allColumns","filters","onChange","handleChange","value","attributes","texts","useLocalization","selectedColumn","find","column","id","warning","getIsVisible","className","Field","message","table3","hiddenColumn","undefined","Select2","emptyValue","map","_column$columnDef$met","_column$parent","_column$parent$column","Option","key","postfix","Tooltip","title","Icon","name","disabled","getCanFilter","f","columnDef","meta","header","parent"],"mappings":";;;;;;;MAcaA,YAAY,gBAAGC,cAAK,CAACC,UAAU,CAAuC,CAACC,KAAK,EAAEC,GAAG;EAC1F,MAAM;IAAEC,UAAU;IAAEC,OAAO;IAAEC,QAAQ,EAAEC,YAAY;IAAEC,KAAK,GAAG,IAAI;IAAE,GAAGC;GAAY,GAAGP,KAAK;EAC1F,MAAM;IAAEQ;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,cAAc,GAAGR,UAAU,CAACS,IAAI,CAACC,MAAM,IAAIA,MAAM,CAACC,EAAE,KAAKP,KAAK,CAAC;EACrE,MAAMQ,OAAO,GAAGJ,cAAc,IAAI,CAACA,cAAc,CAACK,YAAY,EAAE;EAEhE,oBACIjB;IAAKkB,SAAS,EAAC;kBACXlB,6BAACmB,KAAK;IACFC,OAAO,EAAEJ,OAAO,GAAGN,KAAK,CAACW,MAAM,CAAChB,OAAO,CAACiB,YAAY,GAAGC,SAAS;IAChEP,OAAO,EAAEA,OAAO;IAChBE,SAAS,EAAC;kBACVlB,6BAACwB,OAAO,oBACAf,UAAU;IACdN,GAAG,EAAEA,GAAG;IACRe,SAAS,EAAC,oCAAoC;IAC9CO,UAAU,EAAE,IAAI;IAChBnB,QAAQ,EAAEC,YAAY;IACtBC,KAAK,EAAEA;MACNJ,UAAU,CAACsB,GAAG,CAACZ,MAAM;IAAA,IAAAa,qBAAA,EAAAC,cAAA,EAAAC,qBAAA;IAAA,oBAClB7B,6BAACwB,OAAO,CAACM,MAAM;MACXC,GAAG,EAAEjB,MAAM,CAACC,EAAE;MACdP,KAAK,EAAEM,MAAM,CAACC,EAAE;MAChBiB,OAAO,EACH,CAAClB,MAAM,CAACG,YAAY,EAAE,kBAClBjB,6BAACiC,OAAO;QAACC,KAAK,EAAExB,KAAK,CAACW,MAAM,CAAChB,OAAO,CAACiB;sBACjCtB,6BAACmC,IAAI;QAACC,IAAI,EAAC,SAAS;QAAClB,SAAS,EAAC;QAA4B,CACrD,IACVK,SAAS;MAEjBc,QAAQ,EAAEvB,MAAM,CAACC,EAAE,KAAKP,KAAK,KAAK,CAACM,MAAM,CAACwB,YAAY,EAAE,IAAI,CAAC,CAACjC,OAAO,CAACQ,IAAI,CAAC0B,CAAC,IAAIA,CAAC,CAACxB,EAAE,KAAKD,MAAM,CAACC,EAAE,CAAC;OACjG,EAAAY,qBAAA,GAAAb,MAAM,CAAC0B,SAAS,CAACC,IAAI,cAAAd,qBAAA,uBAArBA,qBAAA,CAAuBe,MAAiB,KACrC5B,MAAM,CAAC6B,MAAM,0BAAQ7B,MAAM,CAAC6B,MAAM,cAAAf,cAAA,wBAAAC,qBAAA,GAAbD,cAAA,CAAeY,SAAS,CAACC,IAAI,cAAAZ,qBAAA,uBAA7BA,qBAAA,CAA+Ba,SAAS,GAAG,EAAE,CAAC,CAC3D;GACpB,CAAC,CACI,CACN,CACN;AAEd,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/FilterComparator.js

@@ -0,0 +1,111 @@
+import React__default from 'react';
+import { useLocalization } from '../../../../../../Provider/Localization.js';
+import { Select2 } from '../../../../../../Select2/Select2.js';
+import { Table3FilterComparator } from '../../../../../types.js';
+
+function FilterComparator(props) {
+  const {
+    column,
+    onChange: handleChange,
+    value,
+    ...attributes
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  const validComparators = guessComparatorsBasedOnControl(column);
+  React__default.useEffect(() => {
+    if (value === undefined || !validComparators.includes(value)) {
+      handleChange === null || handleChange === void 0 ? void 0 : handleChange(validComparators[0]);
+    }
+  }, [validComparators]);
+  return /*#__PURE__*/React__default.createElement(Select2, Object.assign({}, attributes, {
+    className: "focus:yt-focus !w-32 flex-shrink-0",
+    disabled: !column,
+    onChange: handleChange,
+    value: value
+  }), validComparators.map(comparator => ( /*#__PURE__*/React__default.createElement(Select2.Option, {
+    key: comparator,
+    value: comparator
+  }, getComparatorText(comparator, texts, column)))));
+}
+function guessComparatorsBasedOnControl(column) {
+  var _column$columnDef$met;
+  const columnMeta = (_column$columnDef$met = column === null || column === void 0 ? void 0 : column.columnDef.meta) !== null && _column$columnDef$met !== void 0 ? _column$columnDef$met : {};
+  if (Array.isArray(columnMeta.filters)) {
+    // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel
+    return columnMeta.filters;
+  }
+  if (typeof columnMeta.control === 'function') {
+    const renderedControl = columnMeta.control({
+      onBlur: () => undefined,
+      onFocus: () => undefined,
+      setValue: () => undefined,
+      value: undefined,
+      disabled: false,
+      readOnly: false,
+      ref: undefined
+    });
+    if ( /*#__PURE__*/React__default.isValidElement(renderedControl)) {
+      const {
+        props,
+        type
+      } = renderedControl;
+      if (type.displayName === 'Select2') {
+        if (props.multiple) {
+          return [Table3FilterComparator.HasAnyOf, Table3FilterComparator.HasAllOf, Table3FilterComparator.IsEqualTo, Table3FilterComparator.HasNoneOf, Table3FilterComparator.IsEmpty, Table3FilterComparator.IsNotEmpty];
+        }
+        return [Table3FilterComparator.IsEqualTo, Table3FilterComparator.IsNotEqualTo, Table3FilterComparator.IsEmpty, Table3FilterComparator.IsNotEmpty];
+      }
+    }
+  }
+  if (columnMeta.dataType === 'number') {
+    return [Table3FilterComparator.IsEqualTo, Table3FilterComparator.IsNotEqualTo, Table3FilterComparator.IsGreaterThan, Table3FilterComparator.IsLessThan, Table3FilterComparator.IsBetween, Table3FilterComparator.IsEmpty, Table3FilterComparator.IsNotEmpty];
+  }
+  if (columnMeta.control === 'datepicker' || columnMeta.dataType === 'datetime') {
+    return [Table3FilterComparator.IsEqualTo, Table3FilterComparator.IsNotEqualTo, Table3FilterComparator.IsBetween, Table3FilterComparator.IsLessThan, Table3FilterComparator.IsGreaterThan, Table3FilterComparator.IsEmpty, Table3FilterComparator.IsNotEmpty, Table3FilterComparator.IsLessThanOrEqualTo, Table3FilterComparator.IsGreaterThanOrEqualTo];
+  }
+  if (columnMeta.control === 'switch') {
+    return [Table3FilterComparator.IsEqualTo];
+  }
+  return [Table3FilterComparator.Contains, Table3FilterComparator.DoesNotContain, Table3FilterComparator.IsEqualTo, Table3FilterComparator.IsNotEqualTo, Table3FilterComparator.IsEmpty, Table3FilterComparator.IsNotEmpty];
+}
+function getComparatorText(comparator, texts, column) {
+  var _column$columnDef, _column$columnDef$met2;
+  const isDate = (column === null || column === void 0 ? void 0 : (_column$columnDef = column.columnDef) === null || _column$columnDef === void 0 ? void 0 : (_column$columnDef$met2 = _column$columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.control) === 'datepicker';
+  switch (comparator) {
+    case Table3FilterComparator.Contains:
+      return texts.table3.filters.comparators.contains;
+    case Table3FilterComparator.DoesNotContain:
+      return texts.table3.filters.comparators.doesNotContain;
+    case Table3FilterComparator.IsEqualTo:
+      return texts.table3.filters.comparators.isEqualTo;
+    case Table3FilterComparator.IsNotEqualTo:
+      return texts.table3.filters.comparators.isNotEqualTo;
+    case Table3FilterComparator.IsGreaterThan:
+      return isDate ? texts.table3.filters.comparators.isAfter : texts.table3.filters.comparators.isGreaterThan;
+    case Table3FilterComparator.IsLessThan:
+      return isDate ? texts.table3.filters.comparators.isBefore : texts.table3.filters.comparators.isLessThan;
+    case Table3FilterComparator.IsBetween:
+      return texts.table3.filters.comparators.isBetween;
+    case Table3FilterComparator.IsEmpty:
+      return texts.table3.filters.comparators.isEmpty;
+    case Table3FilterComparator.IsNotEmpty:
+      return texts.table3.filters.comparators.isNotEmpty;
+    case Table3FilterComparator.IsLessThanOrEqualTo:
+      return isDate ? texts.table3.filters.comparators.isOnOrBefore : texts.table3.filters.comparators.isLessThanOrEqualTo;
+    case Table3FilterComparator.IsGreaterThanOrEqualTo:
+      return isDate ? texts.table3.filters.comparators.isOnOrAfter : texts.table3.filters.comparators.isGreaterThanOrEqualTo;
+    case Table3FilterComparator.HasAnyOf:
+      return texts.table3.filters.comparators.hasAnyOf;
+    case Table3FilterComparator.HasAllOf:
+      return texts.table3.filters.comparators.hasAllOf;
+    case Table3FilterComparator.HasNoneOf:
+      return texts.table3.filters.comparators.hasNoneOf;
+    default:
+      return '';
+  }
+}
+
+export { FilterComparator };
+//# sourceMappingURL=FilterComparator.js.map

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/FilterComparator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterComparator.js","sources":["../../../../../../../../../../../../src/components/Table3/components/toolbar/Filter/filters/components/FilterComparator.tsx"],"sourcesContent":["import React from 'react';\nimport { Column as RTColumn, ColumnMeta } from '@tanstack/react-table';\nimport { Select2, Select2Props } from '../../../../../../Select2/Select2';\nimport { Table3FilterComparator } from '../../../../../types';\nimport { LocalizationTexts, useLocalization } from '../../../../../../Provider/Localization';\n\nexport type FilterComparatorProps<TType = unknown> = Omit<Select2Props, 'children'> & {\n    column?: RTColumn<TType, unknown>;\n};\n\nexport function FilterComparator<TType = unknown>(props: FilterComparatorProps<TType>) {\n    const { column, onChange: handleChange, value, ...attributes } = props;\n    const { texts } = useLocalization();\n\n    const validComparators = guessComparatorsBasedOnControl(column);\n\n    React.useEffect(() => {\n        if (value === undefined || !validComparators.includes(value as Table3FilterComparator)) {\n            handleChange?.(validComparators[0]);\n        }\n    }, [validComparators]);\n\n    return (\n        <Select2\n            {...attributes}\n            className=\"focus:yt-focus !w-32 flex-shrink-0\"\n            disabled={!column}\n            onChange={handleChange}\n            value={value}>\n            {validComparators.map(comparator => (\n                <Select2.Option key={comparator} value={comparator}>\n                    {getComparatorText(comparator, texts, column)}\n                </Select2.Option>\n            ))}\n        </Select2>\n    );\n}\n\nfunction guessComparatorsBasedOnControl<TType = unknown>(column?: RTColumn<TType, unknown>): Table3FilterComparator[] {\n    const columnMeta = (column?.columnDef.meta ?? {}) as ColumnMeta<TType, unknown>;\n\n    if (Array.isArray(columnMeta.filters)) {\n        // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel\n        return columnMeta.filters;\n    }\n\n    if (typeof columnMeta.control === 'function') {\n        const renderedControl = columnMeta.control({\n            onBlur: () => undefined,\n            onFocus: () => undefined,\n            setValue: () => undefined,\n            value: undefined,\n            disabled: false,\n            readOnly: false,\n            ref: undefined as any,\n        });\n\n        if (React.isValidElement(renderedControl)) {\n            const { props, type } = renderedControl as any;\n\n            if (type.displayName === 'Select2') {\n                if (props.multiple) {\n                    return [\n                        Table3FilterComparator.HasAnyOf,\n                        Table3FilterComparator.HasAllOf,\n                        Table3FilterComparator.IsEqualTo,\n                        Table3FilterComparator.HasNoneOf,\n                        Table3FilterComparator.IsEmpty,\n                        Table3FilterComparator.IsNotEmpty,\n                    ];\n                }\n\n                return [\n                    Table3FilterComparator.IsEqualTo,\n                    Table3FilterComparator.IsNotEqualTo,\n                    Table3FilterComparator.IsEmpty,\n                    Table3FilterComparator.IsNotEmpty,\n                ];\n            }\n        }\n    }\n\n    if (columnMeta.dataType === 'number') {\n        return [\n            Table3FilterComparator.IsEqualTo,\n            Table3FilterComparator.IsNotEqualTo,\n            Table3FilterComparator.IsGreaterThan,\n            Table3FilterComparator.IsLessThan,\n            Table3FilterComparator.IsBetween,\n            Table3FilterComparator.IsEmpty,\n            Table3FilterComparator.IsNotEmpty,\n        ];\n    }\n\n    if (columnMeta.control === 'datepicker' || columnMeta.dataType === 'datetime') {\n        return [\n            Table3FilterComparator.IsEqualTo,\n            Table3FilterComparator.IsNotEqualTo,\n            Table3FilterComparator.IsBetween,\n            Table3FilterComparator.IsLessThan,\n            Table3FilterComparator.IsGreaterThan,\n            Table3FilterComparator.IsEmpty,\n            Table3FilterComparator.IsNotEmpty,\n            Table3FilterComparator.IsLessThanOrEqualTo,\n            Table3FilterComparator.IsGreaterThanOrEqualTo,\n        ];\n    }\n\n    if (columnMeta.control === 'switch') {\n        return [Table3FilterComparator.IsEqualTo];\n    }\n\n    return [\n        Table3FilterComparator.Contains,\n        Table3FilterComparator.DoesNotContain,\n        Table3FilterComparator.IsEqualTo,\n        Table3FilterComparator.IsNotEqualTo,\n        Table3FilterComparator.IsEmpty,\n        Table3FilterComparator.IsNotEmpty,\n    ];\n}\n\nfunction getComparatorText<TType = unknown>(\n    comparator: Table3FilterComparator,\n    texts: LocalizationTexts,\n    column?: RTColumn<TType, unknown>\n) {\n    const isDate = column?.columnDef?.meta?.control === 'datepicker';\n\n    switch (comparator) {\n        case Table3FilterComparator.Contains:\n            return texts.table3.filters.comparators.contains;\n\n        case Table3FilterComparator.DoesNotContain:\n            return texts.table3.filters.comparators.doesNotContain;\n\n        case Table3FilterComparator.IsEqualTo:\n            return texts.table3.filters.comparators.isEqualTo;\n\n        case Table3FilterComparator.IsNotEqualTo:\n            return texts.table3.filters.comparators.isNotEqualTo;\n\n        case Table3FilterComparator.IsGreaterThan:\n            return isDate ? texts.table3.filters.comparators.isAfter : texts.table3.filters.comparators.isGreaterThan;\n\n        case Table3FilterComparator.IsLessThan:\n            return isDate ? texts.table3.filters.comparators.isBefore : texts.table3.filters.comparators.isLessThan;\n\n        case Table3FilterComparator.IsBetween:\n            return texts.table3.filters.comparators.isBetween;\n\n        case Table3FilterComparator.IsEmpty:\n            return texts.table3.filters.comparators.isEmpty;\n\n        case Table3FilterComparator.IsNotEmpty:\n            return texts.table3.filters.comparators.isNotEmpty;\n\n        case Table3FilterComparator.IsLessThanOrEqualTo:\n            return isDate ? texts.table3.filters.comparators.isOnOrBefore : texts.table3.filters.comparators.isLessThanOrEqualTo;\n\n        case Table3FilterComparator.IsGreaterThanOrEqualTo:\n            return isDate\n                ? texts.table3.filters.comparators.isOnOrAfter\n                : texts.table3.filters.comparators.isGreaterThanOrEqualTo;\n\n        case Table3FilterComparator.HasAnyOf:\n            return texts.table3.filters.comparators.hasAnyOf;\n\n        case Table3FilterComparator.HasAllOf:\n            return texts.table3.filters.comparators.hasAllOf;\n\n        case Table3FilterComparator.HasNoneOf:\n            return texts.table3.filters.comparators.hasNoneOf;\n\n        default:\n            return '';\n    }\n}\n"],"names":["FilterComparator","props","column","onChange","handleChange","value","attributes","texts","useLocalization","validComparators","guessComparatorsBasedOnControl","React","useEffect","undefined","includes","Select2","className","disabled","map","comparator","Option","key","getComparatorText","columnMeta","_column$columnDef$met","columnDef","meta","Array","isArray","filters","control","renderedControl","onBlur","onFocus","setValue","readOnly","ref","isValidElement","type","displayName","multiple","Table3FilterComparator","HasAnyOf","HasAllOf","IsEqualTo","HasNoneOf","IsEmpty","IsNotEmpty","IsNotEqualTo","dataType","IsGreaterThan","IsLessThan","IsBetween","IsLessThanOrEqualTo","IsGreaterThanOrEqualTo","Contains","DoesNotContain","isDate","_column$columnDef","_column$columnDef$met2","table3","comparators","contains","doesNotContain","isEqualTo","isNotEqualTo","isAfter","isGreaterThan","isBefore","isLessThan","isBetween","isEmpty","isNotEmpty","isOnOrBefore","isLessThanOrEqualTo","isOnOrAfter","isGreaterThanOrEqualTo","hasAnyOf","hasAllOf","hasNoneOf"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/FilterValue.js

@@ -0,0 +1,118 @@
+import React__default, { useEffect } from 'react';
+import cn from 'clsx';
+import { useLocalization } from '../../../../../../Provider/Localization.js';
+import { Input } from '../../../../../../Input/Input.js';
+import { Datepicker } from '../../../../../../Datepicker/Datepicker.js';
+import { Switch } from '../../../../../../Switch/Switch.js';
+import { getInputAppearanceClassnames } from '../../../../columns/styles.js';
+import { Table3FilterComparator } from '../../../../../types.js';
+
+function FilterValue(props) {
+  const {
+    column,
+    comparator,
+    onChange: handleChange,
+    value
+  } = props;
+  const {
+    texts
+  } = useLocalization();
+  if (comparator === Table3FilterComparator.IsEmpty || comparator === Table3FilterComparator.IsNotEmpty) {
+    return null;
+  }
+  if (comparator === Table3FilterComparator.IsBetween) {
+    var _column$columnDef$met;
+    const fromValue = Array.isArray(value) ? value[0] : undefined;
+    const toValue = Array.isArray(value) ? value[1] : undefined;
+    if (column === undefined) {
+      return /*#__PURE__*/React__default.createElement(Input, {
+        "aria-label": texts.table3.filters.emptyFilter.value,
+        className: "flex-grow",
+        disabled: true,
+        value: texts.table3.filters.emptyFilter.value
+      });
+    }
+    if (((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.dataType) === 'datetime') {
+      return /*#__PURE__*/React__default.createElement("div", {
+        className: "flex flex-grow items-center gap-2"
+      }, /*#__PURE__*/React__default.createElement(Control, {
+        column: column,
+        onChange: value => handleChange([value, toValue]),
+        value: fromValue
+      }), /*#__PURE__*/React__default.createElement(Control, {
+        column: column,
+        onChange: value => handleChange([fromValue, value]),
+        value: toValue
+      }));
+    }
+    return /*#__PURE__*/React__default.createElement("div", {
+      className: "flex flex-grow items-center gap-2"
+    }, /*#__PURE__*/React__default.createElement(Control, {
+      column: column,
+      onChange: value => handleChange([isNaN(value) ? undefined : value, toValue]),
+      placeholder: "from",
+      value: fromValue !== null && fromValue !== void 0 ? fromValue : ''
+    }), /*#__PURE__*/React__default.createElement(Control, {
+      column: column,
+      onChange: value => handleChange([fromValue, isNaN(value) ? undefined : value]),
+      placeholder: "to",
+      value: toValue !== null && toValue !== void 0 ? toValue : ''
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement(Control, {
+    column: column,
+    onChange: handleChange,
+    value: value
+  });
+}
+function Control(props) {
+  var _column$columnDef$met2, _column$columnDef$met3;
+  const {
+    column,
+    onChange,
+    value,
+    ...attributes
+  } = props;
+  const controlRenderer = column === null || column === void 0 ? void 0 : (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.control;
+  const dataType = column === null || column === void 0 ? void 0 : (_column$columnDef$met3 = column.columnDef.meta) === null || _column$columnDef$met3 === void 0 ? void 0 : _column$columnDef$met3.dataType;
+  useEffect(() => {
+    if (controlRenderer === 'switch') {
+      onChange(false);
+    }
+  }, []);
+  if (typeof controlRenderer === 'function') {
+    return controlRenderer({
+      ...attributes,
+      setValue: value => onChange(value),
+      value
+    });
+  } else if (controlRenderer === 'datepicker' || dataType === 'datetime') {
+    return /*#__PURE__*/React__default.createElement(Datepicker, Object.assign({}, attributes, {
+      onChange: event => onChange(event.detail),
+      value: value
+    }));
+  } else if (controlRenderer === 'switch') {
+    return /*#__PURE__*/React__default.createElement(Switch, Object.assign({}, attributes, {
+      className: "m-1.5",
+      checked: Boolean(value),
+      onChange: onChange
+    }));
+  } else if ((controlRenderer === 'input' || controlRenderer === undefined) && dataType === 'number') {
+    return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {
+      className: cn(getInputAppearanceClassnames(), 'flex-grow'),
+      type: "number",
+      onChange: event => onChange(event.target.valueAsNumber),
+      value: String(value !== null && value !== void 0 ? value : '')
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement(Input, Object.assign({
+    disabled: !column
+  }, attributes, {
+    className: "flex-grow",
+    onChange: event => onChange(event.target.value),
+    value: String(value !== null && value !== void 0 ? value : '')
+  }));
+}
+
+export { FilterValue };
+//# sourceMappingURL=FilterValue.js.map

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/Filter/filters/components/FilterValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterValue.js","sources":["../../../../../../../../../../../../src/components/Table3/components/toolbar/Filter/filters/components/FilterValue.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { Column as RTColumn } from '@tanstack/react-table';\nimport { Input } from '../../../../../../Input/Input';\nimport { Table3FilterComparator } from '../../../../../types';\nimport { Datepicker } from '../../../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../../../Switch/Switch';\nimport { getInputAppearanceClassnames } from '../../../../columns/styles';\nimport cn from 'clsx';\nimport { useLocalization } from '../../../../../../Provider/Localization';\n\nexport type FilterValueProps<TType = unknown> = {\n    column?: RTColumn<TType, unknown>;\n    comparator: Table3FilterComparator | null;\n    onChange: (value: any) => void;\n    value: any;\n};\n\nexport function FilterValue<TType = unknown>(props: FilterValueProps<TType>) {\n    const { column, comparator, onChange: handleChange, value } = props;\n    const { texts } = useLocalization();\n    if (comparator === Table3FilterComparator.IsEmpty || comparator === Table3FilterComparator.IsNotEmpty) {\n        return null;\n    }\n\n    if (comparator === Table3FilterComparator.IsBetween) {\n        const fromValue = Array.isArray(value) ? value[0] : undefined;\n        const toValue = Array.isArray(value) ? value[1] : undefined;\n\n        if (column === undefined) {\n            return (\n                <Input\n                    aria-label={texts.table3.filters.emptyFilter.value}\n                    className=\"flex-grow\"\n                    disabled\n                    value={texts.table3.filters.emptyFilter.value}\n                />\n            );\n        }\n\n        if (column.columnDef.meta?.dataType === 'datetime') {\n            return (\n                <div className=\"flex flex-grow items-center gap-2\">\n                    <Control column={column} onChange={value => handleChange([value, toValue])} value={fromValue} />\n                    <Control column={column} onChange={value => handleChange([fromValue, value])} value={toValue} />\n                </div>\n            );\n        }\n\n        return (\n            <div className=\"flex flex-grow items-center gap-2\">\n                <Control\n                    column={column}\n                    onChange={value => handleChange([isNaN(value) ? undefined : value, toValue])}\n                    placeholder=\"from\"\n                    value={fromValue ?? ''}\n                />\n                <Control\n                    column={column}\n                    onChange={value => handleChange([fromValue, isNaN(value) ? undefined : value])}\n                    placeholder=\"to\"\n                    value={toValue ?? ''}\n                />\n            </div>\n        );\n    }\n    return <Control column={column} onChange={handleChange} value={value} />;\n}\n\nfunction Control(props) {\n    const { column, onChange, value, ...attributes } = props;\n    const controlRenderer = column?.columnDef.meta?.control;\n    const dataType = column?.columnDef.meta?.dataType;\n\n    useEffect(() => {\n        if (controlRenderer === 'switch') {\n            onChange(false);\n        }\n    }, []);\n\n    if (typeof controlRenderer === 'function') {\n        return controlRenderer({\n            ...attributes,\n            setValue: value => onChange(value),\n            value,\n        });\n    } else if (controlRenderer === 'datepicker' || dataType === 'datetime') {\n        return <Datepicker {...attributes} onChange={event => onChange((event as any).detail)} value={value as Date} />;\n    } else if (controlRenderer === 'switch') {\n        return <Switch {...attributes} className=\"m-1.5\" checked={Boolean(value)} onChange={onChange} />;\n    } else if ((controlRenderer === 'input' || controlRenderer === undefined) && dataType === 'number') {\n        return (\n            <Input\n                {...attributes}\n                className={cn(getInputAppearanceClassnames(), 'flex-grow')}\n                type=\"number\"\n                onChange={event => onChange(event.target.valueAsNumber)}\n                value={String(value ?? '')}\n            />\n        );\n    }\n\n    return (\n        <Input\n            disabled={!column}\n            {...attributes}\n            className=\"flex-grow\"\n            onChange={event => onChange(event.target.value)}\n            value={String(value ?? '')}\n        />\n    );\n}\n"],"names":["FilterValue","props","column","comparator","onChange","handleChange","value","texts","useLocalization","Table3FilterComparator","IsEmpty","IsNotEmpty","IsBetween","_column$columnDef$met","fromValue","Array","isArray","undefined","toValue","React","Input","table3","filters","emptyFilter","className","disabled","columnDef","meta","dataType","Control","isNaN","placeholder","attributes","controlRenderer","_column$columnDef$met2","control","_column$columnDef$met3","useEffect","setValue","Datepicker","event","detail","Switch","checked","Boolean","cn","getInputAppearanceClassnames","type","target","valueAsNumber","String"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/FontSize.js

@@ -0,0 +1,26 @@
+import React__default from 'react';
+import { useLocalization } from '../../../Provider/Localization.js';
+import { Menu } from '../../../Menu/Menu.js';
+import { FontSizes } from '../../../../types.js';
+
+function FontSize(props) {
+  const {
+    texts
+  } = useLocalization();
+  const meta = props.table.options.meta;
+  const handleChange = value => meta.fontSize.setSize(value);
+  return /*#__PURE__*/React__default.createElement(Menu.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu.RadioGroup, {
+    onChange: handleChange,
+    value: meta.fontSize.size
+  }, /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
+    value: FontSizes.small
+  }, texts.table3.fontSize.sizes.small), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
+    value: FontSizes.medium
+  }, texts.table3.fontSize.sizes.medium), /*#__PURE__*/React__default.createElement(Menu.RadioGroup.Item, {
+    disabled: meta.rowHeight.height === 'short',
+    value: FontSizes.large
+  }, texts.table3.fontSize.sizes.large)));
+}
+
+export { FontSize };
+//# sourceMappingURL=FontSize.js.map

package/dist/esm/packages/taco/src/components/Table3/components/toolbar/FontSize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FontSize.js","sources":["../../../../../../../../../src/components/Table3/components/toolbar/FontSize.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { Menu } from '../../../Menu/Menu';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { FontSizes } from '../../../../types';\nimport { RadioGroupItemValue } from '../../../..';\n\ntype FontSizeButtonProps<TType = unknown> = {\n    table: RTable<TType>;\n};\n\nexport function FontSize<TType = unknown>(props: FontSizeButtonProps<TType>) {\n    const { texts } = useLocalization();\n    const meta = props.table.options.meta as TableMeta<unknown>;\n    const handleChange = (value: RadioGroupItemValue) => meta.fontSize.setSize(value as FontSizes);\n\n    return (\n        <Menu.SubMenu>\n            <Menu.RadioGroup onChange={handleChange} value={meta.fontSize.size}>\n                <Menu.RadioGroup.Item value={FontSizes.small}>{texts.table3.fontSize.sizes.small}</Menu.RadioGroup.Item>\n                <Menu.RadioGroup.Item value={FontSizes.medium}>{texts.table3.fontSize.sizes.medium}</Menu.RadioGroup.Item>\n                <Menu.RadioGroup.Item disabled={meta.rowHeight.height === 'short'} value={FontSizes.large}>\n                    {texts.table3.fontSize.sizes.large}\n                </Menu.RadioGroup.Item>\n            </Menu.RadioGroup>\n        </Menu.SubMenu>\n    );\n}\n"],"names":["FontSize","props","texts","useLocalization","meta","table","options","handleChange","value","fontSize","setSize","React","Menu","SubMenu","RadioGroup","onChange","size","Item","FontSizes","small","table3","sizes","medium","disabled","rowHeight","height","large"],"mappings":";;;;;SAWgBA,QAAQA,CAAkBC,KAAiC;EACvE,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,IAAI,GAAGH,KAAK,CAACI,KAAK,CAACC,OAAO,CAACF,IAA0B;EAC3D,MAAMG,YAAY,GAAIC,KAA0B,IAAKJ,IAAI,CAACK,QAAQ,CAACC,OAAO,CAACF,KAAkB,CAAC;EAE9F,oBACIG,6BAACC,IAAI,CAACC,OAAO,qBACTF,6BAACC,IAAI,CAACE,UAAU;IAACC,QAAQ,EAAER,YAAY;IAAEC,KAAK,EAAEJ,IAAI,CAACK,QAAQ,CAACO;kBAC1DL,6BAACC,IAAI,CAACE,UAAU,CAACG,IAAI;IAACT,KAAK,EAAEU,SAAS,CAACC;KAAQjB,KAAK,CAACkB,MAAM,CAACX,QAAQ,CAACY,KAAK,CAACF,KAAK,CAAwB,eACxGR,6BAACC,IAAI,CAACE,UAAU,CAACG,IAAI;IAACT,KAAK,EAAEU,SAAS,CAACI;KAASpB,KAAK,CAACkB,MAAM,CAACX,QAAQ,CAACY,KAAK,CAACC,MAAM,CAAwB,eAC1GX,6BAACC,IAAI,CAACE,UAAU,CAACG,IAAI;IAACM,QAAQ,EAAEnB,IAAI,CAACoB,SAAS,CAACC,MAAM,KAAK,OAAO;IAAEjB,KAAK,EAAEU,SAAS,CAACQ;KAC/ExB,KAAK,CAACkB,MAAM,CAACX,QAAQ,CAACY,KAAK,CAACK,KAAK,CACf,CACT,CACP;AAEvB;;;;"}