@hitachivantara/uikit-react-core 3.74.0 → 4.0.1-next.2

package/dist/legacy/Table/renderers/renderers.js

@@ -0,0 +1,203 @@
+import "core-js/modules/es.object.keys.js";
+import "core-js/modules/es.symbol.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.object.get-own-property-descriptor.js";
+import "core-js/modules/web.dom-collections.for-each.js";
+import "core-js/modules/es.object.get-own-property-descriptors.js";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+var _DropDownXS, _DropRightXS;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+import React from "react";
+import { DropDownXS, DropRightXS } from "@hitachivantara/uikit-react-icons";
+import HvButton from "../../Button";
+import HvTag from "../../Tag";
+import HvTypography from "../../Typography";
+import HvOverflowTooltip from "../../OverflowTooltip";
+import { setId } from "../../utils";
+import DateColumnCell from "./DateColumnCell";
+import SwitchColumnCell from "./SwitchColumnCell";
+import ProgressColumnCell from "./ProgressColumnCell";
+import DropdownColumnCell from "./DropdownColumnCell";
+import { hvStringFallback, hvNumberFallback } from "../utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var hvTextColumn = function hvTextColumn(col) {
+  return _objectSpread({
+    Cell: function Cell(cellProps) {
+      return /*#__PURE__*/_jsx(HvOverflowTooltip, {
+        data: hvStringFallback(cellProps === null || cellProps === void 0 ? void 0 : cellProps.value)
+      });
+    },
+    sortType: "alphanumeric"
+  }, col);
+};
+export var hvNumberColumn = function hvNumberColumn(col) {
+  return _objectSpread({
+    Cell: function Cell(_ref) {
+      var value = _ref.value;
+      return hvNumberFallback(value);
+    },
+    align: "right",
+    sortType: "number"
+  }, col);
+};
+export var hvDateColumn = function hvDateColumn(col, dateFormat) {
+  return _objectSpread({
+    Cell: function Cell(cellProps) {
+      return /*#__PURE__*/_jsx(DateColumnCell, {
+        date: cellProps === null || cellProps === void 0 ? void 0 : cellProps.value,
+        dateFormat: dateFormat
+      });
+    },
+    sortType: "alphanumeric",
+    sortDescFirst: true
+  }, col);
+};
+export function hvExpandColumn(col, expandRowButtonAriaLabel, collapseRowButtonAriaLabel, getCanRowExpand) {
+  return _objectSpread({
+    Cell: function Cell(cellProps) {
+      var _getCanRowExpand;
+
+      var value = cellProps.value,
+          row = cellProps.row;
+
+      var _row$getToggleRowExpa = row.getToggleRowExpandedProps(),
+          onClick = _row$getToggleRowExpa.onClick;
+
+      var hasContent = (_getCanRowExpand = getCanRowExpand === null || getCanRowExpand === void 0 ? void 0 : getCanRowExpand(row)) !== null && _getCanRowExpand !== void 0 ? _getCanRowExpand : true;
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [hasContent && /*#__PURE__*/_jsx(HvButton, {
+          icon: true,
+          category: "ghost",
+          "aria-label": row.isExpanded ? collapseRowButtonAriaLabel : expandRowButtonAriaLabel,
+          "aria-expanded": row.isExpanded,
+          onClick: onClick,
+          style: {
+            position: "absolute",
+            left: 0,
+            top: 0
+          },
+          children: row.isExpanded ? _DropDownXS || (_DropDownXS = /*#__PURE__*/_jsx(DropDownXS, {})) : _DropRightXS || (_DropRightXS = /*#__PURE__*/_jsx(DropRightXS, {}))
+        }), /*#__PURE__*/_jsx(HvOverflowTooltip, {
+          data: hvStringFallback(value)
+        })]
+      });
+    },
+    sortType: "alphanumeric",
+    cellStyle: {
+      position: "relative"
+    }
+  }, col);
+}
+export function hvTagColumn(col, valueDataKey, colorDataKey, textColorDataKey) {
+  var fromRowData = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+  var tagProps = arguments.length > 5 ? arguments[5] : undefined;
+  return _objectSpread({
+    Cell: function Cell(cellProps) {
+      var value = cellProps.value,
+          row = cellProps.row;
+
+      if (!value) {
+        return "—";
+      }
+
+      var _ref2 = fromRowData ? row.original : value,
+          name = _ref2[valueDataKey],
+          color = _ref2[colorDataKey],
+          textColor = _ref2[textColorDataKey];
+
+      return /*#__PURE__*/_jsx(HvTag, _objectSpread({
+        label: /*#__PURE__*/_jsx(HvTypography, {
+          variant: "normalText",
+          children: name
+        }),
+        type: "semantic",
+        color: color,
+        style: textColor != null ? {
+          color: textColor
+        } : {},
+        tabIndex: -1
+      }, tagProps));
+    },
+    cellStyle: {
+      paddingTop: 0,
+      paddingBottom: 0
+    }
+  }, col);
+}
+export function hvSwitchColumn(col, switchLabel, falseLabel, trueLabel, switchProps) {
+  return _objectSpread({
+    Cell: function Cell(cellProps) {
+      var value = cellProps.value,
+          row = cellProps.row;
+      return /*#__PURE__*/_jsx(SwitchColumnCell, {
+        checked: value,
+        value: row.id,
+        switchLabel: switchLabel,
+        falseLabel: falseLabel,
+        trueLabel: trueLabel,
+        switchProps: switchProps
+      });
+    },
+    cellStyle: {
+      paddingTop: 0,
+      paddingBottom: 0
+    }
+  }, col);
+}
+export function hvDropdownColumn(col, id, placeholder, disabledPlaceholder, _onChange) {
+  return _objectSpread({
+    Cell: function Cell(cellProps) {
+      var value = cellProps.value,
+          row = cellProps.row,
+          column = cellProps.column;
+      var dsbld = value.length < 1;
+      return /*#__PURE__*/_jsx(DropdownColumnCell, {
+        values: value,
+        placeholder: dsbld ? disabledPlaceholder : placeholder,
+        onChange: function onChange(val) {
+          return _onChange === null || _onChange === void 0 ? void 0 : _onChange(row.id, val);
+        },
+        disabled: dsbld,
+        dropdownProps: {
+          "aria-labelledby": setId(id, column.id)
+        }
+      });
+    },
+    cellStyle: {
+      paddingTop: 0,
+      paddingBottom: 0
+    }
+  }, col);
+}
+export function hvProgressColumn(col, getPartial, getTotal, color) {
+  return _objectSpread({
+    Cell: function Cell(cellProps) {
+      var row = cellProps.row;
+      var partial = getPartial === null || getPartial === void 0 ? void 0 : getPartial(row);
+      var total = getTotal === null || getTotal === void 0 ? void 0 : getTotal(row);
+
+      if (total) {
+        return /*#__PURE__*/_jsx(ProgressColumnCell, {
+          partial: partial,
+          total: total,
+          color: color
+        });
+      }
+
+      return "—";
+    },
+    cellStyle: {
+      paddingTop: 0,
+      paddingBottom: 0
+    }
+  }, col);
+}
+//# sourceMappingURL=renderers.js.map

