@procore/data-table 14.46.5 → 14.47.0

package/dist/modern/index.js

@@ -1,6 +1,6 @@
 import React80, { useEffect, useState, forwardRef, useContext, useRef, useImperativeHandle, useLayoutEffect, useCallback, useMemo, memo, Component as Component$1, createElement } from 'react';
 import { uniqBy, prop, startsWith, mergeDeepRight, intersection, equals, omit, mergeDeepLeft, isNil, isEmpty, groupBy } from 'ramda';
-import { useI18nContext, Select, Input, UNSAFE_useOverlayTriggerContext, Card, Flex, Box, SegmentedController, Calendar, useDateTime, OverlayTrigger, isEventSource, DateInput, UNSAFE_isValidYearRange, DateSelect, PillSelect, TextArea, UNSAFE_useMenuImperativeControlNavigation, UNSAFE_Menu, UNSAFE_menuItemsWrapperAttribute, Spinner as Spinner$1, FlexList, Typography, Tooltip, Button, Required, MultiSelect, colors, Form, spacing, Switch, Panel, SelectButton, StyledSelectButton, typographyWeights, StyledSelectButtonLabel, StyledButton, StyledSelectArrow, Popover, UNSAFE_StyledSuperSelectTrigger, UNSAFE_StyledSuperSelectLabel, UNSAFE_StyledSuperSelectArrow, UNSAFE_StyledFilterTokenLabel, DateTimeProvider, UNSAFE_mergeRefs, useField, Label as Label$1, ContactItem as ContactItem$1, Checkbox, RadioButton, Link, AvatarStack, Pill, UNSAFE_SuperSelect, ToggleButton, Avatar, UNSAFE_useSuperSelectContext, UNSAFE_FilterToken, Typeahead, useI18n, I18nContext, Pagination as Pagination$1, H3, useVisibility, DropdownFlyout, EmptyState as EmptyState$1, StyledDropdownFlyoutLabel, StyledDropdownFlyoutExpandIcon } from '@procore/core-react';
+import { useI18nContext, Select, Input, UNSAFE_useOverlayTriggerContext, Card, Flex, Box, SegmentedController, Calendar, useDateTime, OverlayTrigger, isEventSource, DateInput, UNSAFE_isValidYearRange, DateSelect, PillSelect, TextArea, UNSAFE_useMenuImperativeControlNavigation, UNSAFE_Menu, UNSAFE_menuItemsWrapperAttribute, Spinner as Spinner$1, FlexList, Typography, Tooltip, Button, Required, MultiSelect, colors, Form, spacing, Switch, Panel, SelectButton, StyledSelectButton, typographyWeights, StyledSelectButtonLabel, StyledButton, StyledSelectArrow, Popover, UNSAFE_StyledSuperSelectTrigger, UNSAFE_StyledSuperSelectLabel, UNSAFE_StyledSuperSelectArrow, UNSAFE_StyledFilterTokenLabel, DateTimeProvider, UNSAFE_mergeRefs, useField, Label, ContactItem as ContactItem$1, Checkbox, RadioButton, Link, AvatarStack, Pill, UNSAFE_SuperSelect, ToggleButton, Avatar, UNSAFE_useSuperSelectContext, UNSAFE_FilterToken, Typeahead, useI18n, I18nContext, Pagination as Pagination$1, useVisibility, DropdownFlyout, EmptyState as EmptyState$1, StyledDropdownFlyoutLabel, StyledDropdownFlyoutExpandIcon } from '@procore/core-react';
 import classnames from 'classnames/bind';
 import debounce5 from 'lodash.debounce';
 import { Error as Error$1, Grip, Building, ExternalLink, Clear, Calendar as Calendar$1, Pencil, CaretsIn, CaretsOut, ArrowDown, ArrowUp, CaretsInVertical, CaretsOutVerticalWithLine, CaretsOutVertical, CaretDown, CaretRight } from '@procore/core-icons';
