@hitachivantara/uikit-react-core 5.28.1 → 5.30.0

package/dist/esm/components/Pagination/Select.js

@@ -2,21 +2,23 @@ import { jsx } from "@emotion/react/jsx-runtime";
 import { useState } from "react";
 import { useClasses } from "./Select.styles.js";
 import { HvListItem } from "../ListContainer/ListItem/ListItem.js";
+import { useDefaultProps } from "../../hooks/useDefaultProps.js";
 import { HvBaseDropdown } from "../BaseDropdown/BaseDropdown.js";
 import { HvPanel } from "../Panel/Panel.js";
 import { HvSelectionList } from "../SelectionList/SelectionList.js";
 const Option = ({
   ...props
 }) => /* @__PURE__ */ jsx(HvListItem, { ...props });
-const HvSelect = ({
-  className,
-  classes: classesProp,
-  onChange,
-  disabled,
-  value,
-  children,
-  ...others
-}) => {
+const HvSelect = (props) => {
+  const {
+    className,
+    classes: classesProp,
+    onChange,
+    disabled,
+    value,
+    children,
+    ...others
+  } = useDefaultProps("HvPaginationSelect", props);
   const {
     classes
   } = useClasses(classesProp);

package/dist/esm/components/Pagination/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../src/components/Pagination/Select.tsx"],"sourcesContent":["import { useState } from \"react\";\n\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport {\n  HvSelectionList,\n  HvSelectionListProps,\n} from \"@core/components/SelectionList\";\nimport { HvPanel } from \"@core/components/Panel\";\nimport { HvListItem, HvListItemProps } from \"@core/components/ListContainer\";\n\nimport { useClasses } from \"./Select.styles\";\n\nexport const Option = ({ ...props }: Partial<HvListItemProps>) => (\n  <HvListItem {...props} />\n);\n\nconst HvSelect = ({\n  className,\n  classes: classesProp,\n  onChange,\n  disabled,\n  value,\n  children,\n  ...others\n}: any) => {\n  const { classes } = useClasses(classesProp);\n  const [open, setOpen] = useState(false);\n\n  const handleSelect: HvSelectionListProps[\"onChange\"] = (evt, val) => {\n    onChange?.(evt, val);\n    setOpen(false);\n  };\n\n  const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (_evt, s) => {\n    setOpen(s);\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    const listItems =\n      containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n    listItems.every((listItem) => {\n      if (listItem.tabIndex >= 0) {\n        listItem.focus();\n        return false;\n      }\n      return true;\n    });\n  };\n\n  return (\n    <HvBaseDropdown\n      className={className}\n      classes={{\n        selection: classes.selection,\n        header: classes.header,\n        headerOpen: classes.headerOpen,\n      }}\n      expanded={open}\n      onToggle={handleToggle}\n      onContainerCreation={setFocusToContent}\n      placeholder={value}\n      disabled={disabled}\n      variableWidth\n      {...others}\n    >\n      <HvPanel>\n        <HvSelectionList value={value} onChange={handleSelect}>\n          {children}\n        </HvSelectionList>\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n\nexport default HvSelect;\n"],"names":["Option","props","HvSelect","className","classes","classesProp","onChange","disabled","value","children","others","useClasses","open","setOpen","useState","handleSelect","evt","val","handleToggle","_evt","s","setFocusToContent","containerRef","listItems","getElementsByTagName","every","listItem","tabIndex","focus","selection","header","headerOpen"],"mappings":";;;;;;;AAeO,MAAMA,SAASA,CAAC;AAAA,EAAE,GAAGC;AAAgC,MAC1D,oBAAC,YAAW,EAAA,GAAIA,MACjB,CAAA;AAED,MAAMC,WAAWA,CAAC;AAAA,EAChBC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AACA,MAAM;AACH,QAAA;AAAA,IAAEN;AAAAA,EAAAA,IAAYO,WAAWN,WAAW;AAC1C,QAAM,CAACO,MAAMC,OAAO,IAAIC,SAAS,KAAK;AAEhCC,QAAAA,eAAiDA,CAACC,KAAKC,QAAQ;AACnEX,yCAAWU,KAAKC;AAChBJ,YAAQ,KAAK;AAAA,EAAA;AAGTK,QAAAA,eAAgDA,CAACC,MAAMC,MAAM;AACjEP,YAAQO,CAAC;AAAA,EAAA;AAGX,QAAMC,oBACJC,CACG,iBAAA;AACGC,UAAAA,YACJD,gBAAgB,OAAO,CAAC,GAAGA,aAAaE,qBAAqB,IAAI,CAAC,IAAI;AACxED,cAAUE,MAAOC,CAAa,aAAA;AACxBA,UAAAA,SAASC,YAAY,GAAG;AAC1BD,iBAASE,MAAM;AACR,eAAA;AAAA,MACT;AACO,aAAA;AAAA,IAAA,CACR;AAAA,EAAA;AAID,SAAA,oBAAC,gBACC,EAAA,WACA,SAAS;AAAA,IACPC,WAAWzB,QAAQyB;AAAAA,IACnBC,QAAQ1B,QAAQ0B;AAAAA,IAChBC,YAAY3B,QAAQ2B;AAAAA,EACtB,GACA,UAAUnB,MACV,UAAUM,cACV,qBAAqBG,mBACrB,aAAab,OACb,UACA,eAAa,MACb,GAAIE,QAEJ,UAAC,oBAAA,SAAA,EACC,UAAC,oBAAA,iBAAA,EAAgB,OAAc,UAAUK,cACtCN,SACH,CAAA,EACF,CAAA,EACF,CAAA;AAEJ;AAEA,MAAA,aAAeP;"}
+{"version":3,"file":"Select.js","sources":["../../../../src/components/Pagination/Select.tsx"],"sourcesContent":["import { SyntheticEvent, useState } from \"react\";\n\nimport {\n  HvBaseDropdown,\n  HvBaseDropdownProps,\n} from \"@core/components/BaseDropdown\";\nimport {\n  HvSelectionList,\n  HvSelectionListProps,\n} from \"@core/components/SelectionList\";\nimport { HvPanel } from \"@core/components/Panel\";\nimport { HvListItem, HvListItemProps } from \"@core/components/ListContainer\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport { useClasses } from \"./Select.styles\";\n\nexport const Option = ({ ...props }: Partial<HvListItemProps>) => (\n  <HvListItem {...props} />\n);\n\nexport interface HvPaginationSelectProps\n  extends Omit<HvBaseDropdownProps, \"onChange\"> {\n  onChange: (event: React.SyntheticEvent, val: number) => void;\n  value: number;\n}\n\nconst HvSelect = (props: HvPaginationSelectProps) => {\n  const {\n    className,\n    classes: classesProp,\n    onChange,\n    disabled,\n    value,\n    children,\n    ...others\n  } = useDefaultProps(\"HvPaginationSelect\", props);\n  const { classes } = useClasses(classesProp);\n  const [open, setOpen] = useState(false);\n\n  const handleSelect: HvSelectionListProps[\"onChange\"] = (evt, val) => {\n    onChange?.(evt, val);\n    setOpen(false);\n  };\n\n  const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (_evt, s) => {\n    setOpen(s);\n  };\n\n  const setFocusToContent: HvBaseDropdownProps[\"onContainerCreation\"] = (\n    containerRef\n  ) => {\n    const listItems =\n      containerRef != null ? [...containerRef.getElementsByTagName(\"li\")] : [];\n    listItems.every((listItem) => {\n      if (listItem.tabIndex >= 0) {\n        listItem.focus();\n        return false;\n      }\n      return true;\n    });\n  };\n\n  return (\n    <HvBaseDropdown\n      className={className}\n      classes={{\n        selection: classes.selection,\n        header: classes.header,\n        headerOpen: classes.headerOpen,\n      }}\n      expanded={open}\n      onToggle={handleToggle}\n      onContainerCreation={setFocusToContent}\n      placeholder={value}\n      disabled={disabled}\n      variableWidth\n      {...others}\n    >\n      <HvPanel>\n        <HvSelectionList value={value} onChange={handleSelect}>\n          {children}\n        </HvSelectionList>\n      </HvPanel>\n    </HvBaseDropdown>\n  );\n};\n\nexport default HvSelect;\n"],"names":["Option","props","HvSelect","className","classes","classesProp","onChange","disabled","value","children","others","useDefaultProps","useClasses","open","setOpen","useState","handleSelect","evt","val","handleToggle","_evt","s","setFocusToContent","containerRef","listItems","getElementsByTagName","every","listItem","tabIndex","focus","selection","header","headerOpen"],"mappings":";;;;;;;;AAgBO,MAAMA,SAASA,CAAC;AAAA,EAAE,GAAGC;AAAgC,MAC1D,oBAAC,YAAW,EAAA,GAAIA,MACjB,CAAA;AAQD,MAAMC,WAAWA,CAACD,UAAmC;AAC7C,QAAA;AAAA,IACJE;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,sBAAsBV,KAAK;AACzC,QAAA;AAAA,IAAEG;AAAAA,EAAAA,IAAYQ,WAAWP,WAAW;AAC1C,QAAM,CAACQ,MAAMC,OAAO,IAAIC,SAAS,KAAK;AAEhCC,QAAAA,eAAiDA,CAACC,KAAKC,QAAQ;AACnEZ,yCAAWW,KAAKC;AAChBJ,YAAQ,KAAK;AAAA,EAAA;AAGTK,QAAAA,eAAgDA,CAACC,MAAMC,MAAM;AACjEP,YAAQO,CAAC;AAAA,EAAA;AAGX,QAAMC,oBACJC,CACG,iBAAA;AACGC,UAAAA,YACJD,gBAAgB,OAAO,CAAC,GAAGA,aAAaE,qBAAqB,IAAI,CAAC,IAAI;AACxED,cAAUE,MAAOC,CAAa,aAAA;AACxBA,UAAAA,SAASC,YAAY,GAAG;AAC1BD,iBAASE,MAAM;AACR,eAAA;AAAA,MACT;AACO,aAAA;AAAA,IAAA,CACR;AAAA,EAAA;AAID,SAAA,oBAAC,gBACC,EAAA,WACA,SAAS;AAAA,IACPC,WAAW1B,QAAQ0B;AAAAA,IACnBC,QAAQ3B,QAAQ2B;AAAAA,IAChBC,YAAY5B,QAAQ4B;AAAAA,EACtB,GACA,UAAUnB,MACV,UAAUM,cACV,qBAAqBG,mBACrB,aAAad,OACb,UACA,eAAa,MACb,GAAIE,QAEJ,UAAC,oBAAA,SAAA,EACC,UAAC,oBAAA,iBAAA,EAAgB,OAAc,UAAUM,cACtCP,SACH,CAAA,EACF,CAAA,EACF,CAAA;AAEJ;AAEA,MAAA,aAAeP;"}

package/dist/esm/components/Pagination/Select.styles.js

