@hitachivantara/uikit-react-core 5.44.1 → 5.44.3

package/dist/esm/Kpi/Kpi.js

@@ -0,0 +1,78 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useLabels } from "../hooks/useLabels.js";
+import { useClasses } from "./Kpi.styles.js";
+import { staticClasses } from "./Kpi.styles.js";
+import { HvTypography } from "../Typography/Typography.js";
+const DEFAULT_LABELS = {
+  title: "",
+  indicator: void 0,
+  unit: void 0,
+  comparisonIndicatorInfo: void 0
+};
+const HvKpi = (props) => {
+  const {
+    trendIndicator = null,
+    visualIndicator = null,
+    visualComparison = null,
+    indicatorUnitTextVariant = "title2",
+    indicatorTextVariant = "title1",
+    labels,
+    classes: classesProp,
+    className,
+    ...others
+  } = useDefaultProps("HvKpi", props);
+  const { classes, cx } = useClasses(classesProp);
+  const mergedLabels = useLabels(DEFAULT_LABELS, labels);
+  const InternalVisualComparison = typeof visualComparison === "string" ? HvTypography : "div";
+  return /* @__PURE__ */ jsxs("div", { className: cx(classes.root, className), ...others, children: [
+    /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(HvTypography, { variant: "label", children: mergedLabels?.title }) }),
+    /* @__PURE__ */ jsxs("div", { className: classes.indicatorsContainer, children: [
+      visualIndicator && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cx(
+            classes.visualIndicatorContainer,
+            classes.spacingToTheRight
+          ),
+          children: visualIndicator
+        }
+      ),
+      mergedLabels?.indicator && /* @__PURE__ */ jsx(
+        HvTypography,
+        {
+          className: cx(classes.spacingToTheRight, classes.indicatorText),
+          variant: indicatorTextVariant,
+          children: mergedLabels.indicator
+        }
+      ),
+      mergedLabels?.unit && /* @__PURE__ */ jsx(
+        HvTypography,
+        {
+          className: classes.indicatorUnit,
+          variant: indicatorUnitTextVariant,
+          children: mergedLabels.unit
+        }
+      )
+    ] }),
+    visualComparison && /* @__PURE__ */ jsxs("div", { className: classes.comparisonComposition, children: [
+      trendIndicator && /* @__PURE__ */ jsx("div", { className: cx(classes.trendLine, classes.spacingToTheRight), children: trendIndicator }),
+      /* @__PURE__ */ jsxs("div", { children: [
+        /* @__PURE__ */ jsx("div", { className: classes.comparisonContainer, children: /* @__PURE__ */ jsx(
+          InternalVisualComparison,
+          {
+            className: cx(classes.comparisons, classes.spacingToTheRight),
+            variant: "label",
+            children: visualComparison
+          }
+        ) }),
+        /* @__PURE__ */ jsx("div", { className: classes.comparisonContainer, children: /* @__PURE__ */ jsx(HvTypography, { className: classes.comparisons, variant: "caption2", children: mergedLabels?.comparisonIndicatorInfo }) })
+      ] })
+    ] })
+  ] });
+};
+export {
+  HvKpi,
+  staticClasses as kpiClasses
+};
+//# sourceMappingURL=Kpi.js.map

