@procore/data-table 14.46.5 → 14.47.0

package/dist/legacy/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';
@@ -54207,8 +54207,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(
@@ -54297,7 +54312,7 @@ var NumberFilterRenderer = React80.memo(
       {
         block: true,
         label: localLabel,
-        "aria-labelledby": ariaLabelledBy,
+        "aria-label": fieldLabel,
         onClear,
         onSelect,
         placeholder: I18n.t("labels.placeholder", {
@@ -54329,6 +54344,7 @@ var NumberFilterRenderer = React80.memo(
         {
           ref: lowerLimitInputRef,
           type: "number",
+          "aria-label": hasUpperLimitValue ? minValueAriaLabel : valueAriaLabel,
           placeholder: I18n.t("labels.input_placeholder", {
             defaultValue: "Enter Value",
             scope
@@ -54345,6 +54361,7 @@ var NumberFilterRenderer = React80.memo(
         Input,
         {
           type: "number",
+          "aria-label": maxValueAriaLabel,
           value: localValue == null ? void 0 : localValue.filterTo,
           onChange: onUpdateUpperLimit
         }
@@ -54530,6 +54547,7 @@ var ServerSideFilter = ({
     );
     return null;
   }
+  const filterLabel = typeof filterHeading === "string" ? filterHeading : columnDefinition.headerName;
   return /* @__PURE__ */ React80.createElement(
     Box,
     {
@@ -54539,7 +54557,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}`
@@ -54549,6 +54567,7 @@ var ServerSideFilter = ({
     /* @__PURE__ */ React80.createElement(
       Component4,
       {
+        "aria-label": filterLabel,
         columnDefinition,
         "data-qa": `data-table-filter-input-${fieldName}`,
         getOptions,
@@ -54565,9 +54584,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 {};
@@ -54755,6 +54790,7 @@ function ServerSideNumberFilterRenderer({
     Input,
     {
       type: "number",
+      "aria-label": valueAriaLabel,
       placeholder: I18n.t("labels.input_placeholder", {
         defaultValue: "Enter Value",
         scope: "dataTable.filters.numberFilter"
@@ -54766,6 +54802,7 @@ function ServerSideNumberFilterRenderer({
     Input,
     {
       type: "number",
+      "aria-label": minValueAriaLabel,
       placeholder: I18n.t("labels.input_placeholder", {
         defaultValue: "Enter Value",
         scope: "dataTable.filters.numberFilter"
@@ -54780,6 +54817,7 @@ function ServerSideNumberFilterRenderer({
     Input,
     {
       type: "number",
+      "aria-label": maxValueAriaLabel,
       placeholder: I18n.t("labels.input_placeholder", {
         defaultValue: "Enter Value",
         scope: "dataTable.filters.numberFilter"
@@ -54794,7 +54832,8 @@ function ServerSideNumberFilterRenderer({
 var DEBOUNCE_TIME2 = 300;
 function ServerSideMultiNumberFilterRenderer({
   value = [],
-  onChange
+  onChange,
+  "aria-label": fieldLabel
 }) {
   const I18n = useI18nContext();
   const [firstFilter, setFirstFilter] = useState(
@@ -54871,6 +54910,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
     }
@@ -54907,6 +54947,7 @@ function ServerSideMultiNumberFilterRenderer({
   ), /* @__PURE__ */ React80.createElement(
     ServerSideNumberFilterRenderer,
     {
+      "aria-label": fieldLabel,
       value: secondFilter.type ? [secondFilter] : [],
       onChange: handleSecondFilterChange
     }
@@ -89364,7 +89405,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;
@@ -89379,22 +89420,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;
@@ -91135,7 +91176,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;
@@ -91164,7 +91205,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;
@@ -91215,7 +91256,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 = "";
@@ -95322,7 +95363,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;
@@ -96364,7 +96405,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;
@@ -97109,7 +97150,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;
@@ -97720,7 +97761,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;
@@ -98381,7 +98422,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;
@@ -98957,7 +98998,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;
@@ -98966,7 +99007,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";
@@ -98978,7 +99019,7 @@ __decorate255([
 var TreemapValueLabel = class {
   constructor() {
     this.style = (() => {
-      const label = new Label();
+      const label = new Label2();
       label.color = "white";
       return label;
     })();
@@ -101509,7 +101550,7 @@ __export(integrated_charts_scene_exports, {
   Group: () => Group,
   HdpiCanvas: () => HdpiCanvas,
   Image: () => Image,
-  Label: () => Label,
+  Label: () => Label2,
   Line: () => Line,
   LinearScale: () => LinearScale,
   Marker: () => Marker,
@@ -103015,7 +103056,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;
@@ -103040,7 +103081,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;
@@ -106137,7 +106178,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",
@@ -107957,7 +108001,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]",
@@ -111384,8 +111431,9 @@ function ClientSideFilterInner(props) {
   const { Component: Component4, columnDefinition, onChange, options, value } = props;
   const filterHeading = ((_b = (_a = columnDefinition.filterProps) == null ? void 0 : _a.getFilterHeadingText) == null ? void 0 : _b.call(_a, 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}`
@@ -111395,7 +111443,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,