@@ -5,9 +5,9 @@ const {
 } = createClasses("HvPaginationSelect", {
   header: {
     backgroundColor: "transparent",
-    borderColor: theme.pagination.pageSizeBorderColor,
+    borderColor: theme.colors.secondary_80,
     "&:hover": {
-      borderColor: theme.pagination.pageSizeHoverBorderColor
+      borderColor: theme.colors.secondary_80
     }
   },
   selection: {

package/dist/esm/components/Pagination/Select.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.styles.js","sources":["../../../../src/components/Pagination/Select.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses } = createClasses(\"HvPaginationSelect\", {\n  header: {\n    backgroundColor: \"transparent\",\n    borderColor: theme.pagination.pageSizeBorderColor,\n    \"&:hover\": {\n      borderColor: theme.pagination.pageSizeHoverBorderColor,\n    },\n  },\n  selection: {\n    padding: theme.spacing(0, \"md\", 0, \"xs\"),\n  },\n  headerOpen: {\n    backgroundColor: theme.colors.atmo1,\n  },\n});\n"],"names":["useClasses","createClasses","header","backgroundColor","borderColor","theme","pagination","pageSizeBorderColor","pageSizeHoverBorderColor","selection","padding","spacing","headerOpen","colors","atmo1"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAW,IAAIC,cAAc,sBAAsB;AAAA,EAChEC,QAAQ;AAAA,IACNC,iBAAiB;AAAA,IACjBC,aAAaC,MAAMC,WAAWC;AAAAA,IAC9B,WAAW;AAAA,MACTH,aAAaC,MAAMC,WAAWE;AAAAA,IAChC;AAAA,EACF;AAAA,EACAC,WAAW;AAAA,IACTC,SAASL,MAAMM,QAAQ,GAAG,MAAM,GAAG,IAAI;AAAA,EACzC;AAAA,EACAC,YAAY;AAAA,IACVT,iBAAiBE,MAAMQ,OAAOC;AAAAA,EAChC;AACF,CAAC;"}
+{"version":3,"file":"Select.styles.js","sources":["../../../../src/components/Pagination/Select.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses } = createClasses(\"HvPaginationSelect\", {\n  header: {\n    backgroundColor: \"transparent\",\n    borderColor: theme.colors.secondary_80,\n    \"&:hover\": {\n      borderColor: theme.colors.secondary_80,\n    },\n  },\n  selection: {\n    padding: theme.spacing(0, \"md\", 0, \"xs\"),\n  },\n  headerOpen: {\n    backgroundColor: theme.colors.atmo1,\n  },\n});\n"],"names":["useClasses","createClasses","header","backgroundColor","borderColor","theme","colors","secondary_80","selection","padding","spacing","headerOpen","atmo1"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAW,IAAIC,cAAc,sBAAsB;AAAA,EAChEC,QAAQ;AAAA,IACNC,iBAAiB;AAAA,IACjBC,aAAaC,MAAMC,OAAOC;AAAAA,IAC1B,WAAW;AAAA,MACTH,aAAaC,MAAMC,OAAOC;AAAAA,IAC5B;AAAA,EACF;AAAA,EACAC,WAAW;AAAA,IACTC,SAASJ,MAAMK,QAAQ,GAAG,MAAM,GAAG,IAAI;AAAA,EACzC;AAAA,EACAC,YAAY;AAAA,IACVR,iBAAiBE,MAAMC,OAAOM;AAAAA,EAChC;AACF,CAAC;"}

package/dist/esm/components/QueryBuilder/QueryBuilder.js

@@ -6,6 +6,8 @@ import { useState, useRef, useReducer, useContext, useMemo, useEffect } from "re
 import { QueryBuilderContext } from "./Context.js";
 import { emptyGroup, clearNodeIds } from "./utils/index.js";
 import reducer from "./utils/reducer.js";
+import { useClasses } from "./QueryBuilder.styles.js";
+import { staticClasses } from "./QueryBuilder.styles.js";
 import { RuleGroup } from "./RuleGroup/RuleGroup.js";
 import { ConfirmationDialog } from "./ConfirmationDialog/ConfirmationDialog.js";
 const HvQueryBuilder = (props) => {
@@ -18,8 +20,11 @@ const HvQueryBuilder = (props) => {
     maxDepth = 1,
     labels,
     readOnly = false,
-    classes
+    classes: classesProp
   } = useDefaultProps("HvQueryBuilder", props);
+  const {
+    classes
+  } = useClasses(classesProp);
   const [pendingAction, askAction] = useState();
   const currentAttributes = useRef(null);
   const [state, dispatchAction] = useReducer(reducer, query, (initialState2) => initialState2 || emptyGroup());
@@ -69,6 +74,7 @@ const HvQueryBuilder = (props) => {
   ] });
 };
 export {
-  HvQueryBuilder
+  HvQueryBuilder,
+  staticClasses as queryBuilderClasses
 };
 //# sourceMappingURL=QueryBuilder.js.map

package/dist/esm/components/QueryBuilder/QueryBuilder.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilder.js","sources":["../../../../src/components/QueryBuilder/QueryBuilder.tsx"],"sourcesContent":["import cloneDeep from \"lodash/cloneDeep\";\nimport isEqual from \"lodash/isEqual\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n  useContext,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { ConfirmationDialog } from \"./ConfirmationDialog\";\nimport { QueryBuilderContext } from \"./Context\";\nimport { RuleGroup } from \"./RuleGroup\";\nimport {\n  AskAction,\n  Attribute,\n  Query,\n  QueryBuilderLabels,\n  QueryCombinator,\n  QueryOperator,\n} from \"./types\";\nimport { clearNodeIds, emptyGroup } from \"./utils\";\nimport reducer from \"./utils/reducer\";\nimport { useClasses, staticClasses } from \"./QueryBuilder.styles\";\n\nexport { staticClasses as queryBuilderClasses };\n\nexport type HvQueryBuilderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvQueryBuilderProps {\n  attributes?: Record<string, Attribute>;\n  /**\n   * The query rules operators by attribute type and combinator.\n   */\n  operators?: Record<string, QueryOperator[]>;\n  /**\n   * The query combinators operands.\n   */\n  combinators?: QueryCombinator[];\n  /**\n   * The initial query representation.\n   */\n  query?: Query;\n  /**\n   * Callback fired when query changes.\n   * @param {Query} value - the query representation.\n   */\n  onChange?: (value: Query) => void;\n  /**\n   * Max depth of nested query groups.\n   */\n  maxDepth?: number;\n  /**\n   * An object containing all the labels.\n   */\n  labels?: QueryBuilderLabels;\n  /**\n   * A flag indicating if the Query Builder is in read only mode.\n   */\n  readOnly?: boolean;\n  /**\n   * Override or extend the styles applied to the component.\n   * See CSS API tab for more details.\n   */\n  classes?: HvQueryBuilderClasses;\n}\n\n/**\n * **HvQueryBuilder** component allows you to create conditions and group them using logical operators.\n * It outputs a structured set of rules which can be easily parsed to create SQL/NoSQL/whatever queries.\n */\nexport const HvQueryBuilder = (props: HvQueryBuilderProps) => {\n  const {\n    attributes,\n    query,\n    onChange,\n    operators,\n    combinators,\n    maxDepth = 1,\n    labels,\n    readOnly = false,\n    classes,\n  } = useDefaultProps(\"HvQueryBuilder\", props);\n\n  const [pendingAction, askAction] = useState<AskAction>();\n  const currentAttributes = useRef<\n    Record<string, Attribute> | undefined | null\n  >(null);\n  const [state, dispatchAction] = useReducer(\n    reducer,\n    query,\n    (initialState) => initialState || emptyGroup()\n  );\n\n  const initialState = query === state;\n  const [prevState, setPrevState] = useState();\n\n  const defaultContext = useContext(QueryBuilderContext);\n\n  const context = useMemo(\n    () => ({\n      dispatchAction,\n      askAction,\n      attributes,\n      /* eslint-disable react/destructuring-assignment */\n      operators: operators ?? defaultContext.operators,\n      combinators: combinators ?? defaultContext.combinators,\n      maxDepth: maxDepth ?? defaultContext.maxDepth,\n      labels: labels ?? defaultContext.labels,\n      initialTouched: initialState,\n      readOnly,\n    }),\n    [\n      attributes,\n      operators,\n      defaultContext.operators,\n      defaultContext.combinators,\n      defaultContext.maxDepth,\n      defaultContext.labels,\n      combinators,\n      maxDepth,\n      labels,\n      readOnly,\n      initialState,\n    ]\n  );\n\n  useEffect(() => {\n    if (currentAttributes.current == null) {\n      // first run, nothing to do\n      currentAttributes.current = attributes;\n    } else if (currentAttributes.current !== attributes) {\n      // attributes changed, the existing query is almost certain invalid, so reset it\n      currentAttributes.current = attributes;\n      dispatchAction({ type: \"reset-query\" });\n    }\n  }, [attributes]);\n\n  // Propagate the change if the query is modified.\n  useEffect(() => {\n    if (!initialState && !isEqual(state, prevState)) {\n      onChange?.(clearNodeIds(state));\n      setPrevState(cloneDeep(state));\n    }\n  }, [state, prevState, initialState, onChange]);\n\n  const onConfirmHandler = () => {\n    if (pendingAction) {\n      askAction(undefined);\n      pendingAction.actions.forEach((action) => dispatchAction(action));\n    }\n  };\n\n  const onCancelHandler = () => {\n    askAction(undefined);\n  };\n\n  return (\n    <QueryBuilderContext.Provider value={context}>\n      <RuleGroup\n        level={0}\n        id={state.id}\n        combinator={state.combinator}\n        rules={state.rules}\n        classes={classes}\n      />\n      <ConfirmationDialog\n        isOpen={pendingAction != null}\n        onConfirm={onConfirmHandler}\n        onCancel={onCancelHandler}\n        title={pendingAction?.dialog.dialogTitle || \"\"}\n        message={pendingAction?.dialog.dialogMessage || \"\"}\n        confirmButtonLabel={pendingAction?.dialog.dialogConfirm || \"\"}\n        cancelButtonLabel={pendingAction?.dialog.dialogCancel || \"\"}\n        closeButtonTooltip={pendingAction?.dialog.dialogCloseTooltip || \"\"}\n      />\n    </QueryBuilderContext.Provider>\n  );\n};\n"],"names":["HvQueryBuilder","props","attributes","query","onChange","operators","combinators","maxDepth","labels","readOnly","classes","useDefaultProps","pendingAction","askAction","useState","currentAttributes","useRef","state","dispatchAction","useReducer","reducer","initialState","emptyGroup","prevState","setPrevState","defaultContext","useContext","QueryBuilderContext","context","useMemo","initialTouched","useEffect","current","type","isEqual","clearNodeIds","cloneDeep","onConfirmHandler","undefined","actions","forEach","action","onCancelHandler","id","combinator","rules","dialog","dialogTitle","dialogMessage","dialogConfirm","dialogCancel","dialogCloseTooltip"],"mappings":";;;;;;;;;;AA4EaA,MAAAA,iBAAiBA,CAACC,UAA+B;AACtD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,WAAW;AAAA,IACXC;AAAAA,IACAC,WAAW;AAAA,IACXC;AAAAA,EAAAA,IACEC,gBAAgB,kBAAkBV,KAAK;AAE3C,QAAM,CAACW,eAAeC,SAAS,IAAIC,SAAoB;AACjDC,QAAAA,oBAAoBC,OAExB,IAAI;AACA,QAAA,CAACC,OAAOC,cAAc,IAAIC,WAC9BC,SACAjB,OACCkB,CAAAA,kBAAiBA,iBAAgBC,WACpC,CAAA;AAEA,QAAMD,eAAelB,UAAUc;AAC/B,QAAM,CAACM,WAAWC,YAAY,IAAIV,SAAS;AAErCW,QAAAA,iBAAiBC,WAAWC,mBAAmB;AAE/CC,QAAAA,UAAUC,QACd,OAAO;AAAA,IACLX;AAAAA,IACAL;AAAAA,IACAX;AAAAA;AAAAA,IAEAG,WAAWA,aAAaoB,eAAepB;AAAAA,IACvCC,aAAaA,eAAemB,eAAenB;AAAAA,IAC3CC,UAAUA,YAAYkB,eAAelB;AAAAA,IACrCC,QAAQA,UAAUiB,eAAejB;AAAAA,IACjCsB,gBAAgBT;AAAAA,IAChBZ;AAAAA,EAAAA,IAEF,CACEP,YACAG,WACAoB,eAAepB,WACfoB,eAAenB,aACfmB,eAAelB,UACfkB,eAAejB,QACfF,aACAC,UACAC,QACAC,UACAY,YAAY,CAEhB;AAEAU,YAAU,MAAM;AACVhB,QAAAA,kBAAkBiB,WAAW,MAAM;AAErCjB,wBAAkBiB,UAAU9B;AAAAA,IAAAA,WACnBa,kBAAkBiB,YAAY9B,YAAY;AAEnDa,wBAAkBiB,UAAU9B;AACb,qBAAA;AAAA,QAAE+B,MAAM;AAAA,MAAA,CAAe;AAAA,IACxC;AAAA,EAAA,GACC,CAAC/B,UAAU,CAAC;AAGf6B,YAAU,MAAM;AACd,QAAI,CAACV,gBAAgB,CAACa,QAAQjB,OAAOM,SAAS,GAAG;AACpCY,2CAAAA,aAAalB,KAAK;AAChBmB,mBAAAA,UAAUnB,KAAK,CAAC;AAAA,IAC/B;AAAA,KACC,CAACA,OAAOM,WAAWF,cAAcjB,QAAQ,CAAC;AAE7C,QAAMiC,mBAAmBA,MAAM;AAC7B,QAAIzB,eAAe;AACjBC,gBAAUyB,MAAS;AACnB1B,oBAAc2B,QAAQC,QAASC,CAAWvB,WAAAA,eAAeuB,MAAM,CAAC;AAAA,IAClE;AAAA,EAAA;AAGF,QAAMC,kBAAkBA,MAAM;AAC5B7B,cAAUyB,MAAS;AAAA,EAAA;AAGrB,SACG,qBAAA,oBAAoB,UAApB,EAA6B,OAAOV,SACnC,UAAA;AAAA,IAAA,oBAAC,WACC,EAAA,OAAO,GACP,IAAIX,MAAM0B,IACV,YAAY1B,MAAM2B,YAClB,OAAO3B,MAAM4B,OACb,SAAiB;AAAA,IAElB,oBAAA,oBAAA,EACC,QAAQjC,iBAAiB,MACzB,WAAWyB,kBACX,UAAUK,iBACV,QAAO9B,+CAAekC,OAAOC,gBAAe,IAC5C,UAASnC,+CAAekC,OAAOE,kBAAiB,IAChD,qBAAoBpC,+CAAekC,OAAOG,kBAAiB,IAC3D,oBAAmBrC,+CAAekC,OAAOI,iBAAgB,IACzD,qBAAoBtC,+CAAekC,OAAOK,uBAAsB,IAAG;AAAA,EAEvE,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"QueryBuilder.js","sources":["../../../../src/components/QueryBuilder/QueryBuilder.tsx"],"sourcesContent":["import cloneDeep from \"lodash/cloneDeep\";\nimport isEqual from \"lodash/isEqual\";\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\n\nimport {\n  useContext,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { ConfirmationDialog } from \"./ConfirmationDialog\";\nimport { QueryBuilderContext } from \"./Context\";\nimport { RuleGroup } from \"./RuleGroup\";\nimport {\n  AskAction,\n  Attribute,\n  Query,\n  QueryBuilderLabels,\n  QueryCombinator,\n  QueryOperator,\n} from \"./types\";\nimport { clearNodeIds, emptyGroup } from \"./utils\";\nimport reducer from \"./utils/reducer\";\nimport { useClasses, staticClasses } from \"./QueryBuilder.styles\";\n\nexport { staticClasses as queryBuilderClasses };\n\nexport type HvQueryBuilderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvQueryBuilderProps {\n  attributes?: Record<string, Attribute>;\n  /**\n   * The query rules operators by attribute type and combinator.\n   */\n  operators?: Record<string, QueryOperator[]>;\n  /**\n   * The query combinators operands.\n   */\n  combinators?: QueryCombinator[];\n  /**\n   * The initial query representation.\n   */\n  query?: Query;\n  /**\n   * Callback fired when query changes.\n   * @param {Query} value - the query representation.\n   */\n  onChange?: (value: Query) => void;\n  /**\n   * Max depth of nested query groups.\n   */\n  maxDepth?: number;\n  /**\n   * An object containing all the labels.\n   */\n  labels?: QueryBuilderLabels;\n  /**\n   * A flag indicating if the Query Builder is in read only mode.\n   */\n  readOnly?: boolean;\n  /**\n   * Override or extend the styles applied to the component.\n   * See CSS API tab for more details.\n   */\n  classes?: HvQueryBuilderClasses;\n}\n\n/**\n * **HvQueryBuilder** component allows you to create conditions and group them using logical operators.\n * It outputs a structured set of rules which can be easily parsed to create SQL/NoSQL/whatever queries.\n */\nexport const HvQueryBuilder = (props: HvQueryBuilderProps) => {\n  const {\n    attributes,\n    query,\n    onChange,\n    operators,\n    combinators,\n    maxDepth = 1,\n    labels,\n    readOnly = false,\n    classes: classesProp,\n  } = useDefaultProps(\"HvQueryBuilder\", props);\n  const { classes } = useClasses(classesProp);\n\n  const [pendingAction, askAction] = useState<AskAction>();\n  const currentAttributes = useRef<\n    Record<string, Attribute> | undefined | null\n  >(null);\n  const [state, dispatchAction] = useReducer(\n    reducer,\n    query,\n    (initialState) => initialState || emptyGroup()\n  );\n\n  const initialState = query === state;\n  const [prevState, setPrevState] = useState();\n\n  const defaultContext = useContext(QueryBuilderContext);\n\n  const context = useMemo(\n    () => ({\n      dispatchAction,\n      askAction,\n      attributes,\n      /* eslint-disable react/destructuring-assignment */\n      operators: operators ?? defaultContext.operators,\n      combinators: combinators ?? defaultContext.combinators,\n      maxDepth: maxDepth ?? defaultContext.maxDepth,\n      labels: labels ?? defaultContext.labels,\n      initialTouched: initialState,\n      readOnly,\n    }),\n    [\n      attributes,\n      operators,\n      defaultContext.operators,\n      defaultContext.combinators,\n      defaultContext.maxDepth,\n      defaultContext.labels,\n      combinators,\n      maxDepth,\n      labels,\n      readOnly,\n      initialState,\n    ]\n  );\n\n  useEffect(() => {\n    if (currentAttributes.current == null) {\n      // first run, nothing to do\n      currentAttributes.current = attributes;\n    } else if (currentAttributes.current !== attributes) {\n      // attributes changed, the existing query is almost certain invalid, so reset it\n      currentAttributes.current = attributes;\n      dispatchAction({ type: \"reset-query\" });\n    }\n  }, [attributes]);\n\n  // Propagate the change if the query is modified.\n  useEffect(() => {\n    if (!initialState && !isEqual(state, prevState)) {\n      onChange?.(clearNodeIds(state));\n      setPrevState(cloneDeep(state));\n    }\n  }, [state, prevState, initialState, onChange]);\n\n  const onConfirmHandler = () => {\n    if (pendingAction) {\n      askAction(undefined);\n      pendingAction.actions.forEach((action) => dispatchAction(action));\n    }\n  };\n\n  const onCancelHandler = () => {\n    askAction(undefined);\n  };\n\n  return (\n    <QueryBuilderContext.Provider value={context}>\n      <RuleGroup\n        level={0}\n        id={state.id}\n        combinator={state.combinator}\n        rules={state.rules}\n        classes={classes}\n      />\n      <ConfirmationDialog\n        isOpen={pendingAction != null}\n        onConfirm={onConfirmHandler}\n        onCancel={onCancelHandler}\n        title={pendingAction?.dialog.dialogTitle || \"\"}\n        message={pendingAction?.dialog.dialogMessage || \"\"}\n        confirmButtonLabel={pendingAction?.dialog.dialogConfirm || \"\"}\n        cancelButtonLabel={pendingAction?.dialog.dialogCancel || \"\"}\n        closeButtonTooltip={pendingAction?.dialog.dialogCloseTooltip || \"\"}\n      />\n    </QueryBuilderContext.Provider>\n  );\n};\n"],"names":["HvQueryBuilder","props","attributes","query","onChange","operators","combinators","maxDepth","labels","readOnly","classes","classesProp","useDefaultProps","useClasses","pendingAction","askAction","useState","currentAttributes","useRef","state","dispatchAction","useReducer","reducer","initialState","emptyGroup","prevState","setPrevState","defaultContext","useContext","QueryBuilderContext","context","useMemo","initialTouched","useEffect","current","type","isEqual","clearNodeIds","cloneDeep","onConfirmHandler","undefined","actions","forEach","action","onCancelHandler","id","combinator","rules","dialog","dialogTitle","dialogMessage","dialogConfirm","dialogCancel","dialogCloseTooltip"],"mappings":";;;;;;;;;;;;AA4EaA,MAAAA,iBAAiBA,CAACC,UAA+B;AACtD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,WAAW;AAAA,IACXC;AAAAA,IACAC,WAAW;AAAA,IACXC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,kBAAkBX,KAAK;AACrC,QAAA;AAAA,IAAES;AAAAA,EAAAA,IAAYG,WAAWF,WAAW;AAE1C,QAAM,CAACG,eAAeC,SAAS,IAAIC,SAAoB;AACjDC,QAAAA,oBAAoBC,OAExB,IAAI;AACA,QAAA,CAACC,OAAOC,cAAc,IAAIC,WAC9BC,SACAnB,OACCoB,CAAAA,kBAAiBA,iBAAgBC,WACpC,CAAA;AAEA,QAAMD,eAAepB,UAAUgB;AAC/B,QAAM,CAACM,WAAWC,YAAY,IAAIV,SAAS;AAErCW,QAAAA,iBAAiBC,WAAWC,mBAAmB;AAE/CC,QAAAA,UAAUC,QACd,OAAO;AAAA,IACLX;AAAAA,IACAL;AAAAA,IACAb;AAAAA;AAAAA,IAEAG,WAAWA,aAAasB,eAAetB;AAAAA,IACvCC,aAAaA,eAAeqB,eAAerB;AAAAA,IAC3CC,UAAUA,YAAYoB,eAAepB;AAAAA,IACrCC,QAAQA,UAAUmB,eAAenB;AAAAA,IACjCwB,gBAAgBT;AAAAA,IAChBd;AAAAA,EAAAA,IAEF,CACEP,YACAG,WACAsB,eAAetB,WACfsB,eAAerB,aACfqB,eAAepB,UACfoB,eAAenB,QACfF,aACAC,UACAC,QACAC,UACAc,YAAY,CAEhB;AAEAU,YAAU,MAAM;AACVhB,QAAAA,kBAAkBiB,WAAW,MAAM;AAErCjB,wBAAkBiB,UAAUhC;AAAAA,IAAAA,WACnBe,kBAAkBiB,YAAYhC,YAAY;AAEnDe,wBAAkBiB,UAAUhC;AACb,qBAAA;AAAA,QAAEiC,MAAM;AAAA,MAAA,CAAe;AAAA,IACxC;AAAA,EAAA,GACC,CAACjC,UAAU,CAAC;AAGf+B,YAAU,MAAM;AACd,QAAI,CAACV,gBAAgB,CAACa,QAAQjB,OAAOM,SAAS,GAAG;AACpCY,2CAAAA,aAAalB,KAAK;AAChBmB,mBAAAA,UAAUnB,KAAK,CAAC;AAAA,IAC/B;AAAA,KACC,CAACA,OAAOM,WAAWF,cAAcnB,QAAQ,CAAC;AAE7C,QAAMmC,mBAAmBA,MAAM;AAC7B,QAAIzB,eAAe;AACjBC,gBAAUyB,MAAS;AACnB1B,oBAAc2B,QAAQC,QAASC,CAAWvB,WAAAA,eAAeuB,MAAM,CAAC;AAAA,IAClE;AAAA,EAAA;AAGF,QAAMC,kBAAkBA,MAAM;AAC5B7B,cAAUyB,MAAS;AAAA,EAAA;AAGrB,SACG,qBAAA,oBAAoB,UAApB,EAA6B,OAAOV,SACnC,UAAA;AAAA,IAAA,oBAAC,WACC,EAAA,OAAO,GACP,IAAIX,MAAM0B,IACV,YAAY1B,MAAM2B,YAClB,OAAO3B,MAAM4B,OACb,SAAiB;AAAA,IAElB,oBAAA,oBAAA,EACC,QAAQjC,iBAAiB,MACzB,WAAWyB,kBACX,UAAUK,iBACV,QAAO9B,+CAAekC,OAAOC,gBAAe,IAC5C,UAASnC,+CAAekC,OAAOE,kBAAiB,IAChD,qBAAoBpC,+CAAekC,OAAOG,kBAAiB,IAC3D,oBAAmBrC,+CAAekC,OAAOI,iBAAgB,IACzD,qBAAoBtC,+CAAekC,OAAOK,uBAAsB,IAAG;AAAA,EAEvE,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/QueryBuilder/QueryBuilder.styles.js

@@ -10,7 +10,7 @@ const {
     padding: theme.space.sm,
     marginTop: 12,
     marginBottom: 32,
-    border: theme.queryBuilder.border
+    border: `1px solid ${theme.colors.atmo4}`
   },
   /** Styles applied to the top group container. */
   topGroup: {
@@ -18,7 +18,7 @@ const {
     backgroundColor: "transparent",
     maxWidth: "100%",
     minWidth: 740,
-    paddingBottom: theme.queryBuilder.topGroupPaddingBottom
+    paddingBottom: `calc(${theme.space.md} * 3)`
   },
   /** Styles applied to the sub group containers. */
   subGroup: {
@@ -31,10 +31,10 @@ const {
       zIndex: 2,
       width: 21,
       height: 36,
-      borderBottom: theme.queryBuilder.border,
-      borderLeft: theme.queryBuilder.border,
+      borderBottom: `1px solid ${theme.colors.atmo4}`,
+      borderLeft: `1px solid ${theme.colors.atmo4}`,
       top: -38,
-      left: theme.queryBuilder.ruleSubGroupLeftConnectorPosition
+      left: -38
     },
     ":not($topRulesContainer)>&:last-child::after": {
       content: '""',
@@ -42,7 +42,7 @@ const {
       zIndex: 1,
       width: 32,
       height: "100%",
-      borderLeft: theme.queryBuilder.border,
+      borderLeft: `1px solid ${theme.colors.atmo4}`,
       top: 0,
       left: `calc(${theme.space.sm} + 2)`
     }
@@ -75,13 +75,13 @@ const {
   rulesContainer: {},
   /** Styles applied to the sub rules container. */
   subRulesContainer: {
-    borderLeft: theme.queryBuilder.border,
+    borderLeft: `1px solid ${theme.colors.atmo4}`,
     marginLeft: theme.space.sm,
     marginBottom: theme.space.md,
     paddingLeft: theme.space.sm,
     paddingTop: 7,
     position: "relative",
-    left: theme.queryBuilder.ruleSubGroupContainerLeftConnectorPosition,
+    left: -33,
     width: "100%"
   },
   /** Styles applied to the action button container. */
@@ -94,8 +94,8 @@ const {
   /** Styles applied to the top action button container. */
   topActionButtonContainer: {
     position: "absolute",
-    bottom: theme.queryBuilder.topActionButtonContainerBottom,
-    right: theme.queryBuilder.topActionButtonContainerRight
+    bottom: `calc(-1 * ${theme.space.md} * 0.5 - 3px)`,
+    right: `calc(${theme.space.sm} * 1.75 + 2px)`
   },
   /** Styles applied to the top rules container. */
   topRulesContainer: {},

package/dist/esm/components/QueryBuilder/QueryBuilder.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilder.styles.js","sources":["../../../../src/components/QueryBuilder/QueryBuilder.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvQueryBuilder\", {\n  /** Styles applied to the component root class. */\n  root: {\n    position: \"relative\",\n    padding: theme.space.sm,\n    marginTop: 12,\n    marginBottom: 32,\n    border: theme.queryBuilder.border,\n  },\n  /** Styles applied to the top group container. */\n  topGroup: {\n    margin: theme.space.sm,\n    backgroundColor: \"transparent\",\n    maxWidth: \"100%\",\n    minWidth: 740,\n    paddingBottom: theme.queryBuilder.topGroupPaddingBottom,\n  },\n  /** Styles applied to the sub group containers. */\n  subGroup: {\n    margin: \"40px 14px 32px 20px\",\n    minHeight: 120,\n    paddingBottom: 60,\n\n    \"&::before\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 2,\n\n      width: 21,\n      height: 36,\n\n      borderBottom: theme.queryBuilder.border,\n      borderLeft: theme.queryBuilder.border,\n\n      top: -38,\n      left: theme.queryBuilder.ruleSubGroupLeftConnectorPosition,\n    },\n    \":not($topRulesContainer)>&:last-child::after\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 1,\n\n      width: 32,\n      height: \"100%\",\n\n      borderLeft: theme.queryBuilder.border,\n\n      top: 0,\n      left: `calc(${theme.space.sm} + 2)`,\n    },\n  },\n  /** Styles applied to the radio button+label topGroup when the radio button is disabled. */\n  combinator: { minWidth: 80 },\n  /** Styles applied to the multi-button combinator container on the top group. */\n  topCombinator: {\n    position: \"absolute\",\n    top: `calc( -1 * ${theme.space.sm})`,\n    left: `calc( -1 * ${theme.space.sm})`,\n  },\n  /** Styles applied to each combinator button. */\n  combinatorButton: {},\n  /** Styles applied to the remove button.  */\n  removeButton: {},\n  /** Styles applied to the remove button on the top group. */\n  topRemoveButton: { position: \"absolute\", top: -16, right: -16 },\n  /** Styles applied to the remove button when disabled on the top group. */\n  topRemoveButtonDisabled: { backgroundColor: theme.colors.atmo2 },\n  /** Styles applied to the rules container. */\n  rulesContainer: {},\n  /** Styles applied to the sub rules container. */\n  subRulesContainer: {\n    borderLeft: theme.queryBuilder.border,\n    marginLeft: theme.space.sm,\n    marginBottom: theme.space.md,\n    paddingLeft: theme.space.sm,\n    paddingTop: 7,\n    position: \"relative\",\n    left: theme.queryBuilder.ruleSubGroupContainerLeftConnectorPosition,\n    width: \"100%\",\n  },\n  /** Styles applied to the action button container. */\n  actionButtonContainer: {\n    marginLeft: \"auto\",\n\n    \"&>*\": {\n      marginLeft: theme.space.sm,\n    },\n  },\n  /** Styles applied to the top action button container. */\n  topActionButtonContainer: {\n    position: \"absolute\",\n    bottom: theme.queryBuilder.topActionButtonContainerBottom,\n    right: theme.queryBuilder.topActionButtonContainerRight,\n  },\n  /** Styles applied to the top rules container. */\n  topRulesContainer: {},\n  /** Styles applied to the background of buttons to remove transparency */\n  buttonBackground: {\n    backgroundColor: theme.colors.atmo2,\n    display: \"inline-flex\",\n  },\n});\n"],"names":["useClasses","staticClasses","createClasses","root","position","padding","theme","space","sm","marginTop","marginBottom","border","queryBuilder","topGroup","margin","backgroundColor","maxWidth","minWidth","paddingBottom","topGroupPaddingBottom","subGroup","minHeight","content","zIndex","width","height","borderBottom","borderLeft","top","left","ruleSubGroupLeftConnectorPosition","combinator","topCombinator","combinatorButton","removeButton","topRemoveButton","right","topRemoveButtonDisabled","colors","atmo2","rulesContainer","subRulesContainer","marginLeft","md","paddingLeft","paddingTop","ruleSubGroupContainerLeftConnectorPosition","actionButtonContainer","topActionButtonContainer","bottom","topActionButtonContainerBottom","topActionButtonContainerRight","topRulesContainer","buttonBackground","display"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,SAASC,MAAMC,MAAMC;AAAAA,IACrBC,WAAW;AAAA,IACXC,cAAc;AAAA,IACdC,QAAQL,MAAMM,aAAaD;AAAAA,EAC7B;AAAA;AAAA,EAEAE,UAAU;AAAA,IACRC,QAAQR,MAAMC,MAAMC;AAAAA,IACpBO,iBAAiB;AAAA,IACjBC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,eAAeZ,MAAMM,aAAaO;AAAAA,EACpC;AAAA;AAAA,EAEAC,UAAU;AAAA,IACRN,QAAQ;AAAA,IACRO,WAAW;AAAA,IACXH,eAAe;AAAA,IAEf,aAAa;AAAA,MACXI,SAAS;AAAA,MACTlB,UAAU;AAAA,MACVmB,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERC,cAAcpB,MAAMM,aAAaD;AAAAA,MACjCgB,YAAYrB,MAAMM,aAAaD;AAAAA,MAE/BiB,KAAK;AAAA,MACLC,MAAMvB,MAAMM,aAAakB;AAAAA,IAC3B;AAAA,IACA,gDAAgD;AAAA,MAC9CR,SAAS;AAAA,MACTlB,UAAU;AAAA,MACVmB,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERE,YAAYrB,MAAMM,aAAaD;AAAAA,MAE/BiB,KAAK;AAAA,MACLC,MAAO,QAAOvB,MAAMC,MAAMC,EAAG;AAAA,IAC/B;AAAA,EACF;AAAA;AAAA,EAEAuB,YAAY;AAAA,IAAEd,UAAU;AAAA,EAAG;AAAA;AAAA,EAE3Be,eAAe;AAAA,IACb5B,UAAU;AAAA,IACVwB,KAAM,cAAatB,MAAMC,MAAMC,EAAG;AAAA,IAClCqB,MAAO,cAAavB,MAAMC,MAAMC,EAAG;AAAA,EACrC;AAAA;AAAA,EAEAyB,kBAAkB,CAAC;AAAA;AAAA,EAEnBC,cAAc,CAAC;AAAA;AAAA,EAEfC,iBAAiB;AAAA,IAAE/B,UAAU;AAAA,IAAYwB,KAAK;AAAA,IAAKQ,OAAO;AAAA,EAAI;AAAA;AAAA,EAE9DC,yBAAyB;AAAA,IAAEtB,iBAAiBT,MAAMgC,OAAOC;AAAAA,EAAM;AAAA;AAAA,EAE/DC,gBAAgB,CAAC;AAAA;AAAA,EAEjBC,mBAAmB;AAAA,IACjBd,YAAYrB,MAAMM,aAAaD;AAAAA,IAC/B+B,YAAYpC,MAAMC,MAAMC;AAAAA,IACxBE,cAAcJ,MAAMC,MAAMoC;AAAAA,IAC1BC,aAAatC,MAAMC,MAAMC;AAAAA,IACzBqC,YAAY;AAAA,IACZzC,UAAU;AAAA,IACVyB,MAAMvB,MAAMM,aAAakC;AAAAA,IACzBtB,OAAO;AAAA,EACT;AAAA;AAAA,EAEAuB,uBAAuB;AAAA,IACrBL,YAAY;AAAA,IAEZ,OAAO;AAAA,MACLA,YAAYpC,MAAMC,MAAMC;AAAAA,IAC1B;AAAA,EACF;AAAA;AAAA,EAEAwC,0BAA0B;AAAA,IACxB5C,UAAU;AAAA,IACV6C,QAAQ3C,MAAMM,aAAasC;AAAAA,IAC3Bd,OAAO9B,MAAMM,aAAauC;AAAAA,EAC5B;AAAA;AAAA,EAEAC,mBAAmB,CAAC;AAAA;AAAA,EAEpBC,kBAAkB;AAAA,IAChBtC,iBAAiBT,MAAMgC,OAAOC;AAAAA,IAC9Be,SAAS;AAAA,EACX;AACF,CAAC;"}
+{"version":3,"file":"QueryBuilder.styles.js","sources":["../../../../src/components/QueryBuilder/QueryBuilder.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { useClasses, staticClasses } = createClasses(\"HvQueryBuilder\", {\n  /** Styles applied to the component root class. */\n  root: {\n    position: \"relative\",\n    padding: theme.space.sm,\n    marginTop: 12,\n    marginBottom: 32,\n    border: `1px solid ${theme.colors.atmo4}`,\n  },\n  /** Styles applied to the top group container. */\n  topGroup: {\n    margin: theme.space.sm,\n    backgroundColor: \"transparent\",\n    maxWidth: \"100%\",\n    minWidth: 740,\n    paddingBottom: `calc(${theme.space.md} * 3)`,\n  },\n  /** Styles applied to the sub group containers. */\n  subGroup: {\n    margin: \"40px 14px 32px 20px\",\n    minHeight: 120,\n    paddingBottom: 60,\n\n    \"&::before\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 2,\n\n      width: 21,\n      height: 36,\n\n      borderBottom: `1px solid ${theme.colors.atmo4}`,\n      borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n      top: -38,\n      left: -38,\n    },\n    \":not($topRulesContainer)>&:last-child::after\": {\n      content: '\"\"',\n      position: \"absolute\",\n      zIndex: 1,\n\n      width: 32,\n      height: \"100%\",\n\n      borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n      top: 0,\n      left: `calc(${theme.space.sm} + 2)`,\n    },\n  },\n  /** Styles applied to the radio button+label topGroup when the radio button is disabled. */\n  combinator: { minWidth: 80 },\n  /** Styles applied to the multi-button combinator container on the top group. */\n  topCombinator: {\n    position: \"absolute\",\n    top: `calc( -1 * ${theme.space.sm})`,\n    left: `calc( -1 * ${theme.space.sm})`,\n  },\n  /** Styles applied to each combinator button. */\n  combinatorButton: {},\n  /** Styles applied to the remove button.  */\n  removeButton: {},\n  /** Styles applied to the remove button on the top group. */\n  topRemoveButton: { position: \"absolute\", top: -16, right: -16 },\n  /** Styles applied to the remove button when disabled on the top group. */\n  topRemoveButtonDisabled: { backgroundColor: theme.colors.atmo2 },\n  /** Styles applied to the rules container. */\n  rulesContainer: {},\n  /** Styles applied to the sub rules container. */\n  subRulesContainer: {\n    borderLeft: `1px solid ${theme.colors.atmo4}`,\n    marginLeft: theme.space.sm,\n    marginBottom: theme.space.md,\n    paddingLeft: theme.space.sm,\n    paddingTop: 7,\n    position: \"relative\",\n    left: -33,\n    width: \"100%\",\n  },\n  /** Styles applied to the action button container. */\n  actionButtonContainer: {\n    marginLeft: \"auto\",\n\n    \"&>*\": {\n      marginLeft: theme.space.sm,\n    },\n  },\n  /** Styles applied to the top action button container. */\n  topActionButtonContainer: {\n    position: \"absolute\",\n    bottom: `calc(-1 * ${theme.space.md} * 0.5 - 3px)`,\n    right: `calc(${theme.space.sm} * 1.75 + 2px)`,\n  },\n  /** Styles applied to the top rules container. */\n  topRulesContainer: {},\n  /** Styles applied to the background of buttons to remove transparency */\n  buttonBackground: {\n    backgroundColor: theme.colors.atmo2,\n    display: \"inline-flex\",\n  },\n});\n"],"names":["useClasses","staticClasses","createClasses","root","position","padding","theme","space","sm","marginTop","marginBottom","border","colors","atmo4","topGroup","margin","backgroundColor","maxWidth","minWidth","paddingBottom","md","subGroup","minHeight","content","zIndex","width","height","borderBottom","borderLeft","top","left","combinator","topCombinator","combinatorButton","removeButton","topRemoveButton","right","topRemoveButtonDisabled","atmo2","rulesContainer","subRulesContainer","marginLeft","paddingLeft","paddingTop","actionButtonContainer","topActionButtonContainer","bottom","topRulesContainer","buttonBackground","display"],"mappings":";;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,SAASC,MAAMC,MAAMC;AAAAA,IACrBC,WAAW;AAAA,IACXC,cAAc;AAAA,IACdC,QAAS,aAAYL,MAAMM,OAAOC,KAAM;AAAA,EAC1C;AAAA;AAAA,EAEAC,UAAU;AAAA,IACRC,QAAQT,MAAMC,MAAMC;AAAAA,IACpBQ,iBAAiB;AAAA,IACjBC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,eAAgB,QAAOb,MAAMC,MAAMa,EAAG;AAAA,EACxC;AAAA;AAAA,EAEAC,UAAU;AAAA,IACRN,QAAQ;AAAA,IACRO,WAAW;AAAA,IACXH,eAAe;AAAA,IAEf,aAAa;AAAA,MACXI,SAAS;AAAA,MACTnB,UAAU;AAAA,MACVoB,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERC,cAAe,aAAYrB,MAAMM,OAAOC,KAAM;AAAA,MAC9Ce,YAAa,aAAYtB,MAAMM,OAAOC,KAAM;AAAA,MAE5CgB,KAAK;AAAA,MACLC,MAAM;AAAA,IACR;AAAA,IACA,gDAAgD;AAAA,MAC9CP,SAAS;AAAA,MACTnB,UAAU;AAAA,MACVoB,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERE,YAAa,aAAYtB,MAAMM,OAAOC,KAAM;AAAA,MAE5CgB,KAAK;AAAA,MACLC,MAAO,QAAOxB,MAAMC,MAAMC,EAAG;AAAA,IAC/B;AAAA,EACF;AAAA;AAAA,EAEAuB,YAAY;AAAA,IAAEb,UAAU;AAAA,EAAG;AAAA;AAAA,EAE3Bc,eAAe;AAAA,IACb5B,UAAU;AAAA,IACVyB,KAAM,cAAavB,MAAMC,MAAMC,EAAG;AAAA,IAClCsB,MAAO,cAAaxB,MAAMC,MAAMC,EAAG;AAAA,EACrC;AAAA;AAAA,EAEAyB,kBAAkB,CAAC;AAAA;AAAA,EAEnBC,cAAc,CAAC;AAAA;AAAA,EAEfC,iBAAiB;AAAA,IAAE/B,UAAU;AAAA,IAAYyB,KAAK;AAAA,IAAKO,OAAO;AAAA,EAAI;AAAA;AAAA,EAE9DC,yBAAyB;AAAA,IAAErB,iBAAiBV,MAAMM,OAAO0B;AAAAA,EAAM;AAAA;AAAA,EAE/DC,gBAAgB,CAAC;AAAA;AAAA,EAEjBC,mBAAmB;AAAA,IACjBZ,YAAa,aAAYtB,MAAMM,OAAOC,KAAM;AAAA,IAC5C4B,YAAYnC,MAAMC,MAAMC;AAAAA,IACxBE,cAAcJ,MAAMC,MAAMa;AAAAA,IAC1BsB,aAAapC,MAAMC,MAAMC;AAAAA,IACzBmC,YAAY;AAAA,IACZvC,UAAU;AAAA,IACV0B,MAAM;AAAA,IACNL,OAAO;AAAA,EACT;AAAA;AAAA,EAEAmB,uBAAuB;AAAA,IACrBH,YAAY;AAAA,IAEZ,OAAO;AAAA,MACLA,YAAYnC,MAAMC,MAAMC;AAAAA,IAC1B;AAAA,EACF;AAAA;AAAA,EAEAqC,0BAA0B;AAAA,IACxBzC,UAAU;AAAA,IACV0C,QAAS,aAAYxC,MAAMC,MAAMa,EAAG;AAAA,IACpCgB,OAAQ,QAAO9B,MAAMC,MAAMC,EAAG;AAAA,EAChC;AAAA;AAAA,EAEAuC,mBAAmB,CAAC;AAAA;AAAA,EAEpBC,kBAAkB;AAAA,IAChBhC,iBAAiBV,MAAMM,OAAO0B;AAAAA,IAC9BW,SAAS;AAAA,EACX;AACF,CAAC;"}

package/dist/esm/components/QueryBuilder/Rule/Rule.js

@@ -5,24 +5,28 @@ import { useContext, useMemo } from "react";
 import { withTooltip } from "../../../hocs/withTooltip.js";
 import { QueryBuilderContext } from "../Context.js";
 import { useClasses } from "./Rule.styles.js";
+import { staticClasses } from "./Rule.styles.js";
 import { HvGrid } from "../../Grid/Grid.js";
 import { Attribute } from "./Attribute/Attribute.js";
 import { Operator } from "./Operator/Operator.js";
 import { Value } from "./Value/Value.js";
 import { HvButton } from "../../Button/Button.js";
-const Rule = ({
-  id,
-  combinator,
-  attribute,
-  operator,
-  value,
-  disabled,
-  isInvalid
-}) => {
+import { useDefaultProps } from "../../../hooks/useDefaultProps.js";
+const Rule = (props) => {
+  const {
+    id,
+    combinator,
+    attribute,
+    operator,
+    value,
+    disabled,
+    isInvalid,
+    classes: classesProp
+  } = useDefaultProps("HvQueryBuilderRule", props);
   const {
     classes,
     cx
-  } = useClasses();
+  } = useClasses(classesProp);
   const context = useContext(QueryBuilderContext);
   const theme = useTheme();
   const isMdDown = useMediaQuery(theme.breakpoints.down("md"));
@@ -63,6 +67,7 @@ const Rule = ({
   ] });
 };
 export {
-  Rule
+  Rule,
+  staticClasses as queryBuilderRuleClasses
 };
 //# sourceMappingURL=Rule.js.map

package/dist/esm/components/QueryBuilder/Rule/Rule.js.map

@@ -1 +1 @@
-{"version":3,"file":"Rule.js","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.tsx"],"sourcesContent":["import { Delete } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useMediaQuery, useTheme } from \"@mui/material\";\n\nimport { useContext, useMemo } from \"react\";\n\nimport { HvGrid } from \"@core/components/Grid\";\nimport { HvButton } from \"@core/components/Button\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\n\nimport { QueryBuilderContext } from \"../Context\";\nimport { Attribute } from \"./Attribute\";\nimport { Operator } from \"./Operator\";\nimport { Value } from \"./Value\";\nimport { useClasses } from \"./Rule.styles\";\n\nexport interface RuleProps {\n  id: number;\n  combinator: string;\n  attribute: string;\n  operator: string;\n  value: any;\n  disabled: boolean;\n  isInvalid: boolean;\n}\n\nexport const Rule = ({\n  id,\n  combinator,\n  attribute,\n  operator,\n  value,\n  disabled,\n  isInvalid,\n}: RuleProps) => {\n  const { classes, cx } = useClasses();\n\n  const context = useContext(QueryBuilderContext);\n\n  const theme = useTheme();\n\n  const isMdDown = useMediaQuery(theme.breakpoints.down(\"md\"));\n\n  const { askAction, attributes, operators, labels, readOnly } = context;\n\n  const availableOperators = useMemo(() => {\n    const attributeSpec =\n      attribute != null && attributes ? attributes[attribute] : null;\n    if (attributeSpec != null) {\n      const typeOperators = operators[attributeSpec.type];\n      if (typeOperators != null) {\n        return typeOperators.reduce(\n          (count, item) =>\n            count + (item.combinators.includes(combinator) ? 1 : 0),\n          0\n        );\n      }\n    }\n\n    return -1;\n  }, [attribute, attributes, combinator, operators]);\n\n  const shouldShowValueInput =\n    operator !== \"Empty\" && operator !== \"IsNotEmpty\";\n\n  const DeleteIcon = withTooltip(\n    () => <Delete />,\n    labels.rule.delete.tooltip,\n    \"bottom\"\n  );\n\n  return (\n    <HvGrid\n      container\n      className={cx(classes.root, { [classes.isMdDown]: isMdDown })}\n      spacing={0}\n      wrap=\"nowrap\"\n    >\n      <HvGrid item xs={2} lg={3}>\n        <Attribute\n          attribute={attribute}\n          id={id}\n          disabled={disabled}\n          isInvalid={isInvalid}\n        />\n      </HvGrid>\n      {attribute != null && availableOperators > 0 && (\n        <HvGrid item xs={2} lg={3}>\n          <Operator\n            id={id}\n            combinator={combinator}\n            attribute={attribute}\n            operator={operator}\n          />\n        </HvGrid>\n      )}\n      {attribute != null && (operator != null || availableOperators === 0) && (\n        <HvGrid item xs>\n          {shouldShowValueInput && (\n            <Value\n              attribute={attribute}\n              id={id}\n              operator={operator}\n              value={value}\n            />\n          )}\n        </HvGrid>\n      )}\n      <HvGrid item className={classes.actionsContainer}>\n        <HvButton\n          icon\n          aria-label={labels.rule.delete.ariaLabel}\n          onClick={() => {\n            askAction({\n              actions: [{ type: \"remove-node\", id }],\n              dialog: labels.rule.delete,\n            });\n          }}\n          disabled={readOnly}\n        >\n          <DeleteIcon />\n        </HvButton>\n      </HvGrid>\n    </HvGrid>\n  );\n};\n"],"names":["Rule","id","combinator","attribute","operator","value","disabled","isInvalid","classes","cx","useClasses","context","useContext","QueryBuilderContext","theme","useTheme","isMdDown","useMediaQuery","breakpoints","down","askAction","attributes","operators","labels","readOnly","availableOperators","useMemo","attributeSpec","typeOperators","type","reduce","count","item","combinators","includes","shouldShowValueInput","DeleteIcon","withTooltip","rule","delete","tooltip","root","actionsContainer","ariaLabel","actions","dialog"],"mappings":";;;;;;;;;;;;AA0BO,MAAMA,OAAOA,CAAC;AAAA,EACnBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACS,MAAM;AACT,QAAA;AAAA,IAAEC;AAAAA,IAASC;AAAAA,MAAOC,WAAW;AAE7BC,QAAAA,UAAUC,WAAWC,mBAAmB;AAE9C,QAAMC,QAAQC;AAEd,QAAMC,WAAWC,cAAcH,MAAMI,YAAYC,KAAK,IAAI,CAAC;AAErD,QAAA;AAAA,IAAEC;AAAAA,IAAWC;AAAAA,IAAYC;AAAAA,IAAWC;AAAAA,IAAQC;AAAAA,EAAab,IAAAA;AAEzDc,QAAAA,qBAAqBC,QAAQ,MAAM;AACvC,UAAMC,gBACJxB,aAAa,QAAQkB,aAAaA,WAAWlB,SAAS,IAAI;AAC5D,QAAIwB,iBAAiB,MAAM;AACnBC,YAAAA,gBAAgBN,UAAUK,cAAcE,IAAI;AAClD,UAAID,iBAAiB,MAAM;AACzB,eAAOA,cAAcE,OACnB,CAACC,OAAOC,SACND,SAASC,KAAKC,YAAYC,SAAShC,UAAU,IAAI,IAAI,IACvD,CACF;AAAA,MACF;AAAA,IACF;AAEO,WAAA;AAAA,KACN,CAACC,WAAWkB,YAAYnB,YAAYoB,SAAS,CAAC;AAE3Ca,QAAAA,uBACJ/B,aAAa,WAAWA,aAAa;AAEjCgC,QAAAA,aAAaC,YACjB,MAAO,oBAAA,QAAA,CAAA,CAAS,GAChBd,OAAOe,KAAKC,OAAOC,SACnB,QACF;AAEA,8BACG,QACC,EAAA,WAAS,MACT,WAAW/B,GAAGD,QAAQiC,MAAM;AAAA,IAAE,CAACjC,QAAQQ,QAAQ,GAAGA;AAAAA,EAAU,CAAA,GAC5D,SAAS,GACT,MAAK,UAEL,UAAA;AAAA,IAAA,oBAAC,QAAO,EAAA,MAAI,MAAC,IAAI,GAAG,IAAI,GACtB,UAAA,oBAAC,WACC,EAAA,WACA,IACA,UACA,UAAqB,CAAA,GAEzB;AAAA,IACCb,aAAa,QAAQsB,qBAAqB,KACxC,oBAAA,QAAA,EAAO,MAAI,MAAC,IAAI,GAAG,IAAI,GACtB,UAAC,oBAAA,UAAA,EACC,IACA,YACA,WACA,SAAmB,CAAA,GAEvB;AAAA,IAEDtB,aAAa,SAASC,YAAY,QAAQqB,uBAAuB,0BAC/D,QAAO,EAAA,MAAI,MAAC,IAAE,MACZU,kCACE,oBAAA,OAAA,EACC,WACA,IACA,UACA,OAEH,EACH,CAAA;AAAA,wBAED,QAAO,EAAA,MAAI,MAAC,WAAW3B,QAAQkC,kBAC9B,UAAA,oBAAC,UACC,EAAA,MAAI,MACJ,cAAYnB,OAAOe,KAAKC,OAAOI,WAC/B,SAAS,MAAM;AACH,gBAAA;AAAA,QACRC,SAAS,CAAC;AAAA,UAAEf,MAAM;AAAA,UAAe5B;AAAAA,QAAAA,CAAI;AAAA,QACrC4C,QAAQtB,OAAOe,KAAKC;AAAAA,MAAAA,CACrB;AAAA,IAAA,GAEH,UAAUf,UAEV,UAAC,oBAAA,YAAA,CAAU,CAAA,EACb,CAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"Rule.js","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.tsx"],"sourcesContent":["import { Delete } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useMediaQuery, useTheme } from \"@mui/material\";\n\nimport { useContext, useMemo } from \"react\";\n\nimport { HvGrid } from \"@core/components/Grid\";\nimport { HvButton } from \"@core/components/Button\";\nimport { withTooltip } from \"@core/hocs/withTooltip\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport { ExtractNames } from \"@core/utils\";\nimport { QueryBuilderContext } from \"../Context\";\nimport { Attribute } from \"./Attribute\";\nimport { Operator } from \"./Operator\";\nimport { Value } from \"./Value\";\nimport { staticClasses, useClasses } from \"./Rule.styles\";\n\nexport { staticClasses as queryBuilderRuleClasses };\n\nexport type HvQueryBuilderRuleClasses = ExtractNames<typeof useClasses>;\n\nexport interface RuleProps {\n  id: number;\n  combinator: string;\n  attribute: string;\n  operator: string;\n  value: any;\n  disabled: boolean;\n  isInvalid: boolean;\n  classes?: HvQueryBuilderRuleClasses;\n}\n\nexport const Rule = (props: RuleProps) => {\n  const {\n    id,\n    combinator,\n    attribute,\n    operator,\n    value,\n    disabled,\n    isInvalid,\n    classes: classesProp,\n  } = useDefaultProps(\"HvQueryBuilderRule\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const context = useContext(QueryBuilderContext);\n\n  const theme = useTheme();\n\n  const isMdDown = useMediaQuery(theme.breakpoints.down(\"md\"));\n\n  const { askAction, attributes, operators, labels, readOnly } = context;\n\n  const availableOperators = useMemo(() => {\n    const attributeSpec =\n      attribute != null && attributes ? attributes[attribute] : null;\n    if (attributeSpec != null) {\n      const typeOperators = operators[attributeSpec.type];\n      if (typeOperators != null) {\n        return typeOperators.reduce(\n          (count, item) =>\n            count + (item.combinators.includes(combinator) ? 1 : 0),\n          0\n        );\n      }\n    }\n\n    return -1;\n  }, [attribute, attributes, combinator, operators]);\n\n  const shouldShowValueInput =\n    operator !== \"Empty\" && operator !== \"IsNotEmpty\";\n\n  const DeleteIcon = withTooltip(\n    () => <Delete />,\n    labels.rule.delete.tooltip,\n    \"bottom\"\n  );\n\n  return (\n    <HvGrid\n      container\n      className={cx(classes.root, { [classes.isMdDown]: isMdDown })}\n      spacing={0}\n      wrap=\"nowrap\"\n    >\n      <HvGrid item xs={2} lg={3}>\n        <Attribute\n          attribute={attribute}\n          id={id}\n          disabled={disabled}\n          isInvalid={isInvalid}\n        />\n      </HvGrid>\n      {attribute != null && availableOperators > 0 && (\n        <HvGrid item xs={2} lg={3}>\n          <Operator\n            id={id}\n            combinator={combinator}\n            attribute={attribute}\n            operator={operator}\n          />\n        </HvGrid>\n      )}\n      {attribute != null && (operator != null || availableOperators === 0) && (\n        <HvGrid item xs>\n          {shouldShowValueInput && (\n            <Value\n              attribute={attribute}\n              id={id}\n              operator={operator}\n              value={value}\n            />\n          )}\n        </HvGrid>\n      )}\n      <HvGrid item className={classes.actionsContainer}>\n        <HvButton\n          icon\n          aria-label={labels.rule.delete.ariaLabel}\n          onClick={() => {\n            askAction({\n              actions: [{ type: \"remove-node\", id }],\n              dialog: labels.rule.delete,\n            });\n          }}\n          disabled={readOnly}\n        >\n          <DeleteIcon />\n        </HvButton>\n      </HvGrid>\n    </HvGrid>\n  );\n};\n"],"names":["Rule","props","id","combinator","attribute","operator","value","disabled","isInvalid","classes","classesProp","useDefaultProps","cx","useClasses","context","useContext","QueryBuilderContext","theme","useTheme","isMdDown","useMediaQuery","breakpoints","down","askAction","attributes","operators","labels","readOnly","availableOperators","useMemo","attributeSpec","typeOperators","type","reduce","count","item","combinators","includes","shouldShowValueInput","DeleteIcon","withTooltip","rule","delete","tooltip","root","actionsContainer","ariaLabel","actions","dialog"],"mappings":";;;;;;;;;;;;;;AAiCaA,MAAAA,OAAOA,CAACC,UAAqB;AAClC,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,sBAAsBV,KAAK;AACzC,QAAA;AAAA,IAAEQ;AAAAA,IAASG;AAAAA,EAAAA,IAAOC,WAAWH,WAAW;AAExCI,QAAAA,UAAUC,WAAWC,mBAAmB;AAE9C,QAAMC,QAAQC;AAEd,QAAMC,WAAWC,cAAcH,MAAMI,YAAYC,KAAK,IAAI,CAAC;AAErD,QAAA;AAAA,IAAEC;AAAAA,IAAWC;AAAAA,IAAYC;AAAAA,IAAWC;AAAAA,IAAQC;AAAAA,EAAab,IAAAA;AAEzDc,QAAAA,qBAAqBC,QAAQ,MAAM;AACvC,UAAMC,gBACJ1B,aAAa,QAAQoB,aAAaA,WAAWpB,SAAS,IAAI;AAC5D,QAAI0B,iBAAiB,MAAM;AACnBC,YAAAA,gBAAgBN,UAAUK,cAAcE,IAAI;AAClD,UAAID,iBAAiB,MAAM;AACzB,eAAOA,cAAcE,OACnB,CAACC,OAAOC,SACND,SAASC,KAAKC,YAAYC,SAASlC,UAAU,IAAI,IAAI,IACvD,CACF;AAAA,MACF;AAAA,IACF;AAEO,WAAA;AAAA,KACN,CAACC,WAAWoB,YAAYrB,YAAYsB,SAAS,CAAC;AAE3Ca,QAAAA,uBACJjC,aAAa,WAAWA,aAAa;AAEjCkC,QAAAA,aAAaC,YACjB,MAAO,oBAAA,QAAA,CAAA,CAAS,GAChBd,OAAOe,KAAKC,OAAOC,SACnB,QACF;AAEA,8BACG,QACC,EAAA,WAAS,MACT,WAAW/B,GAAGH,QAAQmC,MAAM;AAAA,IAAE,CAACnC,QAAQU,QAAQ,GAAGA;AAAAA,EAAU,CAAA,GAC5D,SAAS,GACT,MAAK,UAEL,UAAA;AAAA,IAAA,oBAAC,QAAO,EAAA,MAAI,MAAC,IAAI,GAAG,IAAI,GACtB,UAAA,oBAAC,WACC,EAAA,WACA,IACA,UACA,UAAqB,CAAA,GAEzB;AAAA,IACCf,aAAa,QAAQwB,qBAAqB,KACxC,oBAAA,QAAA,EAAO,MAAI,MAAC,IAAI,GAAG,IAAI,GACtB,UAAC,oBAAA,UAAA,EACC,IACA,YACA,WACA,SAAmB,CAAA,GAEvB;AAAA,IAEDxB,aAAa,SAASC,YAAY,QAAQuB,uBAAuB,0BAC/D,QAAO,EAAA,MAAI,MAAC,IAAE,MACZU,kCACE,oBAAA,OAAA,EACC,WACA,IACA,UACA,OAEH,EACH,CAAA;AAAA,wBAED,QAAO,EAAA,MAAI,MAAC,WAAW7B,QAAQoC,kBAC9B,UAAA,oBAAC,UACC,EAAA,MAAI,MACJ,cAAYnB,OAAOe,KAAKC,OAAOI,WAC/B,SAAS,MAAM;AACH,gBAAA;AAAA,QACRC,SAAS,CAAC;AAAA,UAAEf,MAAM;AAAA,UAAe9B;AAAAA,QAAAA,CAAI;AAAA,QACrC8C,QAAQtB,OAAOe,KAAKC;AAAAA,MAAAA,CACrB;AAAA,IAAA,GAEH,UAAUf,UAEV,UAAC,oBAAA,YAAA,CAAU,CAAA,EACb,CAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/QueryBuilder/Rule/Rule.styles.js

@@ -20,27 +20,27 @@ const {
       content: '""',
       position: "absolute",
       zIndex: 2,
-      width: theme.queryBuilder.ruleConnectorHorizontalSize,
-      height: theme.queryBuilder.ruleConnectorHeight,
-      borderBottom: theme.queryBuilder.border,
-      borderLeft: theme.queryBuilder.border,
+      width: "17px",
+      height: "39px",
+      borderBottom: `1px solid ${theme.colors.atmo4}`,
+      borderLeft: `1px solid ${theme.colors.atmo4}`,
       top: 0,
-      left: theme.queryBuilder.ruleLeftConnectorPosition
+      left: `calc( -1 * 17px)`
     },
     [`:not(.${staticClasses$1.topRulesContainer})>&:last-child::after`]: {
       content: '""',
       position: "absolute",
       zIndex: 1,
-      width: theme.queryBuilder.ruleConnectorHorizontalSize,
+      width: "17px",
       height: "100%",
-      borderLeft: theme.queryBuilder.border,
+      borderLeft: `1px solid ${theme.colors.atmo4}`,
       top: 0,
-      left: theme.queryBuilder.ruleLeftConnectorPosition
+      left: `calc( -1 * 17px)`
     }
   },
   actionsContainer: {
     marginLeft: "auto",
-    marginTop: theme.queryBuilder.actionsContainerMarginTop,
+    marginTop: "24px",
     "&>:not(:last-child)": {
       marginRight: theme.space.xs
     }

package/dist/esm/components/QueryBuilder/Rule/Rule.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Rule.styles.js","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nimport { staticClasses as queryBuilderClasses } from \"../QueryBuilder.styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-Rule\",\n  {\n    root: {\n      position: \"relative\",\n      marginTop: theme.space.xs,\n\n      minHeight: 94,\n\n      \"&>div:not(:last-child)\": {\n        marginRight: theme.space.md,\n      },\n\n      // hide required * as all fields are required\n      \"& label>span[aria-hidden]\": {\n        visibility: \"hidden\",\n      },\n      \"&::before\": {\n        content: '\"\"',\n        position: \"absolute\",\n        zIndex: 2,\n\n        width: theme.queryBuilder.ruleConnectorHorizontalSize,\n        height: theme.queryBuilder.ruleConnectorHeight,\n\n        borderBottom: theme.queryBuilder.border,\n        borderLeft: theme.queryBuilder.border,\n\n        top: 0,\n        left: theme.queryBuilder.ruleLeftConnectorPosition,\n      },\n      [`:not(.${queryBuilderClasses.topRulesContainer})>&:last-child::after`]: {\n        content: '\"\"',\n        position: \"absolute\",\n        zIndex: 1,\n\n        width: theme.queryBuilder.ruleConnectorHorizontalSize,\n        height: \"100%\",\n\n        borderLeft: theme.queryBuilder.border,\n\n        top: 0,\n        left: theme.queryBuilder.ruleLeftConnectorPosition,\n      },\n    },\n    actionsContainer: {\n      marginLeft: \"auto\",\n      marginTop: theme.queryBuilder.actionsContainerMarginTop,\n\n      \"&>:not(:last-child)\": {\n        marginRight: theme.space.xs,\n      },\n    },\n    isMdDown: {\n      \"&>div:not(:last-child)\": {\n        marginRight: `calc(${theme.space.md} / 2)`,\n      },\n    },\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","position","marginTop","theme","space","xs","minHeight","marginRight","md","visibility","content","zIndex","width","queryBuilder","ruleConnectorHorizontalSize","height","ruleConnectorHeight","borderBottom","border","borderLeft","top","left","ruleLeftConnectorPosition","queryBuilderClasses","topRulesContainer","actionsContainer","marginLeft","actionsContainerMarginTop","isMdDown"],"mappings":";;;AAMa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAC3C,uBACA;AAAA,EACEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,WAAWC,MAAMC,MAAMC;AAAAA,IAEvBC,WAAW;AAAA,IAEX,0BAA0B;AAAA,MACxBC,aAAaJ,MAAMC,MAAMI;AAAAA,IAC3B;AAAA;AAAA,IAGA,6BAA6B;AAAA,MAC3BC,YAAY;AAAA,IACd;AAAA,IACA,aAAa;AAAA,MACXC,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAOT,MAAMU,aAAaC;AAAAA,MAC1BC,QAAQZ,MAAMU,aAAaG;AAAAA,MAE3BC,cAAcd,MAAMU,aAAaK;AAAAA,MACjCC,YAAYhB,MAAMU,aAAaK;AAAAA,MAE/BE,KAAK;AAAA,MACLC,MAAMlB,MAAMU,aAAaS;AAAAA,IAC3B;AAAA,IACA,CAAE,SAAQC,gBAAoBC,iBAAkB,uBAAsB,GAAG;AAAA,MACvEd,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAOT,MAAMU,aAAaC;AAAAA,MAC1BC,QAAQ;AAAA,MAERI,YAAYhB,MAAMU,aAAaK;AAAAA,MAE/BE,KAAK;AAAA,MACLC,MAAMlB,MAAMU,aAAaS;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAG,kBAAkB;AAAA,IAChBC,YAAY;AAAA,IACZxB,WAAWC,MAAMU,aAAac;AAAAA,IAE9B,uBAAuB;AAAA,MACrBpB,aAAaJ,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAuB,UAAU;AAAA,IACR,0BAA0B;AAAA,MACxBrB,aAAc,QAAOJ,MAAMC,MAAMI,EAAG;AAAA,IACtC;AAAA,EACF;AACF,CACF;"}
+{"version":3,"file":"Rule.styles.js","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"@core/utils/classes\";\n\nimport { staticClasses as queryBuilderClasses } from \"../QueryBuilder.styles\";\n\nexport const { useClasses, staticClasses } = createClasses(\n  \"HvQueryBuilder-Rule\",\n  {\n    root: {\n      position: \"relative\",\n      marginTop: theme.space.xs,\n\n      minHeight: 94,\n\n      \"&>div:not(:last-child)\": {\n        marginRight: theme.space.md,\n      },\n\n      // hide required * as all fields are required\n      \"& label>span[aria-hidden]\": {\n        visibility: \"hidden\",\n      },\n      \"&::before\": {\n        content: '\"\"',\n        position: \"absolute\",\n        zIndex: 2,\n\n        width: \"17px\",\n        height: \"39px\",\n\n        borderBottom: `1px solid ${theme.colors.atmo4}`,\n        borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n        top: 0,\n        left: `calc( -1 * 17px)`,\n      },\n      [`:not(.${queryBuilderClasses.topRulesContainer})>&:last-child::after`]: {\n        content: '\"\"',\n        position: \"absolute\",\n        zIndex: 1,\n\n        width: \"17px\",\n        height: \"100%\",\n\n        borderLeft: `1px solid ${theme.colors.atmo4}`,\n\n        top: 0,\n        left: `calc( -1 * 17px)`,\n      },\n    },\n    actionsContainer: {\n      marginLeft: \"auto\",\n      marginTop: \"24px\",\n\n      \"&>:not(:last-child)\": {\n        marginRight: theme.space.xs,\n      },\n    },\n    isMdDown: {\n      \"&>div:not(:last-child)\": {\n        marginRight: `calc(${theme.space.md} / 2)`,\n      },\n    },\n  }\n);\n"],"names":["useClasses","staticClasses","createClasses","root","position","marginTop","theme","space","xs","minHeight","marginRight","md","visibility","content","zIndex","width","height","borderBottom","colors","atmo4","borderLeft","top","left","queryBuilderClasses","topRulesContainer","actionsContainer","marginLeft","isMdDown"],"mappings":";;;AAMa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,cAC3C,uBACA;AAAA,EACEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,WAAWC,MAAMC,MAAMC;AAAAA,IAEvBC,WAAW;AAAA,IAEX,0BAA0B;AAAA,MACxBC,aAAaJ,MAAMC,MAAMI;AAAAA,IAC3B;AAAA;AAAA,IAGA,6BAA6B;AAAA,MAC3BC,YAAY;AAAA,IACd;AAAA,IACA,aAAa;AAAA,MACXC,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERC,cAAe,aAAYX,MAAMY,OAAOC,KAAM;AAAA,MAC9CC,YAAa,aAAYd,MAAMY,OAAOC,KAAM;AAAA,MAE5CE,KAAK;AAAA,MACLC,MAAO;AAAA,IACT;AAAA,IACA,CAAE,SAAQC,gBAAoBC,iBAAkB,uBAAsB,GAAG;AAAA,MACvEX,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAO;AAAA,MACPC,QAAQ;AAAA,MAERI,YAAa,aAAYd,MAAMY,OAAOC,KAAM;AAAA,MAE5CE,KAAK;AAAA,MACLC,MAAO;AAAA,IACT;AAAA,EACF;AAAA,EACAG,kBAAkB;AAAA,IAChBC,YAAY;AAAA,IACZrB,WAAW;AAAA,IAEX,uBAAuB;AAAA,MACrBK,aAAaJ,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAmB,UAAU;AAAA,IACR,0BAA0B;AAAA,MACxBjB,aAAc,QAAOJ,MAAMC,MAAMI,EAAG;AAAA,IACtC;AAAA,EACF;AACF,CACF;"}