package/dist/esm/Kpi/Kpi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kpi.js","sources":["../../../src/Kpi/Kpi.tsx"],"sourcesContent":["import { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Kpi.styles\";\n\nexport { staticClasses as kpiClasses };\n\nexport type HvKpiClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvKpiLabelProps {\n  /**\n   * The text at the top of the kpi.\n   */\n  title?: string;\n  /**\n   * The text in the middle of the kpi.\n   */\n  indicator?: string;\n  /**\n   * The text to the right of the indicator.\n   */\n  unit?: string;\n  /**\n   * The text to the right of the visual comparison.\n   */\n  comparisonIndicatorInfo?: string;\n}\n\nexport interface HvKpiProps extends HvBaseProps<HTMLDivElement, \"children\"> {\n  /**\n   * An Element that will be rendered to the left of the kpi indicator text.\n   */\n  trendIndicator?: React.ReactNode;\n  /**\n   * An Element that will be rendered to the left of the kpi indicator text.\n   */\n  visualIndicator?: React.ReactNode;\n  /**\n   * An Element that will be rendered below the kpi indicator text.\n   */\n  visualComparison?: React.ReactNode;\n  /**\n   * The object that contains the different labels inside the kpi.\n   */\n  labels?: HvKpiLabelProps;\n  /**\n   *  The typography variant used in the main text indicator of the KPI\n   */\n  indicatorTextVariant?: \"display\" | \"title1\" | \"title2\";\n  /**\n   *  The typography variant used in the main text indicator of the KPI\n   */\n  indicatorUnitTextVariant?: \"title2\" | \"body\";\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvKpiClasses;\n}\n\nconst DEFAULT_LABELS = {\n  title: \"\",\n  indicator: undefined,\n  unit: undefined,\n  comparisonIndicatorInfo: undefined,\n};\n\n/**\n * Key Performance Indicator is a type of performance measurement. It monitors a business indicator\n * and its success/failure against a given target. KPIs are the first item read on a dashboard.\n * Communicates simple, immediate and vital information for operational decision making.\n */\nexport const HvKpi = (props: HvKpiProps) => {\n  const {\n    trendIndicator = null,\n    visualIndicator = null,\n    visualComparison = null,\n    indicatorUnitTextVariant = \"title2\",\n    indicatorTextVariant = \"title1\",\n    labels,\n    classes: classesProp,\n    className,\n    ...others\n  } = useDefaultProps(\"HvKpi\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const mergedLabels = useLabels(DEFAULT_LABELS, labels);\n\n  const InternalVisualComparison =\n    typeof visualComparison === \"string\" ? HvTypography : \"div\";\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      <div>\n        <HvTypography variant=\"label\">{mergedLabels?.title}</HvTypography>\n      </div>\n      <div className={classes.indicatorsContainer}>\n        {visualIndicator && (\n          <div\n            className={cx(\n              classes.visualIndicatorContainer,\n              classes.spacingToTheRight\n            )}\n          >\n            {visualIndicator}\n          </div>\n        )}\n        {mergedLabels?.indicator && (\n          <HvTypography\n            className={cx(classes.spacingToTheRight, classes.indicatorText)}\n            variant={indicatorTextVariant}\n          >\n            {mergedLabels.indicator}\n          </HvTypography>\n        )}\n        {mergedLabels?.unit && (\n          <HvTypography\n            className={classes.indicatorUnit}\n            variant={indicatorUnitTextVariant}\n          >\n            {mergedLabels.unit}\n          </HvTypography>\n        )}\n      </div>\n      {visualComparison && (\n        <div className={classes.comparisonComposition}>\n          {trendIndicator && (\n            <div className={cx(classes.trendLine, classes.spacingToTheRight)}>\n              {trendIndicator}\n            </div>\n          )}\n          <div>\n            <div className={classes.comparisonContainer}>\n              <InternalVisualComparison\n                className={cx(classes.comparisons, classes.spacingToTheRight)}\n                variant=\"label\"\n              >\n                {visualComparison}\n              </InternalVisualComparison>\n            </div>\n            <div className={classes.comparisonContainer}>\n              <HvTypography className={classes.comparisons} variant=\"caption2\">\n                {mergedLabels?.comparisonIndicatorInfo}\n              </HvTypography>\n            </div>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;AA8DA,MAAM,iBAAiB;AAAA,EACrB,OAAO;AAAA,EACP,WAAW;AAAA,EACX,MAAM;AAAA,EACN,yBAAyB;AAC3B;AAOa,MAAA,QAAQ,CAAC,UAAsB;AACpC,QAAA;AAAA,IACJ,iBAAiB;AAAA,IACjB,kBAAkB;AAAA,IAClB,mBAAmB;AAAA,IACnB,2BAA2B;AAAA,IAC3B,uBAAuB;AAAA,IACvB;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,SAAS,KAAK;AAElC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAExC,QAAA,eAAe,UAAU,gBAAgB,MAAM;AAErD,QAAM,2BACJ,OAAO,qBAAqB,WAAW,eAAe;AAGtD,SAAA,qBAAC,SAAI,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC/C,UAAA;AAAA,IAAA,oBAAC,SACC,UAAC,oBAAA,cAAA,EAAa,SAAQ,SAAS,UAAA,cAAc,OAAM,EACrD,CAAA;AAAA,IACC,qBAAA,OAAA,EAAI,WAAW,QAAQ,qBACrB,UAAA;AAAA,MACC,mBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW;AAAA,YACT,QAAQ;AAAA,YACR,QAAQ;AAAA,UACV;AAAA,UAEC,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,MAED,cAAc,aACb;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,GAAG,QAAQ,mBAAmB,QAAQ,aAAa;AAAA,UAC9D,SAAS;AAAA,UAER,UAAa,aAAA;AAAA,QAAA;AAAA,MAChB;AAAA,MAED,cAAc,QACb;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAW,QAAQ;AAAA,UACnB,SAAS;AAAA,UAER,UAAa,aAAA;AAAA,QAAA;AAAA,MAChB;AAAA,IAAA,GAEJ;AAAA,IACC,oBACC,qBAAC,OAAI,EAAA,WAAW,QAAQ,uBACrB,UAAA;AAAA,MACC,kBAAA,oBAAC,SAAI,WAAW,GAAG,QAAQ,WAAW,QAAQ,iBAAiB,GAC5D,UACH,eAAA,CAAA;AAAA,2BAED,OACC,EAAA,UAAA;AAAA,QAAC,oBAAA,OAAA,EAAI,WAAW,QAAQ,qBACtB,UAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAW,GAAG,QAAQ,aAAa,QAAQ,iBAAiB;AAAA,YAC5D,SAAQ;AAAA,YAEP,UAAA;AAAA,UAAA;AAAA,QAAA,GAEL;AAAA,QACC,oBAAA,OAAA,EAAI,WAAW,QAAQ,qBACtB,UAAC,oBAAA,cAAA,EAAa,WAAW,QAAQ,aAAa,SAAQ,YACnD,UAAA,cAAc,wBACjB,CAAA,GACF;AAAA,MAAA,GACF;AAAA,IAAA,GACF;AAAA,EAEJ,EAAA,CAAA;AAEJ;"}

package/dist/esm/Kpi/Kpi.styles.js

@@ -0,0 +1,39 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvKpi", {
+  root: { width: "100%", height: "100%" },
+  visualIndicatorContainer: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "40px",
+    backgroundColor: "transparent"
+  },
+  comparisons: {},
+  comparisonContainer: {
+    minHeight: "16px",
+    display: "flex",
+    alignItems: "flex-end"
+  },
+  comparisonComposition: {
+    width: "100%",
+    display: "flex",
+    flexDirection: "row",
+    flexWrap: "wrap",
+    alignItems: "center"
+  },
+  indicatorsContainer: {
+    display: "inline-flex",
+    minHeight: "16px",
+    alignItems: "flex-end"
+  },
+  indicatorText: {},
+  indicatorUnit: { alignSelf: "flex-end", paddingBottom: "3px" },
+  spacingToTheRight: { marginRight: theme.space.xs },
+  trendLine: { float: "right" }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Kpi.styles.js.map

