@hitachivantara/uikit-react-core 5.15.0 → 5.17.0

package/dist/cjs/components/QueryBuilder/QueryBuilder.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"QueryBuilder.cjs","sources":["../../../../src/components/QueryBuilder/QueryBuilder.tsx"],"sourcesContent":["import cloneDeep from \"lodash/cloneDeep\";\nimport isEqual from \"lodash/isEqual\";\nimport {\n  useContext,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n} from \"react\";\nimport { ConfirmationDialog } from \"./ConfirmationDialog\";\nimport { QueryBuilderContext } from \"./Context\";\nimport { HvQueryBuilderClasses } from \"./queryBuilderClasses\";\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\";\n\nexport interface HvQueryBuilderProps {\n  /**\n   * Override or extend the styles applied to the component.\n   * See CSS API tab for more details.\n   */\n  classes?: HvQueryBuilderClasses;\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\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 *\n * **PLEASE NOTE**: This component implementation is still a WIP. There might be breaking changes.\n */\nexport const HvQueryBuilder = ({\n  attributes,\n  query,\n  onChange,\n  operators,\n  combinators,\n  maxDepth = 1,\n  labels,\n  readOnly = false,\n  classes,\n}: HvQueryBuilderProps) => {\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","attributes","query","onChange","operators","combinators","maxDepth","labels","readOnly","classes","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","_jsxs","Provider","value","children","_jsx","RuleGroup","level","id","combinator","rules","ConfirmationDialog","isOpen","onConfirm","onCancel","title","dialog","dialogTitle","message","dialogMessage","confirmButtonLabel","dialogConfirm","cancelButtonLabel","dialogCancel","closeButtonTooltip","dialogCloseTooltip"],"mappings":"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"}
+{"version":3,"file":"QueryBuilder.cjs","sources":["../../../../src/components/QueryBuilder/QueryBuilder.tsx"],"sourcesContent":["import cloneDeep from \"lodash/cloneDeep\";\nimport isEqual from \"lodash/isEqual\";\n\nimport {\n  useContext,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { ExtractNames } from \"@core/utils\";\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 = Partial<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 = ({\n  attributes,\n  query,\n  onChange,\n  operators,\n  combinators,\n  maxDepth = 1,\n  labels,\n  readOnly = false,\n  classes,\n}: HvQueryBuilderProps) => {\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","attributes","query","onChange","operators","combinators","maxDepth","labels","readOnly","classes","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","_jsxs","Provider","value","children","_jsx","RuleGroup","level","id","combinator","rules","ConfirmationDialog","isOpen","onConfirm","onCancel","title","dialog","dialogTitle","message","dialogMessage","confirmButtonLabel","dialogConfirm","cancelButtonLabel","dialogCancel","closeButtonTooltip","dialogCloseTooltip"],"mappings":"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"}

package/dist/cjs/components/QueryBuilder/{RuleGroup/RuleGroup.styles.cjs → QueryBuilder.styles.cjs}

