@redsift/dashboard 8.0.0-alpha.8 → 8.0.1

package/{index.js → dist/index.js}

@@ -197,7 +197,7 @@ const ChartEmptyState = /*#__PURE__*/forwardRef((props, ref) => {
   }, subtitle), onReset ? /*#__PURE__*/React.createElement(StyledResetButton, {
     variant: "unstyled",
     leftIcon: mdiRefresh,
-    onPress: onReset
+    onClick: onReset
   }, resetLabel) : null);
 });
 ChartEmptyState.className = CLASSNAME$3;
@@ -310,14 +310,18 @@ const DashboardContext = /*#__PURE__*/React.createContext({
  * Reducer props.
  */
 
-let DashboardReducerActionType;
-(function (DashboardReducerActionType) {
+let DashboardReducerActionType = /*#__PURE__*/function (DashboardReducerActionType) {
   DashboardReducerActionType["ResetFilter"] = "reset-filter";
   DashboardReducerActionType["ResetFilters"] = "reset-filters";
   DashboardReducerActionType["FilterTable"] = "filter-table";
   DashboardReducerActionType["FilterTableBatch"] = "filter-table-batch";
   DashboardReducerActionType["AppendFilterTableBatch"] = "append-filter-table-batch";
-})(DashboardReducerActionType || (DashboardReducerActionType = {}));
+  return DashboardReducerActionType;
+}({});
+
+/**
+ * Component props.
+ */
 
 const areEquals = (tableFilter, actionFilter) => {
   return tableFilter.columnField === actionFilter.columnField && tableFilter.operatorValue === actionFilter.operatorValue;
@@ -826,7 +830,7 @@ const PdfExportButton = /*#__PURE__*/forwardRef((props, ref) => {
   };
   return /*#__PURE__*/React.createElement(Button, _extends({
     className: classNames(PdfExportButton.className, className),
-    onPress: exportPdf,
+    onClick: exportPdf,
     isDisabled: isLoading
   }, forwardedProps, {
     ref: ref
@@ -852,6 +856,10 @@ const TimeSeriesBarChartSize = {
  */
 const TimeSeriesBarChartTheme = ColorTheme;
 
+/**
+ * Component props.
+ */
+
 // istanbul ignore file
 /**
  * Component style.
@@ -1241,7 +1249,7 @@ const TimeSeriesBarChart = /*#__PURE__*/forwardRef((props, ref) => {
     id: `id${id}__title`
   }, title) : null, chart && isResetable ? /*#__PURE__*/React.createElement(Button, {
     variant: "unstyled",
-    onPress: () => {
+    onClick: () => {
       chart.filter(null);
       redrawAll();
       if (columnToFilter) {
@@ -1289,6 +1297,96 @@ TimeSeriesBarChart.className = CLASSNAME;
 TimeSeriesBarChart.defaultProps = DEFAULT_PROPS;
 TimeSeriesBarChart.displayName = COMPONENT_NAME;
 
+/**
+ * Hook to give to a chart the roles, events and attributes of a listbox.
+ */
+const useCategoricalChartAsListbox = _ref => {
+  let {
+    id,
+    ref,
+    type,
+    ndxGroup,
+    orientation = 'horizontal'
+  } = _ref;
+  const currentIndexRef = useRef(0);
+  const props = useMemo(() => {
+    const numberOfGroups = ndxGroup === null || ndxGroup === void 0 ? void 0 : ndxGroup.all().filter(datum => datum.value).length;
+    if (ref && numberOfGroups) {
+      const getCurrentOption = () => ref.current.querySelector(`._${currentIndexRef.current}`);
+      const next = () => {
+        getCurrentOption().classList.remove('focused');
+        const index = currentIndexRef.current === numberOfGroups - 1 ? 0 : currentIndexRef.current + 1;
+        currentIndexRef.current = index;
+        ref.current.setAttribute('aria-activedescendant', `id${id}__${type}-${currentIndexRef.current}`);
+        getCurrentOption().classList.add('focused');
+      };
+      const previous = () => {
+        getCurrentOption().classList.remove('focused');
+        const index = currentIndexRef.current === 0 ? numberOfGroups - 1 : currentIndexRef.current - 1;
+        currentIndexRef.current = index;
+        ref.current.setAttribute('aria-activedescendant', `id${id}__${type}-${currentIndexRef.current}`);
+        getCurrentOption().classList.add('focused');
+      };
+      const focus = () => {
+        ref.current.setAttribute('aria-activedescendant', `id${id}__${type}-0`);
+        getCurrentOption().classList.add('focused');
+      };
+      const blur = () => {
+        getCurrentOption().classList.remove('focused');
+        currentIndexRef.current = 0;
+        ref.current.setAttribute('aria-activedescendant', '');
+      };
+      const keydown = e => {
+        e.stopPropagation();
+        switch (e.code) {
+          case 'ArrowRight':
+            if (orientation === 'horizontal') {
+              e.preventDefault();
+              next();
+            }
+            break;
+          case 'ArrowLeft':
+            if (orientation === 'horizontal') {
+              e.preventDefault();
+              previous();
+            }
+            break;
+          case 'ArrowDown':
+            if (orientation === 'vertical') {
+              e.preventDefault();
+              next();
+            }
+            break;
+          case 'ArrowUp':
+            if (orientation === 'vertical') {
+              e.preventDefault();
+              previous();
+            }
+            break;
+          case 'Enter':
+          case 'Space':
+            e.preventDefault();
+            getCurrentOption().dispatchEvent(new Event('click'));
+            break;
+        }
+      };
+      return {
+        'aria-activedescendant': '',
+        'aria-multiselectable': 'true',
+        'aria-orientation': orientation,
+        role: 'listbox',
+        tabIndex: 0,
+        onFocus: focus,
+        onBlur: blur,
+        onMouseDown: event => event.preventDefault(),
+        onMouseLeave: blur,
+        onKeyDown: keydown
+      };
+    }
+  }, [ref, ref.current, ndxGroup, JSON.parse(JSON.stringify((ndxGroup === null || ndxGroup === void 0 ? void 0 : ndxGroup.all()) || ''))]);
+  return props;
+};
+
 const FilterableBarChart = props => {
   const {
     children,
@@ -1301,7 +1399,8 @@ const FilterableBarChart = props => {
     localeText,
     onFilter
   } = props;
-  const id = propsId !== null && propsId !== void 0 ? propsId : useId();
+  const id = (propsId !== null && propsId !== void 0 ? propsId : useId()).replace(/:/g, '');
+  const ref = useRef();
   const {
     emptyChartTitle,
     emptyChartSubtitle,
@@ -1396,18 +1495,30 @@ const FilterableBarChart = props => {
     resetLabel: emptyChartResetLabel,
     onReset: resetFilters
   });
+  const chartProps = useCategoricalChartAsListbox({
+    id,
+    ref: ref,
+    type: 'bar',
+    ndxGroup,
+    orientation: 'vertical'
+  });
   const filterProps = {
+    barProps: {
+      tabIndex: -1
+    },
+    barRole: 'option',
+    chartProps: chartProps,
+    chartRef: ref,
     data: ndxGroup ? JSON.parse(JSON.stringify(ndxGroup.all())) : undefined,
-    id,
-    onReset: isResetable ? resetFilters : undefined,
     emptyComponent,
-    onBarClick: datum => {
-      handleFilter(datum.data.key);
-    },
+    id,
     isBarSelected: datum => {
       return filters.length === 0 || filters.includes(datum.data.key);
     },
-    barRole: 'option'
+    onBarClick: datum => {
+      handleFilter(datum.data.key);
+    },
+    onReset: isResetable ? resetFilters : undefined
   };
   if ( /*#__PURE__*/isValidElement(children)) {
     return /*#__PURE__*/React.cloneElement(children, _objectSpread2({}, filterProps));
@@ -1472,7 +1583,8 @@ const FilterablePieChart = props => {
     localeText,
     onFilter
   } = props;
-  const id = propsId !== null && propsId !== void 0 ? propsId : useId();
+  const id = (propsId !== null && propsId !== void 0 ? propsId : useId()).replace(/:/g, '');
+  const ref = useRef();
   const {
     emptyChartTitle,
     emptyChartSubtitle,
@@ -1563,18 +1675,30 @@ const FilterablePieChart = props => {
     resetLabel: emptyChartResetLabel,
     onReset: resetFilters
   });
+  const chartProps = useCategoricalChartAsListbox({
+    id,
+    ref: ref,
+    type: 'bar',
+    ndxGroup,
+    orientation: 'horizontal'
+  });
   const filterProps = {
+    sliceProps: {
+      tabIndex: -1
+    },
+    sliceRole: 'option',
+    chartProps: chartProps,
+    chartRef: ref,
     data: ndxGroup ? JSON.parse(JSON.stringify(ndxGroup.all())) : undefined,
-    id,
-    onReset: isResetable ? resetFilters : undefined,
     emptyComponent,
-    onSliceClick: datum => {
-      handleFilter(datum.data.key);
-    },
+    id,
     isSliceSelected: datum => {
       return filters.length === 0 || filters.includes(datum.data.key);
     },
-    sliceRole: 'option'
+    onSliceClick: datum => {
+      handleFilter(datum.data.key);
+    },
+    onReset: isResetable ? resetFilters : undefined
   };
   if ( /*#__PURE__*/isValidElement(children)) {
     return /*#__PURE__*/React.cloneElement(children, _objectSpread2({}, filterProps));