package/dist/esm/Kpi/Kpi.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Kpi.styles.js","sources":["../../../src/Kpi/Kpi.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvKpi\", {\n  root: { width: \"100%\", height: \"100%\" },\n  visualIndicatorContainer: {\n    display: \"inline-flex\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    height: \"40px\",\n    backgroundColor: \"transparent\",\n  },\n  comparisons: {},\n  comparisonContainer: {\n    minHeight: \"16px\",\n    display: \"flex\",\n    alignItems: \"flex-end\",\n  },\n  comparisonComposition: {\n    width: \"100%\",\n    display: \"flex\",\n    flexDirection: \"row\",\n    flexWrap: \"wrap\",\n    alignItems: \"center\",\n  },\n  indicatorsContainer: {\n    display: \"inline-flex\",\n    minHeight: \"16px\",\n    alignItems: \"flex-end\",\n  },\n  indicatorText: {},\n  indicatorUnit: { alignSelf: \"flex-end\", paddingBottom: \"3px\" },\n  spacingToTheRight: { marginRight: theme.space.xs },\n  trendLine: { float: \"right\" },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,SAAS;AAAA,EAClE,MAAM,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,EACtC,0BAA0B;AAAA,IACxB,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,QAAQ;AAAA,IACR,iBAAiB;AAAA,EACnB;AAAA,EACA,aAAa,CAAC;AAAA,EACd,qBAAqB;AAAA,IACnB,WAAW;AAAA,IACX,SAAS;AAAA,IACT,YAAY;AAAA,EACd;AAAA,EACA,uBAAuB;AAAA,IACrB,OAAO;AAAA,IACP,SAAS;AAAA,IACT,eAAe;AAAA,IACf,UAAU;AAAA,IACV,YAAY;AAAA,EACd;AAAA,EACA,qBAAqB;AAAA,IACnB,SAAS;AAAA,IACT,WAAW;AAAA,IACX,YAAY;AAAA,EACd;AAAA,EACA,eAAe,CAAC;AAAA,EAChB,eAAe,EAAE,WAAW,YAAY,eAAe,MAAM;AAAA,EAC7D,mBAAmB,EAAE,aAAa,MAAM,MAAM,GAAG;AAAA,EACjD,WAAW,EAAE,OAAO,QAAQ;AAC9B,CAAC;"}

package/dist/esm/Link/Link.js

@@ -0,0 +1,36 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useClasses } from "./Link.styles.js";
+import { staticClasses } from "./Link.styles.js";
+const HvLink = (props) => {
+  const {
+    onClick,
+    classes: classesProp,
+    className,
+    route,
+    data,
+    children,
+    ...others
+  } = useDefaultProps("HvLink", props);
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: route,
+      onClick: (event) => {
+        if (!onClick)
+          return;
+        event.preventDefault();
+        onClick?.(event, data);
+      },
+      className: cx(classes.a, className),
+      ...others,
+      children
+    }
+  );
+};
+export {
+  HvLink,
+  staticClasses as linkClasses
+};
+//# sourceMappingURL=Link.js.map

package/dist/esm/Link/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","sources":["../../../src/Link/Link.tsx"],"sourcesContent":["import { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Link.styles\";\n\nexport { staticClasses as linkClasses };\n\nexport type HvLinkClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvLinkProps extends HvBaseProps<HTMLAnchorElement, \"onClick\"> {\n  onClick?: (\n    event: React.MouseEvent<HTMLAnchorElement>,\n    data: any\n  ) => void | undefined;\n  route?: string;\n  data?: any;\n  children: any;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLinkClasses;\n}\n\nexport const HvLink = (props: HvLinkProps) => {\n  const {\n    onClick,\n    classes: classesProp,\n    className,\n    route,\n    data,\n    children,\n    ...others\n  } = useDefaultProps(\"HvLink\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <a\n      href={route}\n      onClick={(event) => {\n        if (!onClick) return;\n\n        event.preventDefault();\n        onClick?.(event, data);\n      }}\n      className={cx(classes.a, className)}\n      {...others}\n    >\n      {children}\n    </a>\n  );\n};\n"],"names":[],"mappings":";;;;AAsBa,MAAA,SAAS,CAAC,UAAuB;AACtC,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,UAAU,KAAK;AAEnC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAM;AAAA,MACN,SAAS,CAAC,UAAU;AAClB,YAAI,CAAC;AAAS;AAEd,cAAM,eAAe;AACrB,kBAAU,OAAO,IAAI;AAAA,MACvB;AAAA,MACA,WAAW,GAAG,QAAQ,GAAG,SAAS;AAAA,MACjC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/esm/Link/Link.styles.js