@@ -1,8 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const queryBuilderClasses = require("../queryBuilderClasses.cjs");
-const styles = {
+const classes = require("../../utils/classes.cjs");
+const {
+  useClasses,
+  staticClasses
+} = classes.createClasses("HvQueryBuilder", {
+  /** Styles applied to the component root class. */
   root: {
     position: "relative",
     padding: uikitStyles.theme.space.sm,
@@ -10,6 +14,15 @@ const styles = {
     marginBottom: 32,
     border: uikitStyles.theme.queryBuilder.border
   },
+  /** Styles applied to the top group container. */
+  topGroup: {
+    margin: uikitStyles.theme.space.sm,
+    backgroundColor: "transparent",
+    maxWidth: "100%",
+    minWidth: 740,
+    paddingBottom: uikitStyles.theme.queryBuilder.topGroupPaddingBottom
+  },
+  /** Styles applied to the sub group containers. */
   subGroup: {
     margin: "40px 14px 32px 20px",
     minHeight: 120,
@@ -25,7 +38,7 @@ const styles = {
       top: -38,
       left: uikitStyles.theme.queryBuilder.ruleSubGroupLeftConnectorPosition
     },
-    [`:not(.${queryBuilderClasses.default.topRulesContainer})>&:last-child::after`]: {
+    ":not($topRulesContainer)>&:last-child::after": {
       content: '""',
       position: "absolute",
       zIndex: 1,
@@ -36,48 +49,33 @@ const styles = {
       left: `calc(${uikitStyles.theme.space.sm} + 2)`
     }
   },
-  topGroup: {
-    margin: uikitStyles.theme.space.sm,
-    backgroundColor: "transparent",
-    maxWidth: "100%",
-    minWidth: 740,
-    paddingBottom: uikitStyles.theme.queryBuilder.topGroupPaddingBottom
-  },
+  /** Styles applied to the radio button+label topGroup when the radio button is disabled. */
   combinator: {
     minWidth: 80
   },
+  /** Styles applied to the multi-button combinator container on the top group. */
   topCombinator: {
     position: "absolute",
     top: `calc( -1 * ${uikitStyles.theme.space.sm})`,
     left: `calc( -1 * ${uikitStyles.theme.space.sm})`
   },
+  /** Styles applied to each combinator button. */
   combinatorButton: {},
-  actionButtonContainer: {
-    marginLeft: "auto",
-    "&>*": {
-      marginLeft: uikitStyles.theme.space.sm
-    }
-  },
-  topActionButtonContainer: {
-    position: "absolute",
-    bottom: uikitStyles.theme.queryBuilder.topActionButtonContainerBottom,
-    right: uikitStyles.theme.queryBuilder.topActionButtonContainerRight
-  },
-  buttonBackground: {
-    backgroundColor: uikitStyles.theme.colors.atmo2,
-    display: "inline-flex"
-  },
+  /** Styles applied to the remove button.  */
   removeButton: {},
+  /** Styles applied to the remove button on the top group. */
   topRemoveButton: {
     position: "absolute",
     top: -16,
     right: -16
   },
+  /** Styles applied to the remove button when disabled on the top group. */
   topRemoveButtonDisabled: {
     backgroundColor: uikitStyles.theme.colors.atmo2
   },
+  /** Styles applied to the rules container. */
   rulesContainer: {},
-  topRulesContainer: {},
+  /** Styles applied to the sub rules container. */
   subRulesContainer: {
     borderLeft: uikitStyles.theme.queryBuilder.border,
     marginLeft: uikitStyles.theme.space.sm,
@@ -87,7 +85,28 @@ const styles = {
     position: "relative",
     left: uikitStyles.theme.queryBuilder.ruleSubGroupContainerLeftConnectorPosition,
     width: "100%"
+  },
+  /** Styles applied to the action button container. */
+  actionButtonContainer: {
+    marginLeft: "auto",
+    "&>*": {
+      marginLeft: uikitStyles.theme.space.sm
+    }
+  },
+  /** Styles applied to the top action button container. */
+  topActionButtonContainer: {
+    position: "absolute",
+    bottom: uikitStyles.theme.queryBuilder.topActionButtonContainerBottom,
+    right: uikitStyles.theme.queryBuilder.topActionButtonContainerRight
+  },
+  /** Styles applied to the top rules container. */
+  topRulesContainer: {},
+  /** Styles applied to the background of buttons to remove transparency */
+  buttonBackground: {
+    backgroundColor: uikitStyles.theme.colors.atmo2,
+    display: "inline-flex"
   }
-};
-exports.styles = styles;
-//# sourceMappingURL=RuleGroup.styles.cjs.map
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
+//# sourceMappingURL=QueryBuilder.styles.cjs.map

package/dist/cjs/components/QueryBuilder/QueryBuilder.styles.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryBuilder.styles.cjs","sources":["../../../../src/components/QueryBuilder/QueryBuilder.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\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":";;;;AAGa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAAc,kBAAkB;AAAA;AAAA,EAE3EC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,SAASC,YAAAA,MAAMC,MAAMC;AAAAA,IACrBC,WAAW;AAAA,IACXC,cAAc;AAAA,IACdC,QAAQL,YAAAA,MAAMM,aAAaD;AAAAA,EAC7B;AAAA;AAAA,EAEAE,UAAU;AAAA,IACRC,QAAQR,YAAAA,MAAMC,MAAMC;AAAAA,IACpBO,iBAAiB;AAAA,IACjBC,UAAU;AAAA,IACVC,UAAU;AAAA,IACVC,eAAeZ,YAAAA,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,YAAAA,MAAMM,aAAaD;AAAAA,MACjCgB,YAAYrB,YAAAA,MAAMM,aAAaD;AAAAA,MAE/BiB,KAAK;AAAA,MACLC,MAAMvB,YAAAA,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,YAAAA,MAAMM,aAAaD;AAAAA,MAE/BiB,KAAK;AAAA,MACLC,MAAO,QAAOvB,YAAAA,MAAMC,MAAMC;AAAAA,IAC5B;AAAA,EACF;AAAA;AAAA,EAEAuB,YAAY;AAAA,IAAEd,UAAU;AAAA,EAAG;AAAA;AAAA,EAE3Be,eAAe;AAAA,IACb5B,UAAU;AAAA,IACVwB,KAAM,cAAatB,YAAAA,MAAMC,MAAMC;AAAAA,IAC/BqB,MAAO,cAAavB,YAAAA,MAAMC,MAAMC;AAAAA,EAClC;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,YAAAA,MAAMgC,OAAOC;AAAAA,EAAM;AAAA;AAAA,EAE/DC,gBAAgB,CAAC;AAAA;AAAA,EAEjBC,mBAAmB;AAAA,IACjBd,YAAYrB,YAAAA,MAAMM,aAAaD;AAAAA,IAC/B+B,YAAYpC,YAAAA,MAAMC,MAAMC;AAAAA,IACxBE,cAAcJ,YAAAA,MAAMC,MAAMoC;AAAAA,IAC1BC,aAAatC,YAAAA,MAAMC,MAAMC;AAAAA,IACzBqC,YAAY;AAAA,IACZzC,UAAU;AAAA,IACVyB,MAAMvB,YAAAA,MAAMM,aAAakC;AAAAA,IACzBtB,OAAO;AAAA,EACT;AAAA;AAAA,EAEAuB,uBAAuB;AAAA,IACrBL,YAAY;AAAA,IAEZ,OAAO;AAAA,MACLA,YAAYpC,YAAAA,MAAMC,MAAMC;AAAAA,IAC1B;AAAA,EACF;AAAA;AAAA,EAEAwC,0BAA0B;AAAA,IACxB5C,UAAU;AAAA,IACV6C,QAAQ3C,YAAAA,MAAMM,aAAasC;AAAAA,IAC3Bd,OAAO9B,YAAAA,MAAMM,aAAauC;AAAAA,EAC5B;AAAA;AAAA,EAEAC,mBAAmB,CAAC;AAAA;AAAA,EAEpBC,kBAAkB;AAAA,IAChBtC,iBAAiBT,YAAAA,MAAMgC,OAAOC;AAAAA,IAC9Be,SAAS;AAAA,EACX;AACF,CAAC;;;"}

package/dist/cjs/components/QueryBuilder/Rule/Rule.cjs

@@ -1,12 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const react = require("@emotion/react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const material = require("@mui/material");
 const React = require("react");
 const Context = require("../Context.cjs");
 const Rule_styles = require("./Rule.styles.cjs");
-const ruleClasses = require("./ruleClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const withTooltip = require("../../../hocs/withTooltip.cjs");
 const Grid = require("../../Grid/Grid.cjs");
@@ -23,6 +21,10 @@ const Rule = ({
   disabled,
   isInvalid
 }) => {
+  const {
+    classes,
+    cx
+  } = Rule_styles.useClasses();
   const context = React.useContext(Context.QueryBuilderContext);
   const theme = material.useTheme();
   const isMdDown = material.useMediaQuery(theme.breakpoints.down("md"));
@@ -45,65 +47,62 @@ const Rule = ({
   }, [attribute, attributes, combinator, operators]);
   const shouldShowValueInput = operator !== "Empty" && operator !== "IsNotEmpty";
   const DeleteIcon = withTooltip.default(() => /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Delete, {}), labels.rule.delete.tooltip, "bottom");
-  return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
-    children: ({
-      css,
-      cx
-    }) => /* @__PURE__ */ jsxRuntime.jsxs(Grid.HvGrid, {
-      container: true,
-      className: cx(ruleClasses.default.root, css(Rule_styles.styles.root), isMdDown ? cx(ruleClasses.default.isMdDown, css(Rule_styles.styles.isMdDown)) : ""),
-      spacing: 0,
-      wrap: "nowrap",
-      children: [/* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, {
-        item: true,
-        xs: 2,
-        lg: 3,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Attribute.Attribute, {
-          attribute,
-          id,
-          disabled,
-          isInvalid
-        })
-      }), attribute != null && availableOperators > 0 && /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, {
-        item: true,
-        xs: 2,
-        lg: 3,
-        children: /* @__PURE__ */ jsxRuntime.jsx(Operator.Operator, {
-          id,
-          combinator,
-          attribute,
-          operator
-        })
-      }), attribute != null && (operator != null || availableOperators === 0) && /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, {
-        item: true,
-        xs: true,
-        children: shouldShowValueInput && /* @__PURE__ */ jsxRuntime.jsx(Value.Value, {
-          attribute,
-          id,
-          operator,
-          value
-        })
-      }), /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, {
-        item: true,
-        className: cx(ruleClasses.default.actionsContainer, css(Rule_styles.styles.actionsContainer)),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
-          icon: true,
-          "aria-label": labels.rule.delete.ariaLabel,
-          onClick: () => {
-            askAction({
-              actions: [{
-                type: "remove-node",
-                id
-              }],
-              dialog: labels.rule.delete
-            });
-          },
-          disabled: readOnly,
-          variant: "secondaryGhost",
-          children: /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon, {})
-        })
-      })]
-    })
+  return /* @__PURE__ */ jsxRuntime.jsxs(Grid.HvGrid, {
+    container: true,
+    className: cx(classes.root, {
+      [classes.isMdDown]: isMdDown
+    }),
+    spacing: 0,
+    wrap: "nowrap",
+    children: [/* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, {
+      item: true,
+      xs: 2,
+      lg: 3,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Attribute.Attribute, {
+        attribute,
+        id,
+        disabled,
+        isInvalid
+      })
+    }), attribute != null && availableOperators > 0 && /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, {
+      item: true,
+      xs: 2,
+      lg: 3,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Operator.Operator, {
+        id,
+        combinator,
+        attribute,
+        operator
+      })
+    }), attribute != null && (operator != null || availableOperators === 0) && /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, {
+      item: true,
+      xs: true,
+      children: shouldShowValueInput && /* @__PURE__ */ jsxRuntime.jsx(Value.Value, {
+        attribute,
+        id,
+        operator,
+        value
+      })
+    }), /* @__PURE__ */ jsxRuntime.jsx(Grid.HvGrid, {
+      item: true,
+      className: classes.actionsContainer,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Button.HvButton, {
+        icon: true,
+        "aria-label": labels.rule.delete.ariaLabel,
+        onClick: () => {
+          askAction({
+            actions: [{
+              type: "remove-node",
+              id
+            }],
+            dialog: labels.rule.delete
+          });
+        },
+        disabled: readOnly,
+        variant: "secondaryGhost",
+        children: /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon, {})
+      })
+    })]
   });
 };
 exports.Rule = Rule;