package/dist/esm/components/Radio/Radio.styles.js

@@ -17,8 +17,8 @@ const {
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
     transitionDelay: "0ms",
     "&:hover": {
-      backgroundColor: theme.radio.hoverColor,
-      borderRadius: theme.radio.borderRadius
+      backgroundColor: theme.colors.containerBackgroundHover,
+      borderRadius: theme.radii.base
     }
   },
   invalidContainer: {

package/dist/esm/components/Radio/Radio.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.styles.js","sources":["../../../../src/components/Radio/Radio.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRadio\", {\n  root: { display: \"inline-block\" },\n  container: {\n    cursor: \"pointer\",\n    display: \"flex\",\n    height: \"32px\",\n    transitionProperty: \"background-color\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDelay: \"0ms\",\n\n    \"&:hover\": {\n      backgroundColor: theme.radio.hoverColor,\n      borderRadius: theme.radio.borderRadius,\n    },\n  },\n  invalidContainer: {\n    borderBottom: `1px solid ${theme.colors.negative}`,\n\n    \"&:hover\": {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    },\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n\n    \"& $label\": { color: theme.colors.secondary_60, cursor: \"not-allowed\" },\n  },\n  radio: {\n    height: \"32px\",\n\n    \"& svg\": {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  invalidRadio: {\n    borderBottom: `1px solid ${theme.colors.negative}`,\n\n    \"&:hover\": {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    },\n  },\n  label: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    verticalAlign: \"middle\",\n    paddingRight: theme.space.xs,\n    whiteSpace: \"nowrap\",\n    ...theme.typography.body,\n    cursor: \"pointer\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    width: \"100%\",\n  },\n  focusVisible: { backgroundColor: theme.colors.atmo3, ...outlineStyles },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","container","cursor","height","transitionProperty","transitionDuration","transitionTimingFunction","transitionDelay","backgroundColor","theme","radio","hoverColor","borderRadius","invalidContainer","borderBottom","colors","negative","borderBottomLeftRadius","borderBottomRightRadius","disabled","color","secondary_60","outline","boxShadow","invalidRadio","label","overflow","textOverflow","verticalAlign","paddingRight","space","xs","whiteSpace","typography","body","lineHeight","width","focusVisible","atmo3","outlineStyles"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,WAAW;AAAA,EACpEC,MAAM;AAAA,IAAEC,SAAS;AAAA,EAAe;AAAA,EAChCC,WAAW;AAAA,IACTC,QAAQ;AAAA,IACRF,SAAS;AAAA,IACTG,QAAQ;AAAA,IACRC,oBAAoB;AAAA,IACpBC,oBAAoB;AAAA,IACpBC,0BAA0B;AAAA,IAC1BC,iBAAiB;AAAA,IAEjB,WAAW;AAAA,MACTC,iBAAiBC,MAAMC,MAAMC;AAAAA,MAC7BC,cAAcH,MAAMC,MAAME;AAAAA,IAC5B;AAAA,EACF;AAAA,EACAC,kBAAkB;AAAA,IAChBC,cAAe,aAAYL,MAAMM,OAAOC,QAAS;AAAA,IAEjD,WAAW;AAAA,MACTC,wBAAwB;AAAA,MACxBC,yBAAyB;AAAA,IAC3B;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACRjB,QAAQ;AAAA,IAER,YAAY;AAAA,MAAEkB,OAAOX,MAAMM,OAAOM;AAAAA,MAAcnB,QAAQ;AAAA,IAAc;AAAA,EACxE;AAAA,EACAQ,OAAO;AAAA,IACLP,QAAQ;AAAA,IAER,SAAS;AAAA,MACPmB,SAAS;AAAA,MACTC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZV,cAAe,aAAYL,MAAMM,OAAOC,QAAS;AAAA,IAEjD,WAAW;AAAA,MACTC,wBAAwB;AAAA,MACxBC,yBAAyB;AAAA,IAC3B;AAAA,EACF;AAAA,EACAO,OAAO;AAAA,IACLC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,eAAe;AAAA,IACfC,cAAcpB,MAAMqB,MAAMC;AAAAA,IAC1BC,YAAY;AAAA,IACZ,GAAGvB,MAAMwB,WAAWC;AAAAA,IACpBhC,QAAQ;AAAA,IACRC,QAAQ;AAAA,IACRgC,YAAY;AAAA,IACZC,OAAO;AAAA,EACT;AAAA,EACAC,cAAc;AAAA,IAAE7B,iBAAiBC,MAAMM,OAAOuB;AAAAA,IAAO,GAAGC;AAAAA,EAAc;AACxE,CAAC;"}
+{"version":3,"file":"Radio.styles.js","sources":["../../../../src/components/Radio/Radio.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvRadio\", {\n  root: { display: \"inline-block\" },\n  container: {\n    cursor: \"pointer\",\n    display: \"flex\",\n    height: \"32px\",\n    transitionProperty: \"background-color\",\n    transitionDuration: \"150ms\",\n    transitionTimingFunction: \"cubic-bezier(0.4, 0, 0.2, 1)\",\n    transitionDelay: \"0ms\",\n\n    \"&:hover\": {\n      backgroundColor: theme.colors.containerBackgroundHover,\n      borderRadius: theme.radii.base,\n    },\n  },\n  invalidContainer: {\n    borderBottom: `1px solid ${theme.colors.negative}`,\n\n    \"&:hover\": {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    },\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n\n    \"& $label\": { color: theme.colors.secondary_60, cursor: \"not-allowed\" },\n  },\n  radio: {\n    height: \"32px\",\n\n    \"& svg\": {\n      outline: \"none\",\n      boxShadow: \"none\",\n    },\n  },\n  invalidRadio: {\n    borderBottom: `1px solid ${theme.colors.negative}`,\n\n    \"&:hover\": {\n      borderBottomLeftRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n    },\n  },\n  label: {\n    overflow: \"hidden\",\n    textOverflow: \"ellipsis\",\n    verticalAlign: \"middle\",\n    paddingRight: theme.space.xs,\n    whiteSpace: \"nowrap\",\n    ...theme.typography.body,\n    cursor: \"pointer\",\n    height: \"32px\",\n    lineHeight: \"32px\",\n    width: \"100%\",\n  },\n  focusVisible: { backgroundColor: theme.colors.atmo3, ...outlineStyles },\n});\n"],"names":["staticClasses","useClasses","createClasses","root","display","container","cursor","height","transitionProperty","transitionDuration","transitionTimingFunction","transitionDelay","backgroundColor","theme","colors","containerBackgroundHover","borderRadius","radii","base","invalidContainer","borderBottom","negative","borderBottomLeftRadius","borderBottomRightRadius","disabled","color","secondary_60","radio","outline","boxShadow","invalidRadio","label","overflow","textOverflow","verticalAlign","paddingRight","space","xs","whiteSpace","typography","body","lineHeight","width","focusVisible","atmo3","outlineStyles"],"mappings":";;;AAKa,MAAA;AAAA,EAAEA;AAAAA,EAAeC;AAAW,IAAIC,cAAc,WAAW;AAAA,EACpEC,MAAM;AAAA,IAAEC,SAAS;AAAA,EAAe;AAAA,EAChCC,WAAW;AAAA,IACTC,QAAQ;AAAA,IACRF,SAAS;AAAA,IACTG,QAAQ;AAAA,IACRC,oBAAoB;AAAA,IACpBC,oBAAoB;AAAA,IACpBC,0BAA0B;AAAA,IAC1BC,iBAAiB;AAAA,IAEjB,WAAW;AAAA,MACTC,iBAAiBC,MAAMC,OAAOC;AAAAA,MAC9BC,cAAcH,MAAMI,MAAMC;AAAAA,IAC5B;AAAA,EACF;AAAA,EACAC,kBAAkB;AAAA,IAChBC,cAAe,aAAYP,MAAMC,OAAOO,QAAS;AAAA,IAEjD,WAAW;AAAA,MACTC,wBAAwB;AAAA,MACxBC,yBAAyB;AAAA,IAC3B;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACRlB,QAAQ;AAAA,IAER,YAAY;AAAA,MAAEmB,OAAOZ,MAAMC,OAAOY;AAAAA,MAAcpB,QAAQ;AAAA,IAAc;AAAA,EACxE;AAAA,EACAqB,OAAO;AAAA,IACLpB,QAAQ;AAAA,IAER,SAAS;AAAA,MACPqB,SAAS;AAAA,MACTC,WAAW;AAAA,IACb;AAAA,EACF;AAAA,EACAC,cAAc;AAAA,IACZV,cAAe,aAAYP,MAAMC,OAAOO,QAAS;AAAA,IAEjD,WAAW;AAAA,MACTC,wBAAwB;AAAA,MACxBC,yBAAyB;AAAA,IAC3B;AAAA,EACF;AAAA,EACAQ,OAAO;AAAA,IACLC,UAAU;AAAA,IACVC,cAAc;AAAA,IACdC,eAAe;AAAA,IACfC,cAActB,MAAMuB,MAAMC;AAAAA,IAC1BC,YAAY;AAAA,IACZ,GAAGzB,MAAM0B,WAAWC;AAAAA,IACpBlC,QAAQ;AAAA,IACRC,QAAQ;AAAA,IACRkC,YAAY;AAAA,IACZC,OAAO;AAAA,EACT;AAAA,EACAC,cAAc;AAAA,IAAE/B,iBAAiBC,MAAMC,OAAO8B;AAAAA,IAAO,GAAGC;AAAAA,EAAc;AACxE,CAAC;"}

package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js

@@ -2,17 +2,19 @@ import { jsx } from "@emotion/react/jsx-runtime";
 import { setId } from "../../../../utils/setId.js";
 import { useClasses } from "./HorizontalScrollListItem.styles.js";
 import { staticClasses } from "./HorizontalScrollListItem.styles.js";
-const HvHorizontalScrollListItem = ({
-  id,
-  className,
-  classes: classesProp,
-  selected,
-  children,
-  onClick,
-  onKeyDown,
-  tooltipWrapper,
-  ...others
-}) => {
+import { useDefaultProps } from "../../../../hooks/useDefaultProps.js";
+const HvHorizontalScrollListItem = (props) => {
+  const {
+    id,
+    className,
+    classes: classesProp,
+    selected,
+    children,
+    onClick,
+    onKeyDown,
+    tooltipWrapper,
+    ...others
+  } = useDefaultProps("HvHorizontalScrollListItem", props);
   const {
     classes,
     cx

package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScrollListItem.js","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypographyProps } from \"@core/components/Typography\";\n\nimport { staticClasses, useClasses } from \"./HorizontalScrollListItem.styles\";\n\nexport { staticClasses as horizontalScrollListItemClasses };\n\nexport type HvHorizontalScrollListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\n  /** The text to render.  */\n  children: React.ReactNode;\n  /** A function component that renders a typography wrapped with a tooltip. */\n  tooltipWrapper: React.FunctionComponent<{\n    id?: string;\n    className?: string;\n    variant?: HvTypographyProps[\"variant\"];\n    children?: React.ReactNode;\n  }>;\n  /** Whether the element is selected. */\n  selected?: boolean;\n  /** The function to be executed when the element is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  /** The function to be executed when the element is clicked. */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvHorizontalScrollListItemClasses;\n}\n\n/**\n * HvHorizontalScrollListItem a focusable item to be used as part of the horizontal scroll\n */\nexport const HvHorizontalScrollListItem = ({\n  id,\n  className,\n  classes: classesProp,\n  selected,\n  children,\n  onClick,\n  onKeyDown,\n  tooltipWrapper,\n  ...others\n}: HvVerticalScrollListItemProps) => {\n  const { classes, cx } = useClasses(classesProp);\n  const variant = selected ? \"label\" : \"body\";\n  const labelId = setId(id, \"label\");\n  const buttonId = setId(id, \"button\");\n  const Tooltip = tooltipWrapper;\n\n  return (\n    <li id={id} className={cx(classes.root, className)} aria-current={selected}>\n      <div\n        id={buttonId}\n        role=\"button\"\n        tabIndex={0}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        className={classes.button}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        <Tooltip\n          id={labelId}\n          className={cx(classes.text, { [classes.selected]: selected })}\n          variant={variant}\n        >\n          {children}\n        </Tooltip>\n      </div>\n    </li>\n  );\n};\n"],"names":["HvHorizontalScrollListItem","id","className","classes","classesProp","selected","children","onClick","onKeyDown","tooltipWrapper","others","cx","useClasses","variant","labelId","setId","buttonId","Tooltip","root","button","text"],"mappings":";;;;AAkCO,MAAMA,6BAA6BA,CAAC;AAAA,EACzCC;AAAAA,EACAC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACA,GAAGC;AAC0B,MAAM;AAC7B,QAAA;AAAA,IAAEP;AAAAA,IAASQ;AAAAA,EAAAA,IAAOC,WAAWR,WAAW;AACxCS,QAAAA,UAAUR,WAAW,UAAU;AAC/BS,QAAAA,UAAUC,MAAMd,IAAI,OAAO;AAC3Be,QAAAA,WAAWD,MAAMd,IAAI,QAAQ;AACnC,QAAMgB,UAAUR;AAEhB,SACG,oBAAA,MAAA,EAAG,IAAQ,WAAWE,GAAGR,QAAQe,MAAMhB,SAAS,GAAG,gBAAcG,UAChE,UAAA,oBAAC,OACC,EAAA,IAAIW,UACJ,MAAK,UACL,UAAU,GACV,SACA,WACA,WAAWb,QAAQgB,QACnB,mBAAiBL,SACbJ,GAAAA,QAEJ,UAAA,oBAAC,WACC,IAAII,SACJ,WAAWH,GAAGR,QAAQiB,MAAM;AAAA,IAAE,CAACjB,QAAQE,QAAQ,GAAGA;AAAAA,EAAU,CAAA,GAC5D,SAECC,SACH,CAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"HorizontalScrollListItem.js","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types/generic\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypographyProps } from \"@core/components/Typography\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport { staticClasses, useClasses } from \"./HorizontalScrollListItem.styles\";\n\nexport { staticClasses as horizontalScrollListItemClasses };\n\nexport type HvHorizontalScrollListItemClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvVerticalScrollListItemProps extends HvBaseProps {\n  /** The text to render.  */\n  children: React.ReactNode;\n  /** A function component that renders a typography wrapped with a tooltip. */\n  tooltipWrapper: React.FunctionComponent<{\n    id?: string;\n    className?: string;\n    variant?: HvTypographyProps[\"variant\"];\n    children?: React.ReactNode;\n  }>;\n  /** Whether the element is selected. */\n  selected?: boolean;\n  /** The function to be executed when the element is clicked. */\n  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n  /** The function to be executed when the element is clicked. */\n  onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n  /** A Jss Object used to override or extend the styles applied. */\n  classes?: HvHorizontalScrollListItemClasses;\n}\n\n/**\n * HvHorizontalScrollListItem a focusable item to be used as part of the horizontal scroll\n */\nexport const HvHorizontalScrollListItem = (\n  props: HvVerticalScrollListItemProps\n) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    selected,\n    children,\n    onClick,\n    onKeyDown,\n    tooltipWrapper,\n    ...others\n  } = useDefaultProps(\"HvHorizontalScrollListItem\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const variant = selected ? \"label\" : \"body\";\n  const labelId = setId(id, \"label\");\n  const buttonId = setId(id, \"button\");\n  const Tooltip = tooltipWrapper;\n\n  return (\n    <li id={id} className={cx(classes.root, className)} aria-current={selected}>\n      <div\n        id={buttonId}\n        role=\"button\"\n        tabIndex={0}\n        onClick={onClick}\n        onKeyDown={onKeyDown}\n        className={classes.button}\n        aria-labelledby={labelId}\n        {...others}\n      >\n        <Tooltip\n          id={labelId}\n          className={cx(classes.text, { [classes.selected]: selected })}\n          variant={variant}\n        >\n          {children}\n        </Tooltip>\n      </div>\n    </li>\n  );\n};\n"],"names":["HvHorizontalScrollListItem","props","id","className","classes","classesProp","selected","children","onClick","onKeyDown","tooltipWrapper","others","useDefaultProps","cx","useClasses","variant","labelId","setId","buttonId","Tooltip","root","button","text"],"mappings":";;;;;AAmCaA,MAAAA,6BAA6BA,CACxCC,UACG;AACG,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,8BAA8BX,KAAK;AACjD,QAAA;AAAA,IAAEG;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AACxCU,QAAAA,UAAUT,WAAW,UAAU;AAC/BU,QAAAA,UAAUC,MAAMf,IAAI,OAAO;AAC3BgB,QAAAA,WAAWD,MAAMf,IAAI,QAAQ;AACnC,QAAMiB,UAAUT;AAEhB,SACG,oBAAA,MAAA,EAAG,IAAQ,WAAWG,GAAGT,QAAQgB,MAAMjB,SAAS,GAAG,gBAAcG,UAChE,UAAA,oBAAC,OACC,EAAA,IAAIY,UACJ,MAAK,UACL,UAAU,GACV,SACA,WACA,WAAWd,QAAQiB,QACnB,mBAAiBL,SACbL,GAAAA,QAEJ,UAAA,oBAAC,WACC,IAAIK,SACJ,WAAWH,GAAGT,QAAQkB,MAAM;AAAA,IAAE,CAAClB,QAAQE,QAAQ,GAAGA;AAAAA,EAAU,CAAA,GAC5D,SAECC,SACH,CAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}