package/dist/legacy/Table/renderers/renderers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderers.js","names":["React","DropDownXS","DropRightXS","HvButton","HvTag","HvTypography","HvOverflowTooltip","setId","DateColumnCell","SwitchColumnCell","ProgressColumnCell","DropdownColumnCell","hvStringFallback","hvNumberFallback","hvTextColumn","col","Cell","cellProps","value","sortType","hvNumberColumn","align","hvDateColumn","dateFormat","sortDescFirst","hvExpandColumn","expandRowButtonAriaLabel","collapseRowButtonAriaLabel","getCanRowExpand","row","getToggleRowExpandedProps","onClick","hasContent","isExpanded","position","left","top","cellStyle","hvTagColumn","valueDataKey","colorDataKey","textColorDataKey","fromRowData","tagProps","original","name","color","textColor","paddingTop","paddingBottom","hvSwitchColumn","switchLabel","falseLabel","trueLabel","switchProps","id","hvDropdownColumn","placeholder","disabledPlaceholder","onChange","column","dsbld","length","val","hvProgressColumn","getPartial","getTotal","partial","total"],"sources":["../../../../src/Table/renderers/renderers.js"],"sourcesContent":["import React from \"react\";\nimport { DropDownXS, DropRightXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport HvButton from \"../../Button\";\nimport HvTag from \"../../Tag\";\nimport HvTypography from \"../../Typography\";\nimport HvOverflowTooltip from \"../../OverflowTooltip\";\nimport { setId } from \"../../utils\";\n\nimport DateColumnCell from \"./DateColumnCell\";\nimport SwitchColumnCell from \"./SwitchColumnCell\";\nimport ProgressColumnCell from \"./ProgressColumnCell\";\nimport DropdownColumnCell from \"./DropdownColumnCell\";\nimport { hvStringFallback, hvNumberFallback } from \"../utils\";\n\nexport const hvTextColumn = (col) => {\n  return {\n    Cell: (cellProps) => <HvOverflowTooltip data={hvStringFallback(cellProps?.value)} />,\n    sortType: \"alphanumeric\",\n    ...col,\n  };\n};\n\nexport const hvNumberColumn = (col) => {\n  return {\n    Cell: ({ value }) => hvNumberFallback(value),\n    align: \"right\",\n    sortType: \"number\",\n    ...col,\n  };\n};\n\nexport const hvDateColumn = (col, dateFormat) => {\n  return {\n    Cell: (cellProps) => <DateColumnCell date={cellProps?.value} dateFormat={dateFormat} />,\n    sortType: \"alphanumeric\",\n    sortDescFirst: true,\n    ...col,\n  };\n};\n\nexport function hvExpandColumn(\n  col,\n  expandRowButtonAriaLabel,\n  collapseRowButtonAriaLabel,\n  getCanRowExpand\n) {\n  return {\n    Cell: (cellProps) => {\n      const { value, row } = cellProps;\n      const { onClick } = row.getToggleRowExpandedProps();\n\n      const hasContent = getCanRowExpand?.(row) ?? true;\n\n      return (\n        <>\n          {hasContent && (\n            <HvButton\n              icon\n              category=\"ghost\"\n              aria-label={row.isExpanded ? collapseRowButtonAriaLabel : expandRowButtonAriaLabel}\n              aria-expanded={row.isExpanded}\n              onClick={onClick}\n              style={{ position: \"absolute\", left: 0, top: 0 }}\n            >\n              {row.isExpanded ? <DropDownXS /> : <DropRightXS />}\n            </HvButton>\n          )}\n\n          <HvOverflowTooltip data={hvStringFallback(value)} />\n        </>\n      );\n    },\n    sortType: \"alphanumeric\",\n    cellStyle: {\n      position: \"relative\",\n    },\n    ...col,\n  };\n}\n\nexport function hvTagColumn(\n  col,\n  valueDataKey,\n  colorDataKey,\n  textColorDataKey,\n  fromRowData = false,\n  tagProps\n) {\n  return {\n    Cell: (cellProps) => {\n      const { value, row } = cellProps;\n      if (!value) {\n        return \"—\";\n      }\n\n      const {\n        [valueDataKey]: name,\n        [colorDataKey]: color,\n        [textColorDataKey]: textColor,\n      } = fromRowData ? row.original : value;\n\n      return (\n        <HvTag\n          label={<HvTypography variant=\"normalText\">{name}</HvTypography>}\n          type=\"semantic\"\n          color={color}\n          style={textColor != null ? { color: textColor } : {}}\n          tabIndex={-1}\n          {...tagProps}\n        />\n      );\n    },\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n\nexport function hvSwitchColumn(col, switchLabel, falseLabel, trueLabel, switchProps) {\n  return {\n    Cell: (cellProps) => {\n      const { value, row } = cellProps;\n      return (\n        <SwitchColumnCell\n          checked={value}\n          value={row.id}\n          switchLabel={switchLabel}\n          falseLabel={falseLabel}\n          trueLabel={trueLabel}\n          switchProps={switchProps}\n        />\n      );\n    },\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n\nexport function hvDropdownColumn(col, id, placeholder, disabledPlaceholder, onChange) {\n  return {\n    Cell: (cellProps) => {\n      const { value, row, column } = cellProps;\n      const dsbld = value.length < 1;\n      return (\n        <DropdownColumnCell\n          values={value}\n          placeholder={dsbld ? disabledPlaceholder : placeholder}\n          onChange={(val) => onChange?.(row.id, val)}\n          disabled={dsbld}\n          dropdownProps={{\n            \"aria-labelledby\": setId(id, column.id),\n          }}\n        />\n      );\n    },\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n\nexport function hvProgressColumn(col, getPartial, getTotal, color) {\n  return {\n    Cell: (cellProps) => {\n      const { row } = cellProps;\n      const partial = getPartial?.(row);\n      const total = getTotal?.(row);\n\n      if (total) {\n        return <ProgressColumnCell partial={partial} total={total} color={color} />;\n      }\n\n      return \"—\";\n    },\n\n    cellStyle: {\n      paddingTop: 0,\n      paddingBottom: 0,\n    },\n    ...col,\n  };\n}\n"],"mappings":"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"}