package/dist/cjs/components/QueryBuilder/Rule/Rule.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Rule.cjs","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.tsx"],"sourcesContent":["import { HvButton, HvGrid } from \"@core/components\";\nimport { withTooltip } from \"@core/hocs\";\nimport { ClassNames } from \"@emotion/react\";\nimport { Delete } from \"@hitachivantara/uikit-react-icons\";\nimport { useMediaQuery, useTheme } from \"@mui/material\";\nimport { useContext, useMemo } from \"react\";\nimport { QueryBuilderContext } from \"../Context\";\nimport { Attribute } from \"./Attribute\";\nimport { Operator } from \"./Operator\";\nimport { styles } from \"./Rule.styles\";\nimport ruleClasses from \"./ruleClasses\";\nimport { Value } from \"./Value\";\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 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    <ClassNames>\n      {({ css, cx }) => (\n        <HvGrid\n          container\n          className={cx(\n            ruleClasses.root,\n            css(styles.root),\n            isMdDown ? cx(ruleClasses.isMdDown, css(styles.isMdDown)) : \"\"\n          )}\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 &&\n            (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\n            item\n            className={cx(\n              ruleClasses.actionsContainer,\n              css(styles.actionsContainer)\n            )}\n          >\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              variant=\"secondaryGhost\"\n            >\n              <DeleteIcon />\n            </HvButton>\n          </HvGrid>\n        </HvGrid>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["Rule","id","combinator","attribute","operator","value","disabled","isInvalid","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","_jsx","Delete","rule","delete","tooltip","ClassNames","children","css","cx","HvGrid","container","className","ruleClasses","root","styles","spacing","wrap","xs","lg","Attribute","Operator","Value","actionsContainer","HvButton","icon","ariaLabel","onClick","actions","dialog","variant"],"mappings":"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"}
+{"version":3,"file":"Rule.cjs","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.tsx"],"sourcesContent":["import { HvButton, HvGrid } from \"@core/components\";\nimport { withTooltip } from \"@core/hocs\";\n\nimport { Delete } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useMediaQuery, useTheme } from \"@mui/material\";\n\nimport { useContext, useMemo } from \"react\";\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          variant=\"secondaryGhost\"\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","_jsx","Delete","rule","delete","tooltip","HvGrid","container","className","root","spacing","wrap","children","xs","lg","Attribute","Operator","Value","actionsContainer","HvButton","icon","ariaLabel","onClick","actions","dialog","variant"],"mappings":"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"}