package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js

@@ -13,18 +13,18 @@ const {
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
-    height: theme.scrollTo.horizontal.buttonHeight,
+    height: "48px",
     cursor: "pointer",
-    borderBottom: theme.scrollTo.horizontal.buttonBottomBorder,
+    borderBottom: "none",
     "&:hover": {
-      backgroundColor: theme.scrollTo.horizontal.buttonHoverBackgroundColor,
+      backgroundColor: "transparent",
       "& $notSelected": {
-        height: theme.scrollTo.dotHoverSize,
-        width: theme.scrollTo.dotHoverSize,
-        backgroundColor: theme.scrollTo.dotHoverColor
+        height: "6px",
+        width: "6px",
+        backgroundColor: theme.colors.secondary
       },
       "& $notSelectedRoot": {
-        backgroundColor: theme.scrollTo.dotHoverBackgroundColor
+        backgroundColor: theme.colors.containerBackgroundHover
       }
     },
     "&:focus": {
@@ -39,17 +39,17 @@ const {
     flexDirection: "column",
     alignItems: "center",
     justifyContent: "center",
-    height: theme.scrollTo.horizontal.buttonHeight,
-    borderBottom: theme.scrollTo.horizontal.buttonBottomBorder,
+    height: "48px",
+    borderBottom: "none",
     "& p": {
-      padding: theme.scrollTo.horizontal.textPadding,
-      maxWidth: theme.scrollTo.horizontal.textMaxWidth,
+      padding: "3px 10px",
+      maxWidth: "120px",
       textOverflow: "ellipsis",
       overflow: "hidden"
     }
   },
   selected: {
-    borderBottom: theme.scrollTo.horizontal.selectedButtonBottomBorder
+    borderBottom: "none"
   }
 });
 export {

package/dist/esm/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"HorizontalScrollListItem.styles.js","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvHorizontalScrollListItem\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: {\n    padding: \"10px 0\",\n  },\n  button: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: theme.scrollTo.horizontal.buttonHeight,\n    cursor: \"pointer\",\n    borderBottom: theme.scrollTo.horizontal.buttonBottomBorder,\n    \"&:hover\": {\n      backgroundColor: theme.scrollTo.horizontal.buttonHoverBackgroundColor,\n\n      \"& $notSelected\": {\n        height: theme.scrollTo.dotHoverSize,\n        width: theme.scrollTo.dotHoverSize,\n        backgroundColor: theme.scrollTo.dotHoverColor,\n      },\n\n      \"& $notSelectedRoot\": {\n        backgroundColor: theme.scrollTo.dotHoverBackgroundColor,\n      },\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  text: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    height: theme.scrollTo.horizontal.buttonHeight,\n    borderBottom: theme.scrollTo.horizontal.buttonBottomBorder,\n\n    \"& p\": {\n      padding: theme.scrollTo.horizontal.textPadding,\n      maxWidth: theme.scrollTo.horizontal.textMaxWidth,\n      textOverflow: \"ellipsis\",\n      overflow: \"hidden\",\n    },\n  },\n  selected: {\n    borderBottom: theme.scrollTo.horizontal.selectedButtonBottomBorder,\n  },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","root","padding","button","display","justifyContent","alignItems","height","theme","scrollTo","horizontal","buttonHeight","cursor","borderBottom","buttonBottomBorder","backgroundColor","buttonHoverBackgroundColor","dotHoverSize","width","dotHoverColor","dotHoverBackgroundColor","outline","outlineStyles","text","flexDirection","textPadding","maxWidth","textMaxWidth","textOverflow","overflow","selected","selectedButtonBottomBorder"],"mappings":";;;AAKA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IACJC,SAAS;AAAA,EACX;AAAA,EACAC,QAAQ;AAAA,IACNC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,QAAQC,MAAMC,SAASC,WAAWC;AAAAA,IAClCC,QAAQ;AAAA,IACRC,cAAcL,MAAMC,SAASC,WAAWI;AAAAA,IACxC,WAAW;AAAA,MACTC,iBAAiBP,MAAMC,SAASC,WAAWM;AAAAA,MAE3C,kBAAkB;AAAA,QAChBT,QAAQC,MAAMC,SAASQ;AAAAA,QACvBC,OAAOV,MAAMC,SAASQ;AAAAA,QACtBF,iBAAiBP,MAAMC,SAASU;AAAAA,MAClC;AAAA,MAEA,sBAAsB;AAAA,QACpBJ,iBAAiBP,MAAMC,SAASW;AAAAA,MAClC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJnB,SAAS;AAAA,IACToB,eAAe;AAAA,IACflB,YAAY;AAAA,IACZD,gBAAgB;AAAA,IAChBE,QAAQC,MAAMC,SAASC,WAAWC;AAAAA,IAClCE,cAAcL,MAAMC,SAASC,WAAWI;AAAAA,IAExC,OAAO;AAAA,MACLZ,SAASM,MAAMC,SAASC,WAAWe;AAAAA,MACnCC,UAAUlB,MAAMC,SAASC,WAAWiB;AAAAA,MACpCC,cAAc;AAAA,MACdC,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACRjB,cAAcL,MAAMC,SAASC,WAAWqB;AAAAA,EAC1C;AACF,CAAC;"}
+{"version":3,"file":"HorizontalScrollListItem.styles.js","sources":["../../../../../../src/components/ScrollTo/Horizontal/HorizontalScrollListItem/HorizontalScrollListItem.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"@core/utils/focusUtils\";\nimport { createClasses } from \"@core/utils/classes\";\n\nconst name = \"HvHorizontalScrollListItem\";\n\nexport const { staticClasses, useClasses } = createClasses(name, {\n  root: {\n    padding: \"10px 0\",\n  },\n  button: {\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    height: \"48px\",\n    cursor: \"pointer\",\n    borderBottom: \"none\",\n    \"&:hover\": {\n      backgroundColor: \"transparent\",\n\n      \"& $notSelected\": {\n        height: \"6px\",\n        width: \"6px\",\n        backgroundColor: theme.colors.secondary,\n      },\n\n      \"& $notSelectedRoot\": {\n        backgroundColor: theme.colors.containerBackgroundHover,\n      },\n    },\n    \"&:focus\": {\n      outline: \"none\",\n    },\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n  },\n  text: {\n    display: \"flex\",\n    flexDirection: \"column\",\n    alignItems: \"center\",\n    justifyContent: \"center\",\n    height: \"48px\",\n    borderBottom: \"none\",\n\n    \"& p\": {\n      padding: \"3px 10px\",\n      maxWidth: \"120px\",\n      textOverflow: \"ellipsis\",\n      overflow: \"hidden\",\n    },\n  },\n  selected: {\n    borderBottom: \"none\",\n  },\n});\n"],"names":["name","staticClasses","useClasses","createClasses","root","padding","button","display","justifyContent","alignItems","height","cursor","borderBottom","backgroundColor","width","theme","colors","secondary","containerBackgroundHover","outline","outlineStyles","text","flexDirection","maxWidth","textOverflow","overflow","selected"],"mappings":";;;AAKA,MAAMA,OAAO;AAEA,MAAA;AAAA,EAAEC;AAAAA,EAAeC;AAAW,IAAIC,cAAcH,MAAM;AAAA,EAC/DI,MAAM;AAAA,IACJC,SAAS;AAAA,EACX;AAAA,EACAC,QAAQ;AAAA,IACNC,SAAS;AAAA,IACTC,gBAAgB;AAAA,IAChBC,YAAY;AAAA,IACZC,QAAQ;AAAA,IACRC,QAAQ;AAAA,IACRC,cAAc;AAAA,IACd,WAAW;AAAA,MACTC,iBAAiB;AAAA,MAEjB,kBAAkB;AAAA,QAChBH,QAAQ;AAAA,QACRI,OAAO;AAAA,QACPD,iBAAiBE,MAAMC,OAAOC;AAAAA,MAChC;AAAA,MAEA,sBAAsB;AAAA,QACpBJ,iBAAiBE,MAAMC,OAAOE;AAAAA,MAChC;AAAA,IACF;AAAA,IACA,WAAW;AAAA,MACTC,SAAS;AAAA,IACX;AAAA,IACA,mBAAmB;AAAA,MACjB,GAAGC;AAAAA,IACL;AAAA,EACF;AAAA,EACAC,MAAM;AAAA,IACJd,SAAS;AAAA,IACTe,eAAe;AAAA,IACfb,YAAY;AAAA,IACZD,gBAAgB;AAAA,IAChBE,QAAQ;AAAA,IACRE,cAAc;AAAA,IAEd,OAAO;AAAA,MACLP,SAAS;AAAA,MACTkB,UAAU;AAAA,MACVC,cAAc;AAAA,MACdC,UAAU;AAAA,IACZ;AAAA,EACF;AAAA,EACAC,UAAU;AAAA,IACRd,cAAc;AAAA,EAChB;AACF,CAAC;"}