@@ -0,0 +1,16 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { outlineStyles } from "../utils/focusUtils.js";
+import { createClasses } from "../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvLink", {
+  a: {
+    ...theme.typography.label,
+    textDecoration: "underline",
+    color: theme.colors.primary,
+    "&:focus-visible": { ...outlineStyles }
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Link.styles.js.map

package/dist/esm/Link/Link.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.styles.js","sources":["../../../src/Link/Link.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvLink\", {\n  a: {\n    ...theme.typography.label,\n    textDecoration: \"underline\",\n    color: theme.colors.primary,\n\n    \"&:focus-visible\": { ...outlineStyles },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,GAAG;AAAA,IACD,GAAG,MAAM,WAAW;AAAA,IACpB,gBAAgB;AAAA,IAChB,OAAO,MAAM,OAAO;AAAA,IAEpB,mBAAmB,EAAE,GAAG,cAAc;AAAA,EACxC;AACF,CAAC;"}

package/dist/esm/List/List.js

@@ -0,0 +1,288 @@
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import { useRef, useEffect, useMemo, forwardRef, isValidElement } from "react";
+import { FixedSizeList } from "react-window";
+import { DropRightXS } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { setId } from "../utils/setId.js";
+import { wrapperTooltip } from "../utils/wrapperTooltip.js";
+import { useClasses } from "./List.styles.js";
+import { staticClasses } from "./List.styles.js";
+import { useSelectableList } from "./useSelectableList.js";
+import { parseList } from "./utils.js";
+import { HvCheckBox } from "../CheckBox/CheckBox.js";
+import { HvRadio } from "../Radio/Radio.js";
+import { HvLink } from "../Link/Link.js";
+import { HvListContainer } from "../ListContainer/ListContainer.js";
+import { HvTypography } from "../Typography/Typography.js";
+import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
+const DEFAULT_LABELS = {
+  selectAll: "Select All",
+  selectionConjunction: "/"
+};
+const HvList = (props) => {
+  const {
+    id,
+    classes: classesProp,
+    className,
+    multiSelect = false,
+    hasTooltips = false,
+    showSelectAll = false,
+    labels = DEFAULT_LABELS,
+    useSelector = false,
+    selectable = true,
+    singleSelectionToggle = true,
+    condensed = false,
+    onChange,
+    onClick,
+    values: valuesProp = [],
+    height,
+    virtualized = false,
+    ...others
+  } = useDefaultProps("HvList", props);
+  const { classes, cx } = useClasses(classesProp);
+  const [list, setList, selection] = useSelectableList(valuesProp);
+  const listRef = useRef(null);
+  useEffect(() => {
+    const passedProps = { multiSelect, selectable, singleSelectionToggle };
+    const parsedList = parseList(
+      void 0,
+      passedProps,
+      void 0,
+      valuesProp
+    );
+    setList(parsedList);
+  }, [valuesProp, multiSelect, selectable, singleSelectionToggle, setList]);
+  const [role, itemRole] = useMemo(() => {
+    if (selectable && useSelector)
+      return ["list", "listitem"];
+    if (selectable)
+      return ["listbox", "option"];
+    return ["menu", "menuitem"];
+  }, [selectable, useSelector]);
+  const handleSelect = (evt, item) => {
+    if (!item.path)
+      evt.preventDefault();
+    if (item.disabled)
+      return;
+    const passedProps = { multiSelect, selectable, singleSelectionToggle };
+    const parsedList = parseList(item, passedProps, void 0, list);
+    setList(parsedList);
+    onClick?.(evt, item);
+    onChange?.(parsedList);
+  };
+  const handleSelectAll = () => {
+    const passedProps = { multiSelect, selectable, singleSelectionToggle };
+    const anySelectableSelected = list.some(
+      (elem) => elem.selected || elem.disabled
+    );
+    const parsedList = parseList(
+      void 0,
+      passedProps,
+      !anySelectableSelected,
+      list
+    );
+    setList(parsedList);
+    onChange?.(parsedList);
+  };
+  const renderLeftIcon = (item) => {
+    return isValidElement(item.icon) ? item.icon : item.icon?.({
+      isSelected: item.selected,
+      isDisabled: item.disabled
+    });
+  };
+  const renderSelectAll = () => {
+    const { selectAll, selectionConjunction } = labels;
+    const anySelected2 = !!selection?.length;
+    const allSelected = selection.length === list.length;
+    const selectionLabel = /* @__PURE__ */ jsx(HvTypography, { component: "span", children: !anySelected2 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("b", { children: selectAll }),
+      ` (${list.length})`
+    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("b", { children: selection.length }),
+      ` ${selectionConjunction} `,
+      list.length
+    ] }) });
+    return /* @__PURE__ */ jsx(
+      HvCheckBox,
+      {
+        id: setId(id, "select-all"),
+        label: selectionLabel,
+        onChange: handleSelectAll,
+        className: classes.selectAllSelector,
+        indeterminate: anySelected2 && !allSelected,
+        checked: allSelected
+      }
+    );
+  };
+  const renderItemText = (item) => {
+    const ItemText = wrapperTooltip(hasTooltips, item.label, item.label);
+    return !multiSelect && item.path ? /* @__PURE__ */ jsx(HvLink, { route: item.path, classes: { a: classes.link }, children: /* @__PURE__ */ jsx(ItemText, {}) }, item.label) : /* @__PURE__ */ jsx(ItemText, {});
+  };
+  const renderMultiSelectItem = (item, itemId) => {
+    if (useSelector) {
+      const Selection = wrapperTooltip(
+        hasTooltips,
+        /* @__PURE__ */ jsx(
+          HvCheckBox,
+          {
+            id: setId(itemId, "selector"),
+            label: item.label,
+            checked: item.selected,
+            disabled: item.disabled,
+            onChange: (evt) => handleSelect(evt, item),
+            classes: {
+              root: classes.selectorRoot,
+              container: classes.selectorContainer,
+              label: classes.truncate
+            }
+          }
+        ),
+        item.label
+      );
+      return /* @__PURE__ */ jsx(Selection, {});
+    }
+    return renderItemText(item);
+  };
+  const renderSingleSelectItem = (item, itemId) => {
+    if (useSelector) {
+      const Selection = wrapperTooltip(
+        hasTooltips,
+        /* @__PURE__ */ jsx(
+          HvRadio,
+          {
+            id: setId(itemId, "selector"),
+            label: item.label,
+            checked: item.selected,
+            disabled: item.disabled,
+            classes: {
+              root: classes.selectorRoot,
+              container: classes.selectorContainer,
+              label: classes.truncate
+            }
+          }
+        ),
+        item.label
+      );
+      return /* @__PURE__ */ jsx(Selection, {});
+    }
+    return renderItemText(item);
+  };
+  const renderListItem = (item, i, otherProps = {}) => {
+    const itemId = setId(id, "item", i);
+    const selected = item.selected || false;
+    let startAdornment = null;
+    if (!useSelector && item.icon) {
+      startAdornment = renderLeftIcon(item);
+    }
+    return /* @__PURE__ */ jsx(
+      HvListItem,
+      {
+        id: itemId,
+        role: itemRole,
+        disabled: item.disabled || void 0,
+        className: classes.item,
+        classes: {
+          selected: cx({
+            [classes.itemSelector]: useSelector || multiSelect
+          })
+        },
+        selected: multiSelect || selected ? selected : void 0,
+        onClick: (evt) => handleSelect(evt, item),
+        startAdornment,
+        endAdornment: item.showNavIcon && /* @__PURE__ */ jsx(DropRightXS, { className: classes.box, iconSize: "XS" }),
+        ...otherProps,
+        children: multiSelect ? renderMultiSelectItem(item, itemId) : renderSingleSelectItem(item, itemId)
+      },
+      i
+    );
+  };
+  const filteredList = list.filter((it) => !it.isHidden);
+  const anySelected = list.map((item) => item.selected && !item.disabled).reduce((result, selected) => result || selected, false);
+  const selectedItemIndex = list.findIndex((item) => item.selected);
+  useEffect(() => {
+    if (selectedItemIndex >= 0 && listRef.current !== null) {
+      listRef.current.scrollToItem(selectedItemIndex);
+    }
+  }, [listRef, selectedItemIndex]);
+  const renderVirtualizedListItem = ({ index, style }) => {
+    const item = filteredList[index];
+    const tabIndex = item.tabIndex || !anySelected && index === 0 || item.selected && !item.disabled ? 0 : -1;
+    return renderListItem(item, index, {
+      style: {
+        ...style,
+        top: `${parseFloat(style.top) + 5}px`,
+        left: `${parseFloat(style.left) + 5}px`,
+        width: `calc(${parseFloat(style.width)}% - 10px)`
+      },
+      tabIndex,
+      interactive: true,
+      condensed,
+      disableGutters: useSelector
+    });
+  };
+  const ariaMultiSelectable = role === "listbox" && multiSelect || void 0;
+  const ListContainer = useMemo(() => {
+    return forwardRef(
+      ({ ...rest }, ref) => /* @__PURE__ */ jsx(
+        HvListContainer,
+        {
+          id,
+          className: cx(classes.root, className),
+          role,
+          interactive: true,
+          condensed,
+          disableGutters: useSelector,
+          "aria-multiselectable": ariaMultiSelectable,
+          ref,
+          ...rest
+        }
+      )
+    );
+  }, [
+    cx,
+    id,
+    useSelector,
+    className,
+    classes.root,
+    role,
+    condensed,
+    ariaMultiSelectable
+  ]);
+  if (filteredList.length === 0)
+    return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    multiSelect && useSelector && showSelectAll && renderSelectAll(),
+    !virtualized ? /* @__PURE__ */ jsx(
+      HvListContainer,
+      {
+        id,
+        className: cx(classes.root, className),
+        role,
+        interactive: true,
+        condensed,
+        disableGutters: useSelector,
+        "aria-multiselectable": ariaMultiSelectable,
+        ...others,
+        children: filteredList.map((item, i) => renderListItem(item, i))
+      }
+    ) : /* @__PURE__ */ jsx(
+      FixedSizeList,
+      {
+        ref: listRef,
+        className: classes.virtualizedRoot,
+        height: (height || 0) + 5,
+        width: "100%",
+        itemCount: filteredList.length,
+        itemSize: condensed ? 32 : 40,
+        innerElementType: ListContainer,
+        ...others,
+        children: renderVirtualizedListItem
+      }
+    )
+  ] });
+};
+export {
+  HvList,
+  staticClasses as listClasses
+};
+//# sourceMappingURL=List.js.map