package/dist/legacy/Table/stories/TableColumnRenderers.stories.mdx

@@ -0,0 +1,194 @@
+import { Meta, Story, Preview } from "@storybook/addon-docs";
+
+import LinkTo from "@storybook/addon-links/react";
+
+import { Usage } from "storybook-root/blocks/Usage";
+
+import { HvTable } from "../..";
+
+import { 
+  AllColumnRenderers, 
+  TextColumnRenderer, 
+  NumberColumnRenderer, 
+  DateColumnRenderer,
+  ExpandColumnRenderer,
+  SwitchColumnRenderer,
+  TagColumnRenderer,
+  ProgressColumnRenderer,
+  DropdownColumnRenderer,
+} from "./TableColumnRenderers.stories.js";
+
+<Meta title="Display/Table Column Renderers" />
+
+# Table column renderers
+
+The UI Kit library provides a collection of utility functions that, together with the <LinkTo kind="Display/Table Hooks" story="Main" className="sbdocs sbdocs-a">Table Hooks</LinkTo>,
+ease the setup of common column configurations, including the render function, alignment, missing data fallbacks and cell overflow.
+
+They add a set of out of the box features, not meant to be 100% feature complete, but instead, ease the majority of use-cases we have been encountering. If you need any customization or extension to these renderers, please feel free to copy and customize them.
+
+They can be imported like this:
+
+<Usage>{'import { hvTextColumn } from "@hitachivantara/uikit-react-lab";'}</Usage>
+
+The following renderers are available:
+
+- `hvTextColumn`: Renders a string and includes an overflow tooltip.
+- `hvNumberColumn`: Renders a number aligning it correctly and includes an overflow tooltip.
+- `hvDateColumn`: Renders a date and formats it.
+- `hvExpandColumn`: Renders a column that includes an expand button.
+- `hvTagColumn`: Renders a column with a tag component inside the cell.
+- `hvSwitchColumn`: Renders a column that includes a switch to toggle between two values.
+- `hvDropdownColumn`: Renders a column that include a dropdown select between various values.
+- `hvProgressColumn`: Renders a progress bar to compare between a current value and max value.
+
+## All renderers table
+
+Complete sample table that uses most of the provided renderers.
+
+<Preview withToolbar>
+  <Story inline story={AllColumnRenderers} />
+</Preview>
+
+## Text column renderer
+
+This functions renders text in the table.
+The column generated will have the text truncated with a tooltip if too long or if missing it will be replaced with a long dash.
+
+parameters:
+- `col: HvTableColumnConfig`: The column configuration to modify.
+
+output:
+- `col: HvTableColumnConfig`: The modified column configuration with the parameters required to render the text.
+
+<Preview withToolbar>
+  <Story inline story={TextColumnRenderer} />
+</Preview>
+
+## Number column renderer
+
+This functions renders numeric values in the table.
+The column generated will be *right* aligned and in case the value is missing it will be substituted by a long dash.
+
+parameters:
+- `col: HvTableColumnConfig`: The column configuration to modify.
+
+output:
+- `col: HvTableColumnConfig`: The modified column configuration with the parameters required to render the text.
+
+<Preview withToolbar>
+  <Story inline story={NumberColumnRenderer} />
+</Preview>
+
+## Date column renderer
+
+This functions renders a string formatted as a date.
+in case the value is missing it will be substituted by a long dash.
+
+parameters:
+- `col: HvTableColumnConfig`: The column configuration to modify.
+- `format: String`: the parameter used as a reference to format the value, the default value is `ISO8601`.
+
+output:
+- `col: HvTableColumnConfig`: The modified column configuration with the parameters required to render the text.
+
+<Preview withToolbar>
+  <Story inline story={DateColumnRenderer} />
+</Preview>
+
+## Expand column renderer
+
+This functions in conjunction with the `useHvRowExpand` hook renders a column with a button to open additional content in the table.
+Using the renderer allows the `useHvRowExpand` to render an expander in any column, instead of only in the first one.
+But the property `disableCreateExpandButton` must be true.
+The text rendered next to the expander button will have the same properties as the `hvTextColumn` column.
+
+parameters:
+- `col: HvTableColumnConfig`: The column configuration to modify.
+- `expandRowButtonAriaLabel: String`: The aria label for the button when the expander is closed.
+- `collapseRowButtonAriaLabel: String`: The aria label for the button when the expander is open.
+- `getCanRowExpand: (row: HvRowInstance) => boolean`: The function executed to determine whether the expander button is able to be opened.
+
+output:
+- `col: HvTableColumnConfig`: The modified column configuration with the parameters required to render the text.
+
+<Preview withToolbar>
+  <Story inline story={ExpandColumnRenderer} />
+</Preview>
+
+## Switch column renderer
+
+This functions renders a column with a switch component embedded that follows the state of a `boolean` value.
+To change the value of the switch, the data in the table must be changed.
+
+parameters:
+- `col: HvTableColumnConfig`: The column configuration to modify.
+- `switchLabel: String`: The aria label for the switch.
+- `falseLabel: String`: The label for the left side of the switch.
+- `trueLabel: String`: The label for the right side of the switch.
+- `switchProps: HvBaseSwitchProps`: extra props passed to the switch, these values correspond to the `HvBaseSwitch` props.
+
+output:
+- `col: HvTableColumnConfig`: The modified column configuration with the parameters required to render the text.
+
+<Preview withToolbar>
+  <Story inline story={SwitchColumnRenderer} />
+</Preview>
+
+## Tag column renderer
+
+This functions renders a column with a tag component embedded that follows the state of a `json` value.
+To change the value color and styles of the tag the data in the table must be changed.
+The function receives 3 key values that correspond to properties present in the table cell value or in the whole row.
+
+parameters:
+- `col: HvTableColumnConfig`: The column configuration to modify.
+- `valueDataKey: String`: The property to use as text for the tag.
+- `colorDataKey: String`: The property to use as color for the tag this property.
+- `textColorDataKey: String`: The property to use as color for the text of the tag.
+- `fromRowData: Boolean`: if `true` it will extract the `valueDataKey` `colorDataKey` `textColorDataKey` from the row data, if `false` it will extract the aforementioned properties from the cell value.
+- `tagProps: HvTagProps`: extra props passed to the tag, these values correspond to the `HvTagProps` props.
+
+output:
+- `col: HvTableColumnConfig`: The modified column configuration with the parameters required to render the text.
+
+<Preview withToolbar>
+  <Story inline story={TagColumnRenderer} />
+</Preview>
+
+## Progress column renderer
+
+This functions renders a column with a progress bar embedded.
+The function receives a pair of callbacks to specify the status of the bar.
+
+parameters:
+- `col: HvTableColumnConfig`: The column configuration to modify.
+- `getPartial: (row: HvRowInstance) => number`: a function that returns the current value of the bar.
+- `getTotal: (row: HvRowInstance) => number`: a function that returns the current max value of the bar.
+- `color: "primary" | "secondary"`: which color to use for the bar.
+
+output:
+- `col: HvTableColumnConfig`: The modified column configuration with the parameters required to render the text.
+
+<Preview withToolbar>
+  <Story inline story={ProgressColumnRenderer} />
+</Preview>
+
+## Dropdown column renderer
+
+This functions renders a dropdown component embedded into a column.
+The function receives an onChange callback to communicate the selected value of the dropdown.
+
+parameters:
+- `col: HvTableColumnConfig`: The column configuration to modify.
+- `id: string`: The dropdown id.
+- `placeholder: string`: The dropdown placeholder when nothing is selected.
+- `disabledPlaceholder: string`: The dropdown placeholder when is disabled.
+- `onChange: (identifier: string, value: ListValueProp) => void`: The function called when the dropdown value is changed.
+
+output:
+- `col: HvTableColumnConfig`: The modified column configuration with the parameters required to render the text.
+
+<Preview withToolbar>
+  <Story inline story={DropdownColumnRenderer} />
+</Preview>