package/dist/cjs/components/QueryBuilder/Rule/Rule.styles.cjs

@@ -1,8 +1,12 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const queryBuilderClasses = require("../queryBuilderClasses.cjs");
-const styles = {
+const QueryBuilder_styles = require("../QueryBuilder.styles.cjs");
+const classes = require("../../../utils/classes.cjs");
+const {
+  useClasses,
+  staticClasses
+} = classes.createClasses("HvQueryBuilder-Rule", {
   root: {
     position: "relative",
     marginTop: uikitStyles.theme.space.xs,
@@ -25,7 +29,7 @@ const styles = {
       top: 0,
       left: uikitStyles.theme.queryBuilder.ruleLeftConnectorPosition
     },
-    [`:not(.${queryBuilderClasses.default.topRulesContainer})>&:last-child::after`]: {
+    [`:not(.${QueryBuilder_styles.staticClasses.topRulesContainer})>&:last-child::after`]: {
       content: '""',
       position: "absolute",
       zIndex: 1,
@@ -48,6 +52,7 @@ const styles = {
       marginRight: `calc(${uikitStyles.theme.space.md} / 2)`
     }
   }
-};
-exports.styles = styles;
+});
+exports.staticClasses = staticClasses;
+exports.useClasses = useClasses;
 //# sourceMappingURL=Rule.styles.cjs.map

package/dist/cjs/components/QueryBuilder/Rule/Rule.styles.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Rule.styles.cjs","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.styles.tsx"],"sourcesContent":["import { CSSInterpolation } from \"@emotion/serialize\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport queryBuilderClasses from \"../queryBuilderClasses\";\nimport { HvRuleClasses } from \"./ruleClasses\";\n\nexport const styles: Partial<Record<keyof HvRuleClasses, CSSInterpolation>> = {\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"],"names":["styles","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":";;;;AAKO,MAAMA,SAAiE;AAAA,EAC5EC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,WAAWC,YAAAA,MAAMC,MAAMC;AAAAA,IAEvBC,WAAW;AAAA,IAEX,0BAA0B;AAAA,MACxBC,aAAaJ,YAAAA,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,YAAAA,MAAMU,aAAaC;AAAAA,MAC1BC,QAAQZ,YAAAA,MAAMU,aAAaG;AAAAA,MAE3BC,cAAcd,YAAAA,MAAMU,aAAaK;AAAAA,MACjCC,YAAYhB,YAAAA,MAAMU,aAAaK;AAAAA,MAE/BE,KAAK;AAAA,MACLC,MAAMlB,YAAAA,MAAMU,aAAaS;AAAAA,IAC3B;AAAA,IACA,CAAE,SAAQC,oBAAAA,QAAoBC,wCAAwC,GAAG;AAAA,MACvEd,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAOT,YAAAA,MAAMU,aAAaC;AAAAA,MAC1BC,QAAQ;AAAA,MAERI,YAAYhB,YAAAA,MAAMU,aAAaK;AAAAA,MAE/BE,KAAK;AAAA,MACLC,MAAMlB,YAAAA,MAAMU,aAAaS;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAG,kBAAkB;AAAA,IAChBC,YAAY;AAAA,IACZxB,WAAWC,YAAAA,MAAMU,aAAac;AAAAA,IAE9B,uBAAuB;AAAA,MACrBpB,aAAaJ,YAAAA,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAuB,UAAU;AAAA,IACR,0BAA0B;AAAA,MACxBrB,aAAc,QAAOJ,YAAAA,MAAMC,MAAMI;AAAAA,IACnC;AAAA,EACF;AACF;;"}
+{"version":3,"file":"Rule.styles.cjs","sources":["../../../../../src/components/QueryBuilder/Rule/Rule.styles.tsx"],"sourcesContent":["import { createClasses } from \"@core/utils\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\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":";;;;;AAIa,MAAA;AAAA,EAAEA;AAAAA,EAAYC;AAAc,IAAIC,QAAAA,cAC3C,uBACA;AAAA,EACEC,MAAM;AAAA,IACJC,UAAU;AAAA,IACVC,WAAWC,YAAAA,MAAMC,MAAMC;AAAAA,IAEvBC,WAAW;AAAA,IAEX,0BAA0B;AAAA,MACxBC,aAAaJ,YAAAA,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,YAAAA,MAAMU,aAAaC;AAAAA,MAC1BC,QAAQZ,YAAAA,MAAMU,aAAaG;AAAAA,MAE3BC,cAAcd,YAAAA,MAAMU,aAAaK;AAAAA,MACjCC,YAAYhB,YAAAA,MAAMU,aAAaK;AAAAA,MAE/BE,KAAK;AAAA,MACLC,MAAMlB,YAAAA,MAAMU,aAAaS;AAAAA,IAC3B;AAAA,IACA,CAAE,SAAQC,oBAAAA,cAAoBC,wCAAwC,GAAG;AAAA,MACvEd,SAAS;AAAA,MACTT,UAAU;AAAA,MACVU,QAAQ;AAAA,MAERC,OAAOT,YAAAA,MAAMU,aAAaC;AAAAA,MAC1BC,QAAQ;AAAA,MAERI,YAAYhB,YAAAA,MAAMU,aAAaK;AAAAA,MAE/BE,KAAK;AAAA,MACLC,MAAMlB,YAAAA,MAAMU,aAAaS;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAG,kBAAkB;AAAA,IAChBC,YAAY;AAAA,IACZxB,WAAWC,YAAAA,MAAMU,aAAac;AAAAA,IAE9B,uBAAuB;AAAA,MACrBpB,aAAaJ,YAAAA,MAAMC,MAAMC;AAAAA,IAC3B;AAAA,EACF;AAAA,EACAuB,UAAU;AAAA,IACR,0BAA0B;AAAA,MACxBrB,aAAc,QAAOJ,YAAAA,MAAMC,MAAMI;AAAAA,IACnC;AAAA,EACF;AACF,CACF;;;"}