package/dist/esm/List/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","sources":["../../../src/List/List.tsx"],"sourcesContent":["import {\n  AriaRole,\n  forwardRef,\n  isValidElement,\n  useEffect,\n  useMemo,\n  useRef,\n} from \"react\";\n\nimport { FixedSizeList } from \"react-window\";\n\nimport { DropRightXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { HvBaseProps } from \"../types/generic\";\nimport {\n  HvListContainer,\n  HvListContainerProps,\n  HvListItem,\n} from \"../ListContainer\";\nimport { HvTypography } from \"../Typography\";\nimport { setId } from \"../utils/setId\";\nimport { wrapperTooltip } from \"../utils/wrapperTooltip\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { HvCheckBox } from \"../CheckBox\";\nimport { HvLink } from \"../Link\";\nimport { HvRadio } from \"../Radio\";\n\nimport { staticClasses, useClasses } from \"./List.styles\";\nimport { useSelectableList } from \"./useSelectableList\";\nimport { parseList } from \"./utils\";\nimport { HvListLabels, HvListValue } from \"./types\";\n\nexport { staticClasses as listClasses };\n\nexport type HvListClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvListProps\n  extends HvBaseProps<HTMLUListElement, \"onChange\" | \"onClick\"> {\n  /**\n   * A list containing the elements to be rendered.\n   *\n   * - id: The id of the item.\n   * - label: The label of the element to be rendered.\n   * - selected: The selection state of the element.\n   * - disabled: The disabled state of the element.\n   * - isHidden: Is item visible.\n   * - icon: The icon.\n   * - showNavIcon: If true renders the navigation icon on the right.\n   * - path: The path to navigate to.\n   */\n  values: HvListValue[];\n  /** If true renders a multi select list. */\n  multiSelect?: boolean;\n  /**\n   * If true renders select all option for multi selection lists with selectors.\n   * note: It will only be rendered if multiSelect and useSelector props are set to true.\n   */\n  showSelectAll?: boolean;\n  /** An object containing all the labels for the dropdown. */\n  labels?: HvListLabels;\n  /** If true renders list items with radio or checkbox selectors. */\n  useSelector?: boolean;\n  /** Call back fired when list item is selected. Returns selection state. */\n  onChange?: (value: HvListValue[]) => void;\n  /** Call back fired when list item is selected. Returns selected item. */\n  onClick?: (\n    event: React.ChangeEvent<HTMLLIElement>,\n    value: HvListValue\n  ) => void;\n  /** If `true` the list items will show the selection state. */\n  selectable?: boolean;\n  /** If `true`, selection can be toggled when single selection. */\n  singleSelectionToggle?: boolean;\n  /** If `true` the list will be rendered without vertical spacing. */\n  condensed?: boolean;\n  /** If `true` the dropdown will show tooltips when user mouseenter text in list */\n  hasTooltips?: boolean;\n  /** Experimental. Height of the dropdown, in case you want to control it from a prop. Styles can also be used through dropdownListContainer class. Required in case virtualized is used */\n  height?: number;\n  /** Experimental. Uses dropdown in a virtualized form, where not all options are rendered initially. Good for use cases with a lot of options. */\n  virtualized?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvListClasses;\n}\n\nconst DEFAULT_LABELS = {\n  selectAll: \"Select All\",\n  selectionConjunction: \"/\",\n};\n\n/**\n * Component used to show a set of related data to the user.\n */\nexport const HvList = (props: HvListProps) => {\n  const {\n    id,\n    classes: classesProp,\n    className,\n    multiSelect = false,\n    hasTooltips = false,\n    showSelectAll = false,\n    labels = DEFAULT_LABELS,\n    useSelector = false,\n    selectable = true,\n    singleSelectionToggle = true,\n    condensed = false,\n    onChange,\n    onClick,\n    values: valuesProp = [],\n    height,\n    virtualized = false,\n    ...others\n  } = useDefaultProps(\"HvList\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [list, setList, selection] = useSelectableList(valuesProp);\n  const listRef = useRef<any>(null);\n\n  useEffect(() => {\n    const passedProps = { multiSelect, selectable, singleSelectionToggle };\n    const parsedList: HvListValue[] = parseList(\n      undefined,\n      passedProps,\n      undefined,\n      valuesProp\n    );\n\n    setList(parsedList);\n  }, [valuesProp, multiSelect, selectable, singleSelectionToggle, setList]);\n\n  const [role, itemRole] = useMemo<[AriaRole, AriaRole]>(() => {\n    // selectors are responsible for the role & selection state\n    if (selectable && useSelector) return [\"list\", \"listitem\"];\n\n    if (selectable) return [\"listbox\", \"option\"];\n    return [\"menu\", \"menuitem\"];\n  }, [selectable, useSelector]);\n\n  const handleSelect = (evt, item) => {\n    if (!item.path) evt.preventDefault();\n    if (item.disabled) return;\n\n    const passedProps = { multiSelect, selectable, singleSelectionToggle };\n    const parsedList = parseList(item, passedProps, undefined, list);\n    setList(parsedList);\n\n    onClick?.(evt, item);\n    onChange?.(parsedList);\n  };\n\n  const handleSelectAll = () => {\n    const passedProps = { multiSelect, selectable, singleSelectionToggle };\n    const anySelectableSelected = list.some(\n      (elem) => elem.selected || elem.disabled\n    );\n    const parsedList = parseList(\n      undefined,\n      passedProps,\n      !anySelectableSelected,\n      list\n    );\n    setList(parsedList);\n\n    onChange?.(parsedList);\n  };\n\n  const renderLeftIcon = (item) => {\n    return isValidElement(item.icon)\n      ? item.icon\n      : item.icon?.({\n          isSelected: item.selected,\n          isDisabled: item.disabled,\n        });\n  };\n\n  const renderSelectAll = () => {\n    const { selectAll, selectionConjunction } = labels;\n\n    const anySelected = !!selection?.length;\n    const allSelected = selection.length === list.length;\n\n    const selectionLabel = (\n      <HvTypography component=\"span\">\n        {!anySelected ? (\n          <>\n            <b>{selectAll}</b>\n            {` (${list.length})`}\n          </>\n        ) : (\n          <>\n            <b>{selection.length}</b>\n            {`\\xa0${selectionConjunction}\\xa0`}\n            {list.length}\n          </>\n        )}\n      </HvTypography>\n    );\n\n    return (\n      <HvCheckBox\n        id={setId(id, \"select-all\")}\n        label={selectionLabel}\n        onChange={handleSelectAll}\n        className={classes.selectAllSelector}\n        indeterminate={anySelected && !allSelected}\n        checked={allSelected}\n      />\n    );\n  };\n\n  const renderItemText = (item) => {\n    const ItemText = wrapperTooltip(hasTooltips, item.label, item.label);\n\n    return !multiSelect && item.path ? (\n      <HvLink key={item.label} route={item.path} classes={{ a: classes.link }}>\n        <ItemText />\n      </HvLink>\n    ) : (\n      <ItemText />\n    );\n  };\n\n  const renderMultiSelectItem = (item, itemId) => {\n    if (useSelector) {\n      const Selection = wrapperTooltip(\n        hasTooltips,\n        <HvCheckBox\n          id={setId(itemId, \"selector\")}\n          label={item.label}\n          checked={item.selected}\n          disabled={item.disabled}\n          onChange={(evt) => handleSelect(evt, item)}\n          classes={{\n            root: classes.selectorRoot,\n            container: classes.selectorContainer,\n            label: classes.truncate,\n          }}\n        />,\n        item.label\n      );\n      return <Selection />;\n    }\n\n    return renderItemText(item);\n  };\n\n  const renderSingleSelectItem = (item, itemId) => {\n    if (useSelector) {\n      const Selection = wrapperTooltip(\n        hasTooltips,\n        <HvRadio\n          id={setId(itemId, \"selector\")}\n          label={item.label}\n          checked={item.selected}\n          disabled={item.disabled}\n          classes={{\n            root: classes.selectorRoot,\n            container: classes.selectorContainer,\n            label: classes.truncate,\n          }}\n        />,\n        item.label\n      );\n      return <Selection />;\n    }\n    return renderItemText(item);\n  };\n\n  const renderListItem = (item, i, otherProps = {}) => {\n    const itemId = setId(id, \"item\", i);\n    const selected = item.selected || false;\n\n    let startAdornment = null;\n    if (!useSelector && item.icon) {\n      startAdornment = renderLeftIcon(item);\n    }\n\n    return (\n      <HvListItem\n        key={i}\n        id={itemId}\n        role={itemRole}\n        disabled={item.disabled || undefined}\n        className={classes.item}\n        classes={{\n          selected: cx({\n            [classes.itemSelector]: useSelector || multiSelect,\n          }),\n        }}\n        selected={multiSelect || selected ? selected : undefined}\n        onClick={(evt) => handleSelect(evt, item)}\n        startAdornment={startAdornment}\n        endAdornment={\n          item.showNavIcon && (\n            <DropRightXS className={classes.box} iconSize=\"XS\" />\n          )\n        }\n        {...otherProps}\n      >\n        {multiSelect\n          ? renderMultiSelectItem(item, itemId)\n          : renderSingleSelectItem(item, itemId)}\n      </HvListItem>\n    );\n  };\n\n  const filteredList = list.filter((it) => !it.isHidden);\n  const anySelected = list\n    .map((item) => item.selected && !item.disabled)\n    .reduce((result, selected) => result || selected, false);\n\n  const selectedItemIndex = list.findIndex((item) => item.selected);\n  useEffect(() => {\n    if (selectedItemIndex >= 0 && listRef.current !== null) {\n      listRef.current.scrollToItem(selectedItemIndex);\n    }\n  }, [listRef, selectedItemIndex]);\n\n  const renderVirtualizedListItem = ({ index, style }) => {\n    const item = filteredList[index];\n    const tabIndex =\n      item.tabIndex ||\n      (!anySelected && index === 0) ||\n      (item.selected && !item.disabled)\n        ? 0\n        : -1;\n\n    return renderListItem(item, index, {\n      style: {\n        ...style,\n        top: `${parseFloat(style.top) + 5}px`,\n        left: `${parseFloat(style.left) + 5}px`,\n        width: `calc(${parseFloat(style.width)}% - 10px)`,\n      },\n      tabIndex,\n      interactive: true,\n      condensed,\n      disableGutters: useSelector,\n    });\n  };\n\n  const ariaMultiSelectable = (role === \"listbox\" && multiSelect) || undefined;\n\n  const ListContainer = useMemo(() => {\n    return forwardRef<HTMLUListElement, HvListContainerProps>(\n      ({ ...rest }, ref) => (\n        <HvListContainer\n          id={id}\n          className={cx(classes.root, className)}\n          role={role}\n          interactive\n          condensed={condensed}\n          disableGutters={useSelector}\n          aria-multiselectable={ariaMultiSelectable}\n          ref={ref}\n          {...rest}\n        />\n      )\n    );\n  }, [\n    cx,\n    id,\n    useSelector,\n    className,\n    classes.root,\n    role,\n    condensed,\n    ariaMultiSelectable,\n  ]);\n\n  // Render nothing if there are no items\n  if (filteredList.length === 0) return null;\n\n  return (\n    <>\n      {multiSelect && useSelector && showSelectAll && renderSelectAll()}\n\n      {!virtualized ? (\n        <HvListContainer\n          id={id}\n          className={cx(classes.root, className)}\n          role={role}\n          interactive\n          condensed={condensed}\n          disableGutters={useSelector}\n          aria-multiselectable={ariaMultiSelectable}\n          {...others}\n        >\n          {filteredList.map((item, i) => renderListItem(item, i))}\n        </HvListContainer>\n      ) : (\n        <FixedSizeList\n          ref={listRef}\n          className={classes.virtualizedRoot}\n          height={(height || 0) + 5}\n          width=\"100%\"\n          itemCount={filteredList.length}\n          itemSize={condensed ? 32 : 40}\n          innerElementType={ListContainer}\n          {...others}\n        >\n          {renderVirtualizedListItem}\n        </FixedSizeList>\n      )}\n    </>\n  );\n};\n"],"names":["anySelected"],"mappings":"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"}

