@hitachivantara/uikit-react-lab 3.52.0 → 4.0.1-next.0

package/dist/modern/Table/stories/TableHooks.stories.mdx

@@ -1,278 +0,0 @@
-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 * as stories from "./TableHooks.stories.js";
-
-<Meta title="Lab/Table Hooks" />
-
-# Table hooks
-
-The UI Kit library provides a collection of **custom hooks** that ease the integration with the <LinkTo kind="Lab/Table" story="Main" className="sbdocs sbdocs-a">HvTable elements</LinkTo> and allows more advanced use cases and better data handling.
-
-Our custom hooks are built on top of [React Table](https://react-table.tanstack.com) which is an "headless" UI utility library to build data tables while retaining control over markup and styles. It consists of a collection of, lightweight, composable and extensible custom React hooks.
-
-## `useHv*` hooks
-
-For further ease, you can use the provided `useHvData` hook that wraps the [React Table's `useTable` hook](https://react-table.tanstack.com/docs/api/useTable) and
-provides the following functionality:
-
-- Ensures the use of the needed core and layout plugins when using any of the UI Kit custom hooks (e.g. adding `useHvPagination` implies the instalation of React Table's `usePagination` hook).
-- Automatically installs the `useHvTableStyles` hook.
-- Generates default column metadata from the data fields, if the `columns` option is missing.
-- Defaults to an empty array if no `data` is provided.
-
-<Usage>{'import { useHvData } from "@hitachivantara/uikit-react-lab";'}</Usage>
-
-<Preview withToolbar>
-  <Story inline story={stories.UseHvData} />
-</Preview>
-
-The following plugin hooks are available:
-
-- `useHvTableStyles`: ensures the correct styling of the table by injecting the column's `variant` and `align` options into the `HvTableHeader` and `HvTableCell` components (via `getHeaderProps` and `getCellProps`, respectively).
-  Also adds support for injecting the `styles`, `className` and `classes` into the `HvTable`, `HvTableHeader` and `HvTableCell` components.
-- `useHvPagination`: eases the wiring of the `HvPagination` component when using pagination. See <a href="#pagination" className="sbdocs-a">Pagination</a>.
-- `useHvRowSelection`: creates and manages the UI for selecting rows. See <a href="#selection" className="sbdocs-a">Selection</a>.
-- `useHvBulkActions`: eases the wiring of the `HvBulkActions` component. See <a href="#bulk-selection-and-actions" className="sbdocs-a">Bulk selection and actions</a>.
-- `useHvSortBy`: manages the table's header sorting functionality. See <a href="#sorting" className="sbdocs-a">Sorting</a>.
-- `useHvRowExpand`: manages the row expanding functionality. See <a href="#row-expanding" className="sbdocs-a">Row expanding</a>.
-- `useHvTableSticky`: allows defining sticky headers and columns. See <a href="#sticky-headers-and-columns" className="sbdocs-a">Sticky Headers And Columns</a>.
-- `useHvHeaderGroups`: allows defining grouped headers. See <a href="#grouped-headers" className="sbdocs-a">Grouped Headers</a>.
-
-## KitchenSink
-
-Complete sample table that uses most of the features provided.
-
-<Preview withToolbar>
-  <Story inline story={stories.KitchenSink} />
-</Preview>
-
-# Hooks usage
-
-## useHvPagination
-
-Data can be paginated. Optionally, empty lines can be added to the last page to avoid changes in height.
-
-Check [React Table's `usePagination` documentation](https://react-table.tanstack.com/docs/api/usePagination) for configuration details.
-
-The `useHvPagination` hook makes the `getHvPaginationProps` function available on the table instance returned that can be used to setup a `HvPagination` component.
-
-_Note: This hook depends on the `usePagination` hook from `react-table`, but when using `useHvData` only `useHvPagination` needs to be installed._
-
-<Preview withToolbar>
-  <Story inline story={stories.Pagination} />
-</Preview>
-
-## useHvRowSelection
-
-Rows can be selected individually.
-
-Check [React Table's `useRowSelect` documentation](https://react-table.tanstack.com/docs/api/useRowSelect) for configuration details.
-
-The `useHvRowSelecion` hook injects a new column with a `HvCheckBox` to select each row. It also manages the `HvTableRow`'s `isSelected` property via the `getRowProps`.
-
-This hook is originally based on the code `useRowSelect` hook from `react-table` and implements its API, but extends it with support for locking the selection state of individual rows.
-
-<Preview withToolbar>
-  <Story inline story={stories.Selection} />
-</Preview>
-
-## useHvRowSelection controlled
-
-A selection state can also be included in the data and toggled externally.
-
-<Preview withToolbar>
-  <Story inline story={stories.ControlledSelection} />
-</Preview>
-
-## useHvBulkActions
-
-Rows can also be selected in bulk and actions can be performed on the current selection.
-
-The `useHvBulkActions` hook makes the `getHvBulkActionsProps` function available on the table instance returned that can be used to setup a `HvBulkActions` component.
-
-_Note: This hook depends on the `useRowSelect` hook from `react-table`, but when using `useHvData` only `useHvBulkActions` needs to be installed._
-
-<Preview withToolbar>
-  <Story inline story={stories.BulkActions} />
-</Preview>
-
-## useHvSortBy
-
-Tables can have the capability of sorting the data by column.
-Clicking a sortable column header toggles between ascending or descending. Multiple sorting criteria is enabled through holding shift while clicking.
-
-Check [React Table's `useSortBy` documentation](https://react-table.tanstack.com/docs/api/useSortBy) for configuration details.
-
-The `useHvSortBy` hook ensures that the proper properties are injected in the `HvTableHeader` (including the on click sorting trigger) and `HvTableCell` (for styling).
-
-_Note: This hook depends on the `useSortBy` hook from `react-table`, but when using `useHvData` only `useHvSortBy` needs to be installed._
-
-<Preview withToolbar>
-  <Story inline story={stories.Sortable} />
-</Preview>
-
-## useHvRowExpand
-
-Tables rows can have the capability of being expanded to show more details.
-
-Check [React Table's `useExpanded` documentation](https://react-table.tanstack.com/docs/api/useExpanded) for configuration details.
-
-The `useHvRowExpand` hook injects a `HvButton` into the first data column that toggles each row expansion. If the column has a custom renderer, an extra column is created instead.
-
-_Note: This hook depends on the `useExpanded` hook from `react-table`, but when using `useHvData` only `useHvRowExpand` needs to be installed._
-
-<Preview withToolbar>
-  <Story inline story={stories.Expandable} />
-</Preview>
-
-## useGroupBy
-
-Tables rows can have the capability of being expanded to show more details.
-
-Check [React Table's `useGroupBy` documentation](https://react-table.tanstack.com/docs/api/useGroupBy) for configuration details.
-
-This example requires useHvRowExpand to show the grouped rows.
-
-<Preview withToolbar>
-  <Story inline story={stories.GroupBy} />
-</Preview>
-
-## useHvTableSticky
-
-The table headers can be fixed at the top, allowing it to keep always visible when table has vertical scrolling enabled.
-
-It is also possible to stick columns, either on the left or on the right, making them always visible when scrolling horizontally.
-
-This is implemented using the `useHvTableSticky` custom React Table hook provided by the UI Kit library.
-
-When using sticky columns, all column widths will be fixed and a non-table-element layout is applied.
-
-### Configuration
-
-The following options are supported via the main options object passed to `useTable(options)`:
-
-- `stickyHeader: Bool`
-  - Enables the sticky header
-
-The following options are supported on any `Column` object passed to the `columns` options in `useTable()`:
-
-- `sticky: "left" | "right"`
-  - Sticks this column to the defined side. Columns will be re-orderer if needed.
-- `width: Int`
-  - Defaults to 150
-  - Specifies the width for the column
-- `minWidth: Int`
-  - Defaults to 0
-  - Specifies the minimum width for the column
-
-### Usage
-
-The `getTableProps`, `getTableHeadProps`, `getHeaderGroupProps`, `getHeaderProps`, `getTableBodyProps`, `getRowProps` and `getCellProps` prop getters must be called and the properties injected into the corresponding elements.
-
-<Preview withToolbar>
-  <Story inline story={stories.StickyHeadersAndColumns} />
-</Preview>
-
-## useHvHeaderGroups
-
-The table columns can be grouped, allowing it to have header groups.
-
-Check [React Table's `useTable#column-options` documentation](https://react-table.tanstack.com/docs/api/useTable#column-options) for configuration details.
-
-This is implemented using the `useHvHeaderGroups` custom React Table hook provided by the UI Kit library.
-
-When using grouped columns, all header group columns text will be centered.
-
-### Configuration
-
-The following options are supported on any `Column` object passed to the `columns` options in `useTable()`:
-
-- `columns: Array<Column>`
-  - A nested array of columns. If defined, the column will act as a header group. Columns can be recursively nested as much as needed.
-
-### Usage
-
-The `getTableProps`, `getHeaderGroupProps`, `getHeaderProps`, `getTableBodyProps`, `getRowProps` and `getCellProps` prop getters must be called and the properties injected into the corresponding elements.
-
-<Preview withToolbar>
-  <Story inline story={stories.GroupedHeaders} />
-</Preview>
-
-# Other use cases
-
-## Empty Cells
-
-The absence of data within an individual cell in the table should be displayed as a `—` (_em dash_), according to Design System guidelines.
-
-This must be handled by the developer in the respective cell renderer, as it is an guideline and not a strict rule.
-Different use cases may require different solutions, like `N/A` or `0`. Empty cells should be avoided.
-
-<Preview withToolbar>
-  <Story inline story={stories.EmptyCells} />
-</Preview>
-
-## Locked Selection
-
-Individual rows can have its selection state locked (becoming either not selectable or not unselectable), disabling the selection checkbox and also preventing the bulk actions to change the row state.
-
-<Preview withToolbar>
-  <Story inline story={stories.LockedSelection} />
-</Preview>
-
-## Alternative Layout
-
-react-table provides some layout plugin hooks useful for instance when needing to virtualize rows and cells for performance or enabling user resizable tables/columns.
-They rely on the core column options `width`, `minWidth` and `maxWidth`, that are used to calculate column and cell widths.
-
-- `useBlockLayout` renders headers and cells as inline-block elements with explicit width.
-- `useAbsoluteLayout` renders headers and cells as absolutely positioned elements with explicit width.
-- `useFlexLayout` renders headers and cells as inline-block elements, with the `width` being used as the `flex-basis` and `flex-grow`.
-
-Note that not all built-in styles will apply when using any of the alternative layouts, so aditional styling might be needed to acomplish the same look.
-Also, styles affecting element's widths (`width`, `min-width`, `max-width` and flex properties) must be avoided and the core column options used instead.
-
-Most layouts work well with the default html table elements, keeping the semantics while loosing the table layout rules.
-Elements can be changed (to `div` or any other apropriate html element) by using the `component` property.
-
-`useGridLayout` implies a totally diferent dom structure and is currently not supported by the HvTable components.
-
-<Preview withToolbar>
-  <Story inline story={stories.AlternativeLayout} />
-</Preview>
-
-## Server Side
-
-<Preview withToolbar>
-  <Story inline story={stories.ServerSide} />
-</Preview>
-
-## Drag and Drop
-
-react-table has an example which integrates the react-dnd / react-beautiful-dnd libraries to provide drag and drop capability on lines.
-Please check the documentation of [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd) in case you want to extend this example.
-
-This sample is not a clean react-beautiful-dnd implementation because it is applied to a table and requires some custom work to maintain the
-layout of the table line (and its cell contents) while dragging. Please check https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/patterns/tables.md
-for more information.
-
-This behavior does not match 100% the Design System guidelines, although it offers a solution which implements the behavior and adds an accessible way for
-doing the drag/drop operation via `SPACE + ARROW` Keys.
-
-<Preview withToolbar>
-  <Story inline story={stories.DragAndDrop} />
-</Preview>
-
-## Column Resize
-
-Columns can be resized using the useHvResizeColumn hook, which leverages the react-table capabilities.
-Resize, although not an accessible functionality, it allows columns to be resizable via dragging column right border.
-
-<Preview withToolbar>
-  <Story inline story={stories.ColumnResize} />
-</Preview>

package/dist/modern/Table/styles.js

@@ -1,33 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-
-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; }
-
-const styles = theme => ({
-  root: _objectSpread(_objectSpread({
-    position: "relative",
-    width: "100%"
-  }, theme.hv.typography.normalText), {}, {
-    "table&": {
-      borderSpacing: 0
-    },
-    "& caption": _objectSpread(_objectSpread({}, theme.typography.normalText), {}, {
-      padding: theme.spacing("xs"),
-      textAlign: "left",
-      captionSide: "bottom"
-    })
-  }),
-  stickyHeader: {},
-  stickyColumns: {
-    backgroundColor: theme.hv.palette.atmosphere.atmo2
-  },
-  listRow: {
-    "table&": {
-      borderSpacing: theme.hvSpacing(0, "xs")
-    }
-  }
-});
-
-export default styles;
-//# sourceMappingURL=styles.js.map

package/dist/modern/Table/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","names":["styles","theme","root","position","width","hv","typography","normalText","borderSpacing","padding","spacing","textAlign","captionSide","stickyHeader","stickyColumns","backgroundColor","palette","atmosphere","atmo2","listRow","hvSpacing"],"sources":["../../../src/Table/styles.js"],"sourcesContent":["const styles = (theme) => ({\n  root: {\n    position: \"relative\",\n    width: \"100%\",\n\n    ...theme.hv.typography.normalText,\n\n    \"table&\": {\n      borderSpacing: 0,\n    },\n\n    \"& caption\": {\n      ...theme.typography.normalText,\n      padding: theme.spacing(\"xs\"),\n      textAlign: \"left\",\n      captionSide: \"bottom\",\n    },\n  },\n  stickyHeader: {},\n  stickyColumns: {\n    backgroundColor: theme.hv.palette.atmosphere.atmo2,\n  },\n  listRow: {\n    \"table&\": {\n      borderSpacing: theme.hvSpacing(0, \"xs\"),\n    },\n  },\n});\n\nexport default styles;\n"],"mappings":";;;;;;AAAA,MAAMA,MAAM,GAAIC,KAAD,KAAY;EACzBC,IAAI;IACFC,QAAQ,EAAE,UADR;IAEFC,KAAK,EAAE;EAFL,GAICH,KAAK,CAACI,EAAN,CAASC,UAAT,CAAoBC,UAJrB;IAMF,UAAU;MACRC,aAAa,EAAE;IADP,CANR;IAUF,6CACKP,KAAK,CAACK,UAAN,CAAiBC,UADtB;MAEEE,OAAO,EAAER,KAAK,CAACS,OAAN,CAAc,IAAd,CAFX;MAGEC,SAAS,EAAE,MAHb;MAIEC,WAAW,EAAE;IAJf;EAVE,EADqB;EAkBzBC,YAAY,EAAE,EAlBW;EAmBzBC,aAAa,EAAE;IACbC,eAAe,EAAEd,KAAK,CAACI,EAAN,CAASW,OAAT,CAAiBC,UAAjB,CAA4BC;EADhC,CAnBU;EAsBzBC,OAAO,EAAE;IACP,UAAU;MACRX,aAAa,EAAEP,KAAK,CAACmB,SAAN,CAAgB,CAAhB,EAAmB,IAAnB;IADP;EADH;AAtBgB,CAAZ,CAAf;;AA6BA,eAAepB,MAAf"}

package/dist/modern/Table/utils/fallbacks.d.ts

@@ -1,6 +0,0 @@
-
-export function hvStringFallback(value: string | undefined | null): string;
-export function hvNumberFallback(value: number | undefined | null): number | "—";
-export function hvNodeFallback(
-  value: React.ReactNode | undefined | null | "—"
-): NonNullable<React.ReactNode>;

package/dist/modern/Table/utils/fallbacks.js

@@ -1,12 +0,0 @@
-const LONG_DASH = "—";
-export const hvStringFallback = value => {
-  return typeof value === "string" && value !== "" ? value : LONG_DASH;
-};
-export const hvNumberFallback = value => {
-  return typeof value === "number" ? value : LONG_DASH;
-};
-export const hvNodeFallback = value => {
-  if (!value) return LONG_DASH;
-  return hvStringFallback(value === null || value === void 0 ? void 0 : value.toString()) === LONG_DASH ? LONG_DASH : value;
-};
-//# sourceMappingURL=fallbacks.js.map

package/dist/modern/Table/utils/fallbacks.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"fallbacks.js","names":["LONG_DASH","hvStringFallback","value","hvNumberFallback","hvNodeFallback","toString"],"sources":["../../../../src/Table/utils/fallbacks.js"],"sourcesContent":["const LONG_DASH = \"—\";\n\nexport const hvStringFallback = (value) => {\n  return typeof value === \"string\" && value !== \"\" ? value : LONG_DASH;\n};\n\nexport const hvNumberFallback = (value) => {\n  return typeof value === \"number\" ? value : LONG_DASH;\n};\n\nexport const hvNodeFallback = (value) => {\n  if (!value) return LONG_DASH;\n  return hvStringFallback(value?.toString()) === LONG_DASH ? LONG_DASH : value;\n};\n"],"mappings":"AAAA,MAAMA,SAAS,GAAG,GAAlB;AAEA,OAAO,MAAMC,gBAAgB,GAAIC,KAAD,IAAW;EACzC,OAAO,OAAOA,KAAP,KAAiB,QAAjB,IAA6BA,KAAK,KAAK,EAAvC,GAA4CA,KAA5C,GAAoDF,SAA3D;AACD,CAFM;AAIP,OAAO,MAAMG,gBAAgB,GAAID,KAAD,IAAW;EACzC,OAAO,OAAOA,KAAP,KAAiB,QAAjB,GAA4BA,KAA5B,GAAoCF,SAA3C;AACD,CAFM;AAIP,OAAO,MAAMI,cAAc,GAAIF,KAAD,IAAW;EACvC,IAAI,CAACA,KAAL,EAAY,OAAOF,SAAP;EACZ,OAAOC,gBAAgB,CAACC,KAAD,aAACA,KAAD,uBAACA,KAAK,CAAEG,QAAP,EAAD,CAAhB,KAAwCL,SAAxC,GAAoDA,SAApD,GAAgEE,KAAvE;AACD,CAHM"}

package/dist/modern/Table/utils/index.d.ts

@@ -1,3 +0,0 @@
-export { hvStringFallback, hvNumberFallback, hvNodeFallback } from "./fallbacks";
-
-

package/dist/modern/Table/utils/index.js

@@ -1,2 +0,0 @@
-export { hvStringFallback, hvNumberFallback, hvNodeFallback } from "./fallbacks";
-//# sourceMappingURL=index.js.map

package/dist/modern/Table/utils/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["hvStringFallback","hvNumberFallback","hvNodeFallback"],"sources":["../../../../src/Table/utils/index.js"],"sourcesContent":["export { hvStringFallback, hvNumberFallback, hvNodeFallback } from \"./fallbacks\";\n"],"mappings":"AAAA,SAASA,gBAAT,EAA2BC,gBAA3B,EAA6CC,cAA7C,QAAmE,aAAnE"}

package/dist/modern/Tag/Tag.d.ts

@@ -1,68 +0,0 @@
-import * as React from "react";
-import { StandardProps } from "@material-ui/core";
-
-export type Semantic =
-  | "sema1"
-  | "sema2"
-  | "sema3"
-  | "sema4"
-  | "sema5"
-  | "sema6"
-  | "sema7"
-  | "sema8"
-  | "sema9"
-  | "sema10"
-  | "sema11"
-  | "sema12"
-  | "sema13"
-  | "sema14"
-  | "sema15"
-  | "sema16"
-  | "sema17"
-  | "sema18"
-  | "sema19"
-  | "sema20";
-
-  export type HvTagClassKey =
-  | "label"
-  | "square"
-  | "round"
-  | "deleteIconSmall"
-  | "disabled";
-
-
-
-  export interface HvTagsProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>, HvTagClassKey, "color"> {
-  /**
-   * An array of strings representing the colors to override in the icon.
-   * Each element inside the array will override a diferent color.
-   */
-   color?: string | string[];
-
-  /**
-   * Custom text to show in place of count.
-   * Note showCount and label are mutually exclusive.
-   * showCount is ignored when label is specified at the same time.
-   */
-   label?: string;
-  /**
-   * Sets one of the standard semantic palette colors of the icon
-   */
-  semantic?: Semantic;
-
-
-  shape: string,
-
-  /**
- * The disabled property of the Tag.
- */
-   disabled: string,
-
-/**
- * The cancel icon is shown based on this property
- */
- showCancelIcon:boolean,
-
-}
-
-export default function HvTag(props: HvTagsProps): JSX.Element | null;

package/dist/modern/Tag/Tag.js

@@ -1,152 +0,0 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["id", "semantic", "children", "disabled", "variant", "color", "shape", "showcancelicon"];
-import React from "react";
-import PropTypes from "prop-types";
-import { Close } from "@hitachivantara/uikit-react-icons";
-import { useDeprecated } from "@hitachivantara/uikit-react-core";
-import clsx from "clsx";
-import { withStyles, makeStyles, useTheme } from "@material-ui/core";
-import styles from "./styles";
-/**
- * The tag is a component used to notify the user about the labelled ,categorised, or organised item , in the app context.
- */
-
-const useStyles = makeStyles(styles, {
-  name: "HvTag"
-});
-
-const getColor = (theme, color, defaultColor) => theme.palette[color] || color || defaultColor;
-
-export const HvTag = props => {
-  const {
-    id,
-    semantic,
-    children,
-    disabled,
-    variant,
-    color,
-    shape,
-    showcancelicon = false
-  } = props,
-        others = _objectWithoutProperties(props, _excluded);
-
-  useDeprecated("Tag", "Please use the Tag component in Core");
-  const classes = useStyles();
-  const isDisabled = disabled || false;
-  const Tagshape = shape || classes.square;
-  const theme = useTheme();
-  const inlineStyle = {};
-
-  if (semantic) {
-    var _theme$palette;
-
-    inlineStyle.backgroundColor = getColor(theme, (_theme$palette = theme.palette) === null || _theme$palette === void 0 ? void 0 : _theme$palette[semantic], theme.hv.palette.accent.acce1);
-  }
-  /**
-   * Renders the content for the tag elements.
-   */
-
-
-  return /*#__PURE__*/React.createElement("div", _extends({
-    id: id,
-    role: "button",
-    className: clsx(classes.root, classes[variant], others, isDisabled && classes.disabled, Tagshape && classes[`${shape}`]),
-    style: inlineStyle,
-    disabled: isDisabled
-  }, others), /*#__PURE__*/React.createElement("span", {
-    className: classes.label
-  }, children), showcancelicon && /*#__PURE__*/React.createElement(Close, {
-    className: clsx(classes.deleteIcon, isDisabled && classes.disabled),
-    color: "atmo5"
-  }));
-};
-process.env.NODE_ENV !== "production" ? HvTag.propTypes = {
-  /**
-   * Id to be applied to the root node.
-   */
-  id: PropTypes.string,
-
-  /**
-   *   A Jss Object used to override or extend the styles applied to the tag.
-   */
-  classes: PropTypes.shape({
-    /**
-     * Styles applied to the component root class.
-     */
-    root: PropTypes.string,
-
-    /**
-     * Styles applied to the component label.
-     */
-    label: PropTypes.string,
-
-    /**
-     * Styles applied to the component when it is tag.
-     */
-    square: PropTypes.string,
-
-    /**
-     * Styles applied to the component when it is chip.
-     */
-    round: PropTypes.string,
-
-    /**
-     * Styles applied to the component when shows label.
-     */
-    deleteIcon: PropTypes.string,
-
-    /**
-     * Styles applied to the component when disabled.
-     */
-    disabled: PropTypes.string,
-
-    /**
-     * Styles applied to the button if keyboard focused.
-     */
-    focusVisible: PropTypes.string
-  }),
-
-  /**
-   * A String representing the background color of the tag.
-   * You can use either an HEX or color name from the palette.
-   */
-  backgroundColor: PropTypes.string,
-
-  /**
-   * Category of tag to use
-   */
-  variant: PropTypes.oneOf(["informational", "success", "warning", "error", "categorical"]),
-
-  /**
-   * A String or Array of strings representing the colors to override in the icon.
-   * Each element inside the array will override a diferent color.
-   * You can use either an HEX or color name from the palette.
-   */
-  color: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
-
-  /**
-   * Sets one of the standard semantic palette colors of the icon
-   */
-  semantic: PropTypes.oneOf(["sema1", "sema2", "sema3", "sema4", "sema5", "sema6", "sema7", "sema8", "sema9", "sema10", "sema11", "sema12", "sema13", "sema14", "sema15", "sema16", "sema17", "sema18", "sema19", "sema20"]),
-  shape: PropTypes.string,
-
-  /**
-   * The content of the Tag.
-   */
-  children: PropTypes.node.isRequired,
-
-  /**
-   * The disabled property of the Tag.
-   */
-  disabled: PropTypes.string,
-
-  /**
-   * The cancel icon is shown based on this property
-   */
-  showcancelicon: PropTypes.bool
-} : void 0;
-export default withStyles(styles, {
-  name: "HvTag"
-})(HvTag);
-//# sourceMappingURL=Tag.js.map

package/dist/modern/Tag/Tag.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tag.js","names":["React","PropTypes","Close","useDeprecated","clsx","withStyles","makeStyles","useTheme","styles","useStyles","name","getColor","theme","color","defaultColor","palette","HvTag","props","id","semantic","children","disabled","variant","shape","showcancelicon","others","classes","isDisabled","Tagshape","square","inlineStyle","backgroundColor","hv","accent","acce1","root","label","deleteIcon","propTypes","string","round","focusVisible","oneOf","oneOfType","arrayOf","node","isRequired","bool"],"sources":["../../../src/Tag/Tag.js"],"sourcesContent":["import React from \"react\";\nimport PropTypes from \"prop-types\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDeprecated } from \"@hitachivantara/uikit-react-core\";\n\nimport clsx from \"clsx\";\nimport { withStyles, makeStyles, useTheme } from \"@material-ui/core\";\nimport styles from \"./styles\";\n\n/**\n * The tag is a component used to notify the user about the labelled ,categorised, or organised item , in the app context.\n */\nconst useStyles = makeStyles(styles, { name: \"HvTag\" });\n\nconst getColor = (theme, color, defaultColor) => theme.palette[color] || color || defaultColor;\nexport const HvTag = (props) => {\n  const {\n    id,\n    semantic,\n    children,\n    disabled,\n    variant,\n    color,\n    shape,\n    showcancelicon = false,\n    ...others\n  } = props;\n\n  useDeprecated(\"Tag\", \"Please use the Tag component in Core\");\n  const classes = useStyles();\n  const isDisabled = disabled || false;\n  const Tagshape = shape || classes.square;\n  const theme = useTheme();\n  const inlineStyle = {};\n\n  if (semantic) {\n    inlineStyle.backgroundColor = getColor(\n      theme,\n      theme.palette?.[semantic],\n      theme.hv.palette.accent.acce1\n    );\n  }\n\n  /**\n   * Renders the content for the tag elements.\n   */\n  return (\n    <div\n      id={id}\n      role=\"button\"\n      className={clsx(\n        classes.root,\n        classes[variant],\n        { ...others },\n        {\n          [classes.disabled]: isDisabled,\n          [classes[`${shape}`]]: Tagshape,\n        }\n      )}\n      style={inlineStyle}\n      disabled={isDisabled}\n      {...others}\n    >\n      <span className={classes.label}>{children}</span>\n      {showcancelicon && (\n        <Close\n          className={clsx(classes.deleteIcon, {\n            [classes.disabled]: isDisabled,\n          })}\n          color=\"atmo5\"\n        />\n      )}\n    </div>\n  );\n};\n\nHvTag.propTypes = {\n  /**\n   * Id to be applied to the root node.\n   */\n  id: PropTypes.string,\n  /**\n   *   A Jss Object used to override or extend the styles applied to the tag.\n   */\n  classes: PropTypes.shape({\n    /**\n     * Styles applied to the component root class.\n     */\n    root: PropTypes.string,\n    /**\n     * Styles applied to the component label.\n     */\n    label: PropTypes.string,\n    /**\n     * Styles applied to the component when it is tag.\n     */\n    square: PropTypes.string,\n    /**\n     * Styles applied to the component when it is chip.\n     */\n    round: PropTypes.string,\n\n    /**\n     * Styles applied to the component when shows label.\n     */\n    deleteIcon: PropTypes.string,\n    /**\n     * Styles applied to the component when disabled.\n     */\n    disabled: PropTypes.string,\n    /**\n     * Styles applied to the button if keyboard focused.\n     */\n    focusVisible: PropTypes.string,\n  }),\n  /**\n   * A String representing the background color of the tag.\n   * You can use either an HEX or color name from the palette.\n   */\n  backgroundColor: PropTypes.string,\n  /**\n   * Category of tag to use\n   */\n  variant: PropTypes.oneOf([\"informational\", \"success\", \"warning\", \"error\", \"categorical\"]),\n  /**\n   * A String or Array of strings representing the colors to override in the icon.\n   * Each element inside the array will override a diferent color.\n   * You can use either an HEX or color name from the palette.\n   */\n  color: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),\n  /**\n   * Sets one of the standard semantic palette colors of the icon\n   */\n  semantic: PropTypes.oneOf([\n    \"sema1\",\n    \"sema2\",\n    \"sema3\",\n    \"sema4\",\n    \"sema5\",\n    \"sema6\",\n    \"sema7\",\n    \"sema8\",\n    \"sema9\",\n    \"sema10\",\n    \"sema11\",\n    \"sema12\",\n    \"sema13\",\n    \"sema14\",\n    \"sema15\",\n    \"sema16\",\n    \"sema17\",\n    \"sema18\",\n    \"sema19\",\n    \"sema20\",\n  ]),\n  shape: PropTypes.string,\n  /**\n   * The content of the Tag.\n   */\n  children: PropTypes.node.isRequired,\n  /**\n   * The disabled property of the Tag.\n   */\n  disabled: PropTypes.string,\n  /**\n   * The cancel icon is shown based on this property\n   */\n  showcancelicon: PropTypes.bool,\n};\n\nexport default withStyles(styles, { name: \"HvTag\" })(HvTag);\n"],"mappings":"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"}

package/dist/modern/Tag/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./Tag";
-export * from "./Tag";

package/dist/modern/Tag/index.js

@@ -1,2 +0,0 @@
-export { default } from "./Tag";
-//# sourceMappingURL=index.js.map

package/dist/modern/Tag/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["default"],"sources":["../../../src/Tag/index.js"],"sourcesContent":["export { default } from \"./Tag\";\n"],"mappings":"AAAA,SAASA,OAAT,QAAwB,OAAxB"}