@@ -54171,8 +54171,23 @@ function useFilterOptions() {
 }
 var NumberFilterRenderer = React80.memo(
   function(props) {
-    const ariaLabelledBy = props["aria-labelledby"];
+    const fieldLabel = props["aria-label"];
     const I18n = useI18nContext();
+    const minValueAriaLabel = I18n.t("labels.min_value_aria_label", {
+      defaultValue: "%{field} minimum value",
+      field: fieldLabel ?? "",
+      scope
+    }).trim();
+    const maxValueAriaLabel = I18n.t("labels.max_value_aria_label", {
+      defaultValue: "%{field} maximum value",
+      field: fieldLabel ?? "",
+      scope
+    }).trim();
+    const valueAriaLabel = I18n.t("labels.value_aria_label", {
+      defaultValue: "%{field} value",
+      field: fieldLabel ?? "",
+      scope
+    }).trim();
     const defaultFilterOptions = useFilterOptions();
     const lowerLimitInputRef = React80.useRef(null);
     const [localValue, setLocalValue] = React80.useState(
@@ -54257,7 +54272,7 @@ var NumberFilterRenderer = React80.memo(
       {
         block: true,
         label: localLabel,
-        "aria-labelledby": ariaLabelledBy,
+        "aria-label": fieldLabel,
         onClear,
         onSelect,
         placeholder: I18n.t("labels.placeholder", {
@@ -54289,6 +54304,7 @@ var NumberFilterRenderer = React80.memo(
         {
           ref: lowerLimitInputRef,
           type: "number",
+          "aria-label": hasUpperLimitValue ? minValueAriaLabel : valueAriaLabel,
           placeholder: I18n.t("labels.input_placeholder", {
             defaultValue: "Enter Value",
             scope
@@ -54305,6 +54321,7 @@ var NumberFilterRenderer = React80.memo(
         Input,
         {
           type: "number",
+          "aria-label": maxValueAriaLabel,
           value: localValue?.filterTo,
           onChange: onUpdateUpperLimit
         }
@@ -54489,6 +54506,7 @@ var ServerSideFilter = ({
     );
     return null;
   }
+  const filterLabel = typeof filterHeading === "string" ? filterHeading : columnDefinition.headerName;
   return /* @__PURE__ */ React80.createElement(
     Box,
     {
@@ -54498,7 +54516,7 @@ var ServerSideFilter = ({
       style: { width: "100%" }
     },
     filterHeading ? /* @__PURE__ */ React80.createElement(
-      H3,
+      Label,
       {
         "data-qa": `data-table-filter-heading-${fieldName}`,
         id: `data-table-filter-heading-${fieldName}`
@@ -54508,6 +54526,7 @@ var ServerSideFilter = ({
     /* @__PURE__ */ React80.createElement(
       Component4,
       {
+        "aria-label": filterLabel,
         columnDefinition,
         "data-qa": `data-table-filter-input-${fieldName}`,
         getOptions,
@@ -54524,9 +54543,25 @@ var ServerSideFilter = ({
 var DEBOUNCE_TIME = 300;
 function ServerSideNumberFilterRenderer({
   value = [],
-  onChange
+  onChange,
+  "aria-label": fieldLabel
 }) {
   const I18n = useI18nContext();
+  const minValueAriaLabel = I18n.t("labels.min_value_aria_label", {
+    defaultValue: "%{field} minimum value",
+    field: fieldLabel ?? "",
+    scope: "dataTable.filters.numberFilter"
+  }).trim();
+  const maxValueAriaLabel = I18n.t("labels.max_value_aria_label", {
+    defaultValue: "%{field} maximum value",
+    field: fieldLabel ?? "",
+    scope: "dataTable.filters.numberFilter"
+  }).trim();
+  const valueAriaLabel = I18n.t("labels.value_aria_label", {
+    defaultValue: "%{field} value",
+    field: fieldLabel ?? "",
+    scope: "dataTable.filters.numberFilter"
+  }).trim();
   const [localFilter, setLocalFilter] = useState(
     () => {
       return {};
@@ -54713,6 +54748,7 @@ function ServerSideNumberFilterRenderer({
     Input,
     {
       type: "number",
+      "aria-label": valueAriaLabel,
       placeholder: I18n.t("labels.input_placeholder", {
         defaultValue: "Enter Value",
         scope: "dataTable.filters.numberFilter"
@@ -54724,6 +54760,7 @@ function ServerSideNumberFilterRenderer({
     Input,
     {
       type: "number",
+      "aria-label": minValueAriaLabel,
       placeholder: I18n.t("labels.input_placeholder", {
         defaultValue: "Enter Value",
         scope: "dataTable.filters.numberFilter"
@@ -54738,6 +54775,7 @@ function ServerSideNumberFilterRenderer({
     Input,
     {
       type: "number",
+      "aria-label": maxValueAriaLabel,
       placeholder: I18n.t("labels.input_placeholder", {
         defaultValue: "Enter Value",
         scope: "dataTable.filters.numberFilter"
@@ -54752,7 +54790,8 @@ function ServerSideNumberFilterRenderer({
 var DEBOUNCE_TIME2 = 300;
 function ServerSideMultiNumberFilterRenderer({
   value = [],
-  onChange
+  onChange,
+  "aria-label": fieldLabel
 }) {
   const I18n = useI18nContext();
   const [firstFilter, setFirstFilter] = useState(
@@ -54829,6 +54868,7 @@ function ServerSideMultiNumberFilterRenderer({
   return /* @__PURE__ */ React80.createElement(Box, { style: { display: "flex", flexDirection: "column", gap: "8px" } }, /* @__PURE__ */ React80.createElement(
     ServerSideNumberFilterRenderer,
     {
+      "aria-label": fieldLabel,
       value: firstFilter.type ? [firstFilter] : [],
       onChange: handleFirstFilterChange
     }
@@ -54865,6 +54905,7 @@ function ServerSideMultiNumberFilterRenderer({
   ), /* @__PURE__ */ React80.createElement(
     ServerSideNumberFilterRenderer,
     {
+      "aria-label": fieldLabel,
       value: secondFilter.type ? [secondFilter] : [],
       onChange: handleSecondFilterChange
     }
@@ -89253,7 +89294,7 @@ var __decorate230 = function(decorators, target, key, desc) {
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r2 = (c < 3 ? d(r2) : c > 3 ? d(target, key, r2) : d(target, key)) || r2;
   return c > 3 && r2 && Object.defineProperty(target, key, r2), r2;
 };
-var Label = class {
+var Label2 = class {
   constructor() {
     this.enabled = true;
     this.fontSize = 12;
@@ -89268,22 +89309,22 @@ var Label = class {
 };
 __decorate230([
   Validate(BOOLEAN)
-], Label.prototype, "enabled", void 0);
+], Label2.prototype, "enabled", void 0);
 __decorate230([
   Validate(NUMBER(0))
-], Label.prototype, "fontSize", void 0);
+], Label2.prototype, "fontSize", void 0);
 __decorate230([
   Validate(STRING)
-], Label.prototype, "fontFamily", void 0);
+], Label2.prototype, "fontFamily", void 0);
 __decorate230([
   Validate(OPT_FONT_STYLE)
-], Label.prototype, "fontStyle", void 0);
+], Label2.prototype, "fontStyle", void 0);
 __decorate230([
   Validate(OPT_FONT_WEIGHT)
-], Label.prototype, "fontWeight", void 0);
+], Label2.prototype, "fontWeight", void 0);
 __decorate230([
   Validate(COLOR_STRING)
-], Label.prototype, "color", void 0);
+], Label2.prototype, "color", void 0);
 function calculateLabelRotation(opts) {
   const { parallelFlipRotation = 0, regularFlipRotation = 0 } = opts;
   const configuredRotation = opts.rotation ? normalizeAngle360(toRadians(opts.rotation)) : 0;
@@ -91024,7 +91065,7 @@ var PieNodeTag;
   PieNodeTag2[PieNodeTag2["Callout"] = 1] = "Callout";
   PieNodeTag2[PieNodeTag2["Label"] = 2] = "Label";
 })(PieNodeTag || (PieNodeTag = {}));
-var PieSeriesCalloutLabel = class extends Label {
+var PieSeriesCalloutLabel = class extends Label2 {
   constructor() {
     super(...arguments);
     this.offset = 3;
@@ -91053,7 +91094,7 @@ __decorate238([
 __decorate238([
   Validate(BOOLEAN)
 ], PieSeriesCalloutLabel.prototype, "avoidCollisions", void 0);
-var PieSeriesSectorLabel = class extends Label {
+var PieSeriesSectorLabel = class extends Label2 {
   constructor() {
     super(...arguments);
     this.positionOffset = 0;
@@ -91104,7 +91145,7 @@ var PieTitle = class extends Caption {
 __decorate238([
   Validate(BOOLEAN)
 ], PieTitle.prototype, "showInLegend", void 0);
-var DoughnutInnerLabel = class extends Label {
+var DoughnutInnerLabel = class extends Label2 {
   constructor() {
     super(...arguments);
     this.text = "";
@@ -95211,7 +95252,7 @@ var __awaiter11 = function(thisArg, _arguments, P, generator) {
     step((generator = generator.apply(thisArg, [])).next());
   });
 };
-var AreaSeriesLabel = class extends Label {
+var AreaSeriesLabel = class extends Label2 {
   constructor() {
     super(...arguments);
     this.formatter = void 0;
@@ -96253,7 +96294,7 @@ var BarSeriesNodeTag;
   BarSeriesNodeTag2[BarSeriesNodeTag2["Bar"] = 0] = "Bar";
   BarSeriesNodeTag2[BarSeriesNodeTag2["Label"] = 1] = "Label";
 })(BarSeriesNodeTag || (BarSeriesNodeTag = {}));
-var BarSeriesLabel = class extends Label {
+var BarSeriesLabel = class extends Label2 {
   constructor() {
     super(...arguments);
     this.formatter = void 0;
@@ -96998,7 +97039,7 @@ var HistogramSeriesNodeTag;
   HistogramSeriesNodeTag2[HistogramSeriesNodeTag2["Bin"] = 0] = "Bin";
   HistogramSeriesNodeTag2[HistogramSeriesNodeTag2["Label"] = 1] = "Label";
 })(HistogramSeriesNodeTag || (HistogramSeriesNodeTag = {}));
-var HistogramSeriesLabel = class extends Label {
+var HistogramSeriesLabel = class extends Label2 {
   constructor() {
     super(...arguments);
     this.formatter = void 0;
@@ -97609,7 +97650,7 @@ var __awaiter14 = function(thisArg, _arguments, P, generator) {
     step((generator = generator.apply(thisArg, [])).next());
   });
 };
-var LineSeriesLabel = class extends Label {
+var LineSeriesLabel = class extends Label2 {
   constructor() {
     super(...arguments);
     this.formatter = void 0;
@@ -98270,7 +98311,7 @@ var __awaiter15 = function(thisArg, _arguments, P, generator) {
     step((generator = generator.apply(thisArg, [])).next());
   });
 };
-var ScatterSeriesLabel = class extends Label {
+var ScatterSeriesLabel = class extends Label2 {
   constructor() {
     super(...arguments);
     this.formatter = void 0;
@@ -98846,7 +98887,7 @@ var TreemapSeriesNodeDoubleClickEvent = class extends TreemapSeriesNodeBaseClick
     this.type = "nodeDoubleClick";
   }
 };
-var TreemapSeriesLabel = class extends Label {
+var TreemapSeriesLabel = class extends Label2 {
   constructor() {
     super(...arguments);
     this.padding = 10;
@@ -98855,7 +98896,7 @@ var TreemapSeriesLabel = class extends Label {
 __decorate255([
   Validate(NUMBER(0))
 ], TreemapSeriesLabel.prototype, "padding", void 0);
-var TreemapSeriesTileLabel = class extends Label {
+var TreemapSeriesTileLabel = class extends Label2 {
   constructor() {
     super(...arguments);
     this.wrapping = "on-space";
@@ -98867,7 +98908,7 @@ __decorate255([
 var TreemapValueLabel = class {
   constructor() {
     this.style = (() => {
-      const label = new Label();
+      const label = new Label2();
       label.color = "white";
       return label;
     })();
@@ -101398,7 +101439,7 @@ __export(integrated_charts_scene_exports, {
   Group: () => Group,
   HdpiCanvas: () => HdpiCanvas,
   Image: () => Image,
-  Label: () => Label,
+  Label: () => Label2,
   Line: () => Line,
   LinearScale: () => LinearScale,
   Marker: () => Marker,
@@ -102904,7 +102945,7 @@ var LineSparkline = class extends Sparkline {
 LineSparkline.className = "LineSparkline";
 
 // ../../node_modules/@ag-grid-enterprise/sparklines/dist/esm/es6/sparkline/label/label.mjs
-var Label2 = class {
+var Label3 = class {
   constructor() {
     this.enabled = true;
     this.fontSize = 8;
@@ -102929,7 +102970,7 @@ var BarColumnLabelPlacement2;
   BarColumnLabelPlacement3["Center"] = "center";
   BarColumnLabelPlacement3["OutsideEnd"] = "outsideEnd";
 })(BarColumnLabelPlacement2 || (BarColumnLabelPlacement2 = {}));
-var BarColumnLabel = class extends Label2 {
+var BarColumnLabel = class extends Label3 {
   constructor() {
     super(...arguments);
     this.formatter = void 0;
@@ -105990,7 +106031,10 @@ var en_default = {
         labels: {
           and: "and",
           input_placeholder: "Enter Value",
-          placeholder: "Select an item"
+          max_value_aria_label: "%{field} maximum value",
+          min_value_aria_label: "%{field} minimum value",
+          placeholder: "Select an item",
+          value_aria_label: "%{field} value"
         },
         options: {
           any_value: "Any Value",
@@ -107810,7 +107854,10 @@ var pseudo_default = {
         labels: {
           and: "[\u0227\u019E\u1E13]",
           input_placeholder: "[\u1E16\u1E16\u1E16\u019E\u0167\u1E17\u0159 \xB7 \u1E7C\u0227\u0140\u016D\u1E17\u1E17\u1E17]",
-          placeholder: "[\u015E\u015E\u015E\u1E17\u0140\u1E17\u0188\u0167 \xB7 \u0227\u019E \xB7 \u012B\u0167\u1E17\u1E3F\u1E3F\u1E3F]"
+          max_value_aria_label: "[[NOTRANSLATE]%{field}[/NOTRANSLATE] \xB7  \xB7  \xB7 \u1E3F\u0227\u1E8B\u012B\u1E3F\u016D\u1E3F \xB7 \u1E7D\u0227\u0140\u016D\u1E17\u1E17\u1E17]",
+          min_value_aria_label: "[[NOTRANSLATE]%{field}[/NOTRANSLATE] \xB7  \xB7  \xB7 \u1E3F\u012B\u019E\u012B\u1E3F\u016D\u1E3F \xB7 \u1E7D\u0227\u0140\u016D\u1E17\u1E17\u1E17]",
+          placeholder: "[\u015E\u015E\u015E\u1E17\u0140\u1E17\u0188\u0167 \xB7 \u0227\u019E \xB7 \u012B\u0167\u1E17\u1E3F\u1E3F\u1E3F]",
+          value_aria_label: "[[NOTRANSLATE]%{field}[/NOTRANSLATE] \xB7  \xB7 \u1E7D\u0227\u0140\u016D\u1E17\u1E17]"
         },
         options: {
           any_value: "[\u0226\u0226\u019E\u1E8F \xB7 \u1E7C\u0227\u0140\u016D\u1E17\u1E17]",
@@ -111185,8 +111232,9 @@ function ClientSideFilterInner(props) {
   const { Component: Component4, columnDefinition, onChange, options, value } = props;
   const filterHeading = columnDefinition.filterProps?.getFilterHeadingText?.(columnDefinition) ?? columnDefinition.headerName;
   const filterOptions = React80.useMemo(() => options ?? [], [options]);
+  const filterLabel = typeof filterHeading === "string" ? filterHeading : columnDefinition.headerName;
   return /* @__PURE__ */ React80.createElement(Box, { as: "li", display: "block", paddingBottom: "xl", style: { width: "100%" } }, filterHeading && /* @__PURE__ */ React80.createElement(
-    Label$1,
+    Label,
     {
       "data-qa": `data-table-filter-heading-${columnDefinition.field}`,
       id: `data-table-filter-heading-${columnDefinition.field}`
@@ -111196,7 +111244,7 @@ function ClientSideFilterInner(props) {
     Component4,
     {
       "data-qa": `data-table-filter-input-${columnDefinition.field}`,
-      "aria-labelledby": filterHeading ? `data-table-filter-heading-${columnDefinition.field}` : void 0,
+      "aria-label": filterLabel,
       columnDefinition,
       onChange,
       options: filterOptions,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@procore/data-table",
-  "version": "14.46.5",
+  "version": "14.47.0",
   "description": "Complex data grid built on top of ag-grid, with DST components and styles.",
   "author": "Procore Technologies",
   "homepage": "https://github.com/procore/core/tree/main/packages/data-table",
@@ -73,7 +73,7 @@
     "styled-components": ">= 5.1.1 < 7"
   },
   "dependencies": {
-    "@procore/cdn-translations": "0.1.13",
+    "@procore/cdn-translations": "^1.0.1",
     "@procore/error-pages": "^0.2.3",
     "@procore/labs-datetime-select": "^0.2.2",
     "@procore/labs-group-by-select": "4.1.0",
@@ -108,7 +108,7 @@
     "@procore/core-css": "10.17.0",
     "@procore/core-icons": "^12.18.0",
     "@procore/core-prettier": "10.2.0",
-    "@procore/core-react": "^12.50.1",
+    "@procore/core-react": "^12.51.0",
     "@procore/eslint-config": "10.0.0",
     "@procore/globalization-toolkit": "3.1.0",
     "@procore/labs-financials-utils": "4.3.1",