package/dist/esm/List/List.styles.js

@@ -0,0 +1,52 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvList", {
+  root: {},
+  virtualizedRoot: { marginBottom: 5 },
+  selectorRoot: { width: "100%", zIndex: 0 },
+  selectorContainer: {
+    "&:hover": {
+      backgroundColor: "transparent"
+    },
+    "&:focus-within": {
+      backgroundColor: "transparent",
+      outline: "none",
+      boxShadow: "none"
+    }
+  },
+  box: { width: "32px", height: "32px", marginLeft: "auto" },
+  truncate: {
+    display: "inline-block",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  },
+  item: {},
+  itemSelector: {
+    "&:not(:hover):not(.HvIsFocused):not(:focus-within)": {
+      backgroundColor: theme.colors.primary_20
+    }
+  },
+  link: {
+    ...theme.typography.body,
+    textDecoration: "none",
+    "&:focus": {
+      boxShadow: "unset !important"
+    }
+  },
+  selectAllSelector: {
+    width: "100%",
+    margin: "0 0 2px 0",
+    position: "relative",
+    zIndex: 0,
+    // prevent the focus ring to be hidden by sibling hover background
+    "&:focus-within": {
+      zIndex: 1
+    }
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=List.styles.js.map

package/dist/esm/List/List.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.styles.js","sources":["../../../src/List/List.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvList\", {\n  root: {},\n  virtualizedRoot: { marginBottom: 5 },\n  selectorRoot: { width: \"100%\", zIndex: 0 },\n  selectorContainer: {\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n    },\n\n    \"&:focus-within\": {\n      backgroundColor: \"transparent\",\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  box: { width: \"32px\", height: \"32px\", marginLeft: \"auto\" },\n  truncate: {\n    display: \"inline-block\",\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    whiteSpace: \"nowrap\",\n  },\n  item: {},\n  itemSelector: {\n    \"&:not(:hover):not(.HvIsFocused):not(:focus-within)\": {\n      backgroundColor: theme.colors.primary_20,\n    },\n  },\n  link: {\n    ...theme.typography.body,\n    textDecoration: \"none\",\n\n    \"&:focus\": {\n      boxShadow: \"unset !important\",\n    },\n  },\n  selectAllSelector: {\n    width: \"100%\",\n    margin: \"0 0 2px 0\",\n\n    position: \"relative\",\n    zIndex: 0,\n\n    // prevent the focus ring to be hidden by sibling hover background\n    \"&:focus-within\": {\n      zIndex: 1,\n    },\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,UAAU;AAAA,EACnE,MAAM,CAAC;AAAA,EACP,iBAAiB,EAAE,cAAc,EAAE;AAAA,EACnC,cAAc,EAAE,OAAO,QAAQ,QAAQ,EAAE;AAAA,EACzC,mBAAmB;AAAA,IACjB,WAAW;AAAA,MACT,iBAAiB;AAAA,IACnB;AAAA,IAEA,kBAAkB;AAAA,MAChB,iBAAiB;AAAA,MACjB,SAAS;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,KAAK,EAAE,OAAO,QAAQ,QAAQ,QAAQ,YAAY,OAAO;AAAA,EACzD,UAAU;AAAA,IACR,SAAS;AAAA,IACT,UAAU;AAAA,IACV,cAAc;AAAA,IACd,YAAY;AAAA,EACd;AAAA,EACA,MAAM,CAAC;AAAA,EACP,cAAc;AAAA,IACZ,sDAAsD;AAAA,MACpD,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,GAAG,MAAM,WAAW;AAAA,IACpB,gBAAgB;AAAA,IAEhB,WAAW;AAAA,MACT,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACA,mBAAmB;AAAA,IACjB,OAAO;AAAA,IACP,QAAQ;AAAA,IAER,UAAU;AAAA,IACV,QAAQ;AAAA;AAAA,IAGR,kBAAkB;AAAA,MAChB,QAAQ;AAAA,IACV;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/List/useSelectableList.js

@@ -0,0 +1,10 @@
+import { useState, useMemo } from "react";
+const useSelectableList = (defaultList = []) => {
+  const [list, setList] = useState(defaultList);
+  const selection = useMemo(() => list.filter((elem) => elem.selected), [list]);
+  return [list, setList, selection];
+};
+export {
+  useSelectableList
+};
+//# sourceMappingURL=useSelectableList.js.map

package/dist/esm/List/useSelectableList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSelectableList.js","sources":["../../../src/List/useSelectableList.ts"],"sourcesContent":["import { useState, useMemo } from \"react\";\n\nimport { HvListValue } from \"./types\";\n\nexport const useSelectableList = (defaultList: HvListValue[] = []) => {\n  const [list, setList] = useState(defaultList);\n\n  const selection = useMemo(() => list.filter((elem) => elem.selected), [list]);\n\n  return [list, setList, selection] as const;\n};\n"],"names":[],"mappings":";AAIO,MAAM,oBAAoB,CAAC,cAA6B,OAAO;AACpE,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,WAAW;AAE5C,QAAM,YAAY,QAAQ,MAAM,KAAK,OAAO,CAAC,SAAS,KAAK,QAAQ,GAAG,CAAC,IAAI,CAAC;AAErE,SAAA,CAAC,MAAM,SAAS,SAAS;AAClC;"}

package/dist/esm/List/utils.js

@@ -0,0 +1,37 @@
+const isItemSelected = (item, newItem) => {
+  const selectionKey = item?.id ? "id" : "label";
+  const selectionElement = item && item[selectionKey];
+  return newItem[selectionKey] === selectionElement;
+};
+const parseList = (item, props, selectAll, list = []) => {
+  const { multiSelect, selectable, singleSelectionToggle } = props || {};
+  let anySelected = false;
+  const newList = list.map((elem) => {
+    const newItem = { ...elem };
+    if (!multiSelect) {
+      newItem.selected = false;
+    }
+    const selectItem = item ? isItemSelected(item, newItem) : elem?.selected;
+    if (selectItem && selectable) {
+      let selectionState;
+      if (multiSelect) {
+        selectionState = item ? !elem?.selected : true;
+      } else {
+        selectionState = !anySelected && (item && singleSelectionToggle ? !elem?.selected : true);
+      }
+      newItem.selected = selectionState;
+      anySelected = true;
+    }
+    if (typeof selectAll === "boolean" && !elem?.disabled)
+      newItem.selected = selectAll;
+    if (!newItem?.selected)
+      newItem.selected = false;
+    return newItem;
+  });
+  return newList;
+};
+export {
+  isItemSelected,
+  parseList
+};
+//# sourceMappingURL=utils.js.map

package/dist/esm/List/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/List/utils.ts"],"sourcesContent":["import { HvListValue } from \"./types\";\n\nconst isItemSelected = (item: HvListValue, newItem: HvListValue) => {\n  const selectionKey = item?.id ? \"id\" : \"label\";\n  const selectionElement = item && item[selectionKey];\n  return newItem[selectionKey] === selectionElement;\n};\n\nconst checkIcons = (list: any[]) => list?.some((elem) => elem?.icon);\n\nconst parseState = (list = []) => {\n  const hasLeftIcons = checkIcons(list);\n  const selection = list.filter((elem: any) => elem?.selected);\n  const anySelected = !!selection.length;\n  const allSelected = selection.length === list.length;\n  const anySelectableSelected = list.some(\n    (elem: any) => elem?.selected || elem?.disabled\n  );\n  const allSelectableSelected = list.every(\n    (elem: any) => elem?.selected || elem?.disabled\n  );\n\n  return {\n    list,\n    hasLeftIcons,\n    anySelected,\n    allSelected,\n    anySelectableSelected,\n    allSelectableSelected,\n    selection,\n  };\n};\n\nconst parseList = (\n  item: HvListValue | undefined,\n  props: {\n    multiSelect?: boolean;\n    selectable?: boolean;\n    singleSelectionToggle?: boolean;\n  },\n  selectAll: boolean | undefined,\n  list: HvListValue[] = []\n): HvListValue[] => {\n  const { multiSelect, selectable, singleSelectionToggle } = props || {};\n\n  let anySelected = false;\n  const newList = list.map((elem: any) => {\n    const newItem = { ...elem };\n\n    // reset elem item\n    if (!multiSelect) {\n      newItem.selected = false;\n    }\n\n    const selectItem = item ? isItemSelected(item, newItem) : elem?.selected;\n\n    if (selectItem && selectable) {\n      let selectionState;\n\n      if (multiSelect) {\n        selectionState = item ? !elem?.selected : true;\n      } else {\n        selectionState =\n          !anySelected &&\n          (item && singleSelectionToggle ? !elem?.selected : true);\n      }\n\n      newItem.selected = selectionState;\n      anySelected = true;\n    }\n\n    if (typeof selectAll === \"boolean\" && !elem?.disabled)\n      newItem.selected = selectAll;\n\n    // normalize item selected prop if not provided\n    if (!newItem?.selected) newItem.selected = false;\n\n    return newItem;\n  });\n\n  return newList;\n};\n\nexport { isItemSelected, parseList, parseState };\n"],"names":[],"mappings":"AAEM,MAAA,iBAAiB,CAAC,MAAmB,YAAyB;AAC5D,QAAA,eAAe,MAAM,KAAK,OAAO;AACjC,QAAA,mBAAmB,QAAQ,KAAK,YAAY;AAC3C,SAAA,QAAQ,YAAY,MAAM;AACnC;AA2BA,MAAM,YAAY,CAChB,MACA,OAKA,WACA,OAAsB,CAAA,MACJ;AAClB,QAAM,EAAE,aAAa,YAAY,sBAAsB,IAAI,SAAS,CAAA;AAEpE,MAAI,cAAc;AAClB,QAAM,UAAU,KAAK,IAAI,CAAC,SAAc;AAChC,UAAA,UAAU,EAAE,GAAG;AAGrB,QAAI,CAAC,aAAa;AAChB,cAAQ,WAAW;AAAA,IACrB;AAEA,UAAM,aAAa,OAAO,eAAe,MAAM,OAAO,IAAI,MAAM;AAEhE,QAAI,cAAc,YAAY;AACxB,UAAA;AAEJ,UAAI,aAAa;AACE,yBAAA,OAAO,CAAC,MAAM,WAAW;AAAA,MAAA,OACrC;AACL,yBACE,CAAC,gBACA,QAAQ,wBAAwB,CAAC,MAAM,WAAW;AAAA,MACvD;AAEA,cAAQ,WAAW;AACL,oBAAA;AAAA,IAChB;AAEA,QAAI,OAAO,cAAc,aAAa,CAAC,MAAM;AAC3C,cAAQ,WAAW;AAGrB,QAAI,CAAC,SAAS;AAAU,cAAQ,WAAW;AAEpC,WAAA;AAAA,EAAA,CACR;AAEM,SAAA;AACT;"}