@hitachivantara/uikit-react-core 5.59.0 → 5.61.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/BaseCheckBox/BaseCheckBox.cjs +16 -13
- package/dist/cjs/BaseCheckBox/BaseCheckBox.cjs.map +1 -1
- package/dist/cjs/BaseCheckBox/BaseCheckBox.styles.cjs +54 -6
- package/dist/cjs/BaseCheckBox/BaseCheckBox.styles.cjs.map +1 -1
- package/dist/cjs/BaseCheckBox/icons.cjs +21 -0
- package/dist/cjs/BaseCheckBox/icons.cjs.map +1 -0
- package/dist/cjs/CheckBox/CheckBox.cjs +4 -1
- package/dist/cjs/CheckBox/CheckBox.cjs.map +1 -1
- package/dist/cjs/CheckBox/CheckBox.styles.cjs +4 -1
- package/dist/cjs/CheckBox/CheckBox.styles.cjs.map +1 -1
- package/dist/cjs/List/List.styles.cjs +1 -1
- package/dist/cjs/List/List.styles.cjs.map +1 -1
- package/dist/cjs/LoadingContainer/LoadingContainer.cjs +37 -0
- package/dist/cjs/LoadingContainer/LoadingContainer.cjs.map +1 -0
- package/dist/cjs/LoadingContainer/LoadingContainer.styles.cjs +20 -0
- package/dist/cjs/LoadingContainer/LoadingContainer.styles.cjs.map +1 -0
- package/dist/cjs/QueryBuilder/Context.cjs +1 -0
- package/dist/cjs/QueryBuilder/Context.cjs.map +1 -1
- package/dist/cjs/QueryBuilder/QueryBuilder.cjs +39 -18
- package/dist/cjs/QueryBuilder/QueryBuilder.cjs.map +1 -1
- package/dist/cjs/QueryBuilder/RuleGroup/RuleGroup.cjs.map +1 -1
- package/dist/cjs/QueryBuilder/types.cjs.map +1 -1
- package/dist/cjs/QueryBuilder/utils/index.cjs +29 -5
- package/dist/cjs/QueryBuilder/utils/index.cjs.map +1 -1
- package/dist/cjs/QueryBuilder/utils/reducer.cjs +6 -2
- package/dist/cjs/QueryBuilder/utils/reducer.cjs.map +1 -1
- package/dist/cjs/Table/hooks/useRowState.cjs +7 -0
- package/dist/cjs/Table/hooks/useRowState.cjs.map +1 -0
- package/dist/cjs/hooks/useControlled.cjs.map +1 -1
- package/dist/cjs/index.cjs +6 -0
- package/dist/cjs/index.cjs.map +1 -1
- package/dist/cjs/types/generic.cjs.map +1 -1
- package/dist/esm/BaseCheckBox/BaseCheckBox.js +13 -10
- package/dist/esm/BaseCheckBox/BaseCheckBox.js.map +1 -1
- package/dist/esm/BaseCheckBox/BaseCheckBox.styles.js +54 -6
- package/dist/esm/BaseCheckBox/BaseCheckBox.styles.js.map +1 -1
- package/dist/esm/BaseCheckBox/icons.js +21 -0
- package/dist/esm/BaseCheckBox/icons.js.map +1 -0
- package/dist/esm/CheckBox/CheckBox.js +4 -1
- package/dist/esm/CheckBox/CheckBox.js.map +1 -1
- package/dist/esm/CheckBox/CheckBox.styles.js +4 -1
- package/dist/esm/CheckBox/CheckBox.styles.js.map +1 -1
- package/dist/esm/List/List.styles.js +1 -1
- package/dist/esm/List/List.styles.js.map +1 -1
- package/dist/esm/LoadingContainer/LoadingContainer.js +38 -0
- package/dist/esm/LoadingContainer/LoadingContainer.js.map +1 -0
- package/dist/esm/LoadingContainer/LoadingContainer.styles.js +20 -0
- package/dist/esm/LoadingContainer/LoadingContainer.styles.js.map +1 -0
- package/dist/esm/QueryBuilder/Context.js +1 -0
- package/dist/esm/QueryBuilder/Context.js.map +1 -1
- package/dist/esm/QueryBuilder/QueryBuilder.js +40 -19
- package/dist/esm/QueryBuilder/QueryBuilder.js.map +1 -1
- package/dist/esm/QueryBuilder/RuleGroup/RuleGroup.js.map +1 -1
- package/dist/esm/QueryBuilder/types.js.map +1 -1
- package/dist/esm/QueryBuilder/utils/index.js +30 -6
- package/dist/esm/QueryBuilder/utils/index.js.map +1 -1
- package/dist/esm/QueryBuilder/utils/reducer.js +6 -2
- package/dist/esm/QueryBuilder/utils/reducer.js.map +1 -1
- package/dist/esm/Table/hooks/useRowState.js +7 -0
- package/dist/esm/Table/hooks/useRowState.js.map +1 -0
- package/dist/esm/hooks/useControlled.js.map +1 -1
- package/dist/esm/index.js +102 -96
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/types/generic.js.map +1 -1
- package/dist/types/index.d.ts +241 -149
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"QueryBuilder.cjs","sources":["../../../src/QueryBuilder/QueryBuilder.tsx"],"sourcesContent":["import { useEffect, useMemo, useReducer, useRef, useState } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { isEqual } from \"../utils/helpers\";\n\nimport { ConfirmationDialog } from \"./ConfirmationDialog\";\nimport {\n HvQueryBuilderProvider,\n defaultCombinators,\n defaultLabels,\n defaultOperators,\n} from \"./Context\";\nimport { RuleGroup } from \"./RuleGroup\";\nimport {\n AskAction,\n HvQueryBuilderAttribute,\n HvQueryBuilderQuery,\n HvQueryBuilderLabels,\n HvQueryBuilderQueryCombinator,\n HvQueryBuilderQueryOperator,\n HvQueryBuilderChangedQuery,\n HvQueryBuilderRenderers,\n defaultRendererKey,\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 /** The query attribute types. */\n attributes?: Record<string, HvQueryBuilderAttribute>;\n /** The query rules operators by attribute type and combinator. */\n operators?: Record<string, HvQueryBuilderQueryOperator[]>;\n /** The query combinators operands. */\n combinators?: HvQueryBuilderQueryCombinator[];\n /** The initial query representation. */\n query?: HvQueryBuilderQuery;\n /** Callback fired when query changes. */\n onChange?: (value: HvQueryBuilderChangedQuery) => void;\n /** Max depth of nested query groups. */\n maxDepth?: number;\n /** Object containing all the labels. */\n labels?: HvQueryBuilderLabels;\n /** Whether the query builder is in read-only mode. */\n readOnly?: boolean;\n /**\n * Operators that should use the empty value renderer when selected.\n *\n * When one of the listed operators is selected, the rule value is reset and an empty component is rendered.\n * This property takes priority over `renderers`.\n *\n * @default [\"Empty\", \"IsNotEmpty\"]\n * */\n emptyRenderer?: string[];\n /** Custom renderers for the rules' value. */\n renderers?: HvQueryBuilderRenderers;\n /** Whether to opt-out of the confirmation dialogs shown before removing rules and rule groups. @default false. */\n disableConfirmation?: boolean;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvQueryBuilderClasses;\n}\n\n// TODO - v6\n// - uncontrolled vs controlled: users should be able to control the state\n// - \"query\" renamed to \"initialQuery\" and \"query\" used to control the state\n// - \"query\" provided with ids by the user but removed through \"onChange\"\n// - \"range\", \"Empty\", and \"IsNotEmpty\" operators with internal/built-in logic\n\n/**\n * This 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 * Take a look at the [usage page](https://lumada-design.github.io/uikit/master/?path=/docs/widgets-query-builder-usage--docs) to learn more about this component.\n */\nexport const HvQueryBuilder = (props: HvQueryBuilderProps) => {\n const {\n attributes,\n renderers,\n query,\n onChange,\n disableConfirmation = false,\n operators = defaultOperators,\n combinators = defaultCombinators,\n maxDepth = 1,\n labels = defaultLabels,\n readOnly = false,\n emptyRenderer = [\"Empty\", \"IsNotEmpty\"],\n classes: classesProp,\n } = useDefaultProps(\"HvQueryBuilder\", props);\n\n if (\n import.meta.env.DEV &&\n [\n Object.values(attributes || {}).map(({ type }) => type),\n Object.values(operators || {})\n .map((ops) => ops.map(({ operator }) => operator))\n .flat(),\n ]\n .flat()\n ?.find((key) => key === defaultRendererKey)\n ) {\n // eslint-disable-next-line no-console\n console.error(\n `${defaultRendererKey} is a restricted key and shouldn't be used as an attribute or operator type. Update the key to avoid unexpected behaviors.`\n );\n }\n\n const { classes } = useClasses(classesProp);\n\n const currentAttributes = useRef<HvQueryBuilderProps[\"attributes\"] | null>(\n null\n );\n\n const initialQuery = useRef(query ?? emptyGroup());\n\n const [pendingAction, setPendingAction] = useState<AskAction>();\n const [prevState, setPrevState] = useState(initialQuery.current);\n const [initialState, setInitialState] = useState(true);\n\n const [state, dispatchAction] = useReducer(\n reducer,\n // Deep clone is needed to make sure that the \"query\" prop and \"initialQuery\" are not mutated\n structuredClone(initialQuery.current)\n );\n\n const value = useMemo(\n () => ({\n dispatchAction,\n askAction: setPendingAction,\n attributes,\n operators,\n combinators,\n maxDepth,\n labels,\n initialTouched: initialState,\n readOnly,\n renderers,\n disableConfirmation,\n emptyRenderer,\n }),\n [\n attributes,\n operators,\n combinators,\n maxDepth,\n labels,\n readOnly,\n initialState,\n renderers,\n disableConfirmation,\n emptyRenderer,\n ]\n );\n\n // Keep track of attributes\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 certainly 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 (!isEqual(state, prevState)) {\n if (initialState) {\n setInitialState(false);\n }\n\n onChange?.(clearNodeIds(state) as HvQueryBuilderChangedQuery);\n setPrevState(structuredClone(state));\n }\n }, [initialState, onChange, prevState, state]);\n\n const handleConfirm = () => {\n if (pendingAction) {\n setPendingAction(undefined);\n pendingAction.actions.forEach((action) => dispatchAction(action));\n }\n };\n\n const handleCancel = () => {\n setPendingAction(undefined);\n };\n\n return (\n <HvQueryBuilderProvider value={value}>\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={handleConfirm}\n onCancel={handleCancel}\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 </HvQueryBuilderProvider>\n );\n};\n"],"names":["defaultOperators","defaultCombinators","defaultLabels","useDefaultProps","useClasses","useRef","emptyGroup","useState","useReducer","reducer","useMemo","useEffect","isEqual","clearNodeIds","jsxs","HvQueryBuilderProvider","jsx","RuleGroup","ConfirmationDialog"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"QueryBuilder.cjs","sources":["../../../src/QueryBuilder/QueryBuilder.tsx"],"sourcesContent":["import { useEffect, useMemo, useReducer, useRef, useState } from \"react\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { isEqual } from \"../utils/helpers\";\nimport { ConfirmationDialog } from \"./ConfirmationDialog\";\nimport {\n HvQueryBuilderProvider,\n defaultCombinators,\n defaultLabels,\n defaultOperators,\n} from \"./Context\";\nimport { RuleGroup } from \"./RuleGroup\";\nimport {\n AskAction,\n HvQueryBuilderAttribute,\n HvQueryBuilderQuery,\n HvQueryBuilderLabels,\n HvQueryBuilderQueryCombinator,\n HvQueryBuilderQueryOperator,\n HvQueryBuilderRenderers,\n defaultRendererKey,\n} from \"./types\";\nimport { clearNodeIds, emptyGroup, setNodeIds } from \"./utils\";\nimport reducer from \"./utils/reducer\";\nimport { useClasses, staticClasses } from \"./QueryBuilder.styles\";\nimport { useControlled } from \"../hooks/useControlled\";\n\nexport { staticClasses as queryBuilderClasses };\n\nexport type HvQueryBuilderClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvQueryBuilderProps {\n /** The query attribute types. */\n attributes?: Record<string, HvQueryBuilderAttribute>;\n /** The query rules operators by attribute type and combinator. */\n operators?: Record<string, HvQueryBuilderQueryOperator[]>;\n /** The query combinators operands. */\n combinators?: HvQueryBuilderQueryCombinator[];\n /** The query when the component is controlled. */\n value?: HvQueryBuilderQuery;\n /** The initial query when the component is uncontrolled. */\n defaultValue?: HvQueryBuilderQuery;\n /**\n * The initial query when the component is uncontrolled.\n *\n * @deprecated Use `defaultValue` instead.\n * */\n query?: HvQueryBuilderQuery; // TODO - remove in v6\n /** Callback fired when the query changes. */\n onChange?: (value: HvQueryBuilderQuery) => void;\n /** Max depth of nested query groups. */\n maxDepth?: number;\n /** Object containing all the labels. */\n labels?: HvQueryBuilderLabels;\n /** Whether the query builder is in read-only mode. */\n readOnly?: boolean;\n /**\n * Operators that should use the empty value renderer when selected.\n *\n * When one of the listed operators is selected, the rule value is reset and an empty component is rendered.\n * This property takes priority over `renderers`.\n *\n * @default [\"Empty\", \"IsNotEmpty\"]\n * */\n emptyRenderer?: string[];\n /** Custom renderers for the rules' value. */\n renderers?: HvQueryBuilderRenderers;\n /** Whether to opt-out of the confirmation dialogs shown before removing rules and rule groups. @default false. */\n disableConfirmation?: boolean;\n /** A Jss Object used to override or extend the styles applied. */\n classes?: HvQueryBuilderClasses;\n}\n\n// TODO - v6\n// - \"range\", \"Empty\", and \"IsNotEmpty\" operators with internal/built-in logic\n\n// Notes:\n// Deep clone is needed throughout the component to avoid undesired mutations in props, state, and ref values\n\n/**\n * This 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 * Take a look at the [usage page](https://lumada-design.github.io/uikit/master/?path=/docs/widgets-query-builder-usage--docs) to learn more about this component.\n */\nexport const HvQueryBuilder = (props: HvQueryBuilderProps) => {\n const {\n attributes,\n renderers,\n query: queryProp, // TODO - remove in v6\n value,\n defaultValue,\n onChange,\n disableConfirmation = false,\n operators = defaultOperators,\n combinators = defaultCombinators,\n maxDepth = 1,\n labels = defaultLabels,\n readOnly = false,\n emptyRenderer = [\"Empty\", \"IsNotEmpty\"],\n classes: classesProp,\n } = useDefaultProps(\"HvQueryBuilder\", props);\n\n if (\n import.meta.env.DEV &&\n [\n Object.values(attributes || {}).map(({ type }) => type),\n Object.values(operators || {})\n .map((ops) => ops.map(({ operator }) => operator))\n .flat(),\n ]\n .flat()\n ?.find((key) => key === defaultRendererKey)\n ) {\n // eslint-disable-next-line no-console\n console.error(\n `${defaultRendererKey} is a restricted key and shouldn't be used as an attribute or operator type. Update the key to avoid unexpected behaviors.`\n );\n }\n\n const { classes } = useClasses(classesProp);\n\n const currentAttributes = useRef<HvQueryBuilderProps[\"attributes\"] | null>(\n null\n );\n\n const controlled = useRef(value != null);\n const initialQuery = useRef(\n value ?? defaultValue ?? queryProp ?? emptyGroup()\n );\n const [query, setQuery] = useControlled(value, initialQuery.current);\n const prevQuery = useRef(query);\n\n const [pendingAction, setPendingAction] = useState<AskAction>();\n const [initialState, setInitialState] = useState(true);\n\n const [state, dispatchAction] = useReducer(\n reducer,\n setNodeIds(structuredClone(initialQuery.current))\n );\n\n const contextValue = useMemo(\n () => ({\n dispatchAction,\n askAction: setPendingAction,\n attributes,\n operators,\n combinators,\n maxDepth,\n labels,\n initialTouched: initialState,\n readOnly,\n renderers,\n disableConfirmation,\n emptyRenderer,\n }),\n [\n attributes,\n operators,\n combinators,\n maxDepth,\n labels,\n readOnly,\n initialState,\n renderers,\n disableConfirmation,\n emptyRenderer,\n ]\n );\n\n // Keep track of attributes\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 certainly invalid, so reset it\n currentAttributes.current = attributes;\n dispatchAction({ type: \"reset-query\" });\n }\n }, [attributes]);\n\n useEffect(() => {\n // \"value\" prop was updated by user (when controlled)\n if (!isEqual(prevQuery.current, query)) {\n dispatchAction({\n type: \"set-query\",\n query: setNodeIds(structuredClone(query), state),\n });\n prevQuery.current = query;\n } else if (\n !isEqual(\n clearNodeIds(structuredClone(state)),\n clearNodeIds(structuredClone(query))\n )\n ) {\n setInitialState(false);\n\n // TODO - remove \"true\" from clearNodeIds in v6 (only keep else statement)\n // To avoid breaking changes, clearNodeIds will delete all ids provided by the user when uncontrolled\n // In the future if the user provides ids, it doesn't make sense to remove them with onChange\n if (!controlled.current) {\n onChange?.(\n clearNodeIds(structuredClone(state), true) as HvQueryBuilderQuery\n );\n } else {\n // When controlled, the ids provided by the user are not removed. Only the auto generated ones.\n onChange?.(clearNodeIds(structuredClone(state)) as HvQueryBuilderQuery);\n }\n\n prevQuery.current = state;\n // This will only run if uncontrolled\n setQuery(state);\n }\n }, [onChange, query, setQuery, state]);\n\n const handleConfirm = () => {\n if (pendingAction) {\n setPendingAction(undefined);\n pendingAction.actions.forEach((action) => dispatchAction(action));\n }\n };\n\n const handleCancel = () => {\n setPendingAction(undefined);\n };\n\n return (\n <HvQueryBuilderProvider value={contextValue}>\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={handleConfirm}\n onCancel={handleCancel}\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 </HvQueryBuilderProvider>\n );\n};\n"],"names":["defaultOperators","defaultCombinators","defaultLabels","useDefaultProps","useClasses","useRef","emptyGroup","useControlled","useState","useReducer","reducer","setNodeIds","useMemo","useEffect","isEqual","clearNodeIds","jsxs","HvQueryBuilderProvider","jsx","RuleGroup","ConfirmationDialog"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RuleGroup.cjs","sources":["../../../../src/QueryBuilder/RuleGroup/RuleGroup.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport { Add, Delete, Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"../../Button\";\nimport { HvEmptyState } from \"../../EmptyState\";\nimport { HvMultiButton } from \"../../MultiButton\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { Rule } from \"../Rule\";\nimport { useQueryBuilderContext } from \"../Context\";\nimport { useClasses } from \"../QueryBuilder.styles\";\nimport { HvQueryBuilderQuery, HvQueryBuilderQueryCombinator } from \"../types\";\nimport { HvIconButton } from \"../../IconButton\";\n\nexport interface RuleGroupProps {\n id: React.Key;\n level?: number;\n combinator?: string;\n rules?: HvQueryBuilderQuery[\"rules\"];\n classes?: ExtractNames<typeof useClasses>;\n}\n\nexport const RuleGroup = ({\n level = 0,\n id,\n combinator = \"and\",\n rules = [],\n classes: classesProp,\n}: RuleGroupProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const {\n dispatchAction,\n askAction,\n maxDepth,\n combinators,\n labels,\n readOnly,\n disableConfirmation,\n } = useQueryBuilderContext();\n\n const normalizedMaxDepth = maxDepth - 1;\n\n const actionButtons = (\n <>\n <div className={classes.buttonBackground}>\n <HvButton\n variant=\"secondarySubtle\"\n onClick={() => {\n dispatchAction({ type: \"add-rule\", id });\n }}\n disabled={readOnly}\n startIcon={<Add />}\n >\n {level === 0 && labels.query?.addRule?.label != null\n ? labels.query?.addRule?.label\n : labels.group.addRule.label}\n </HvButton>\n </div>\n {level <= normalizedMaxDepth && (\n <div className={classes.buttonBackground}>\n <HvButton\n variant=\"secondarySubtle\"\n onClick={() => {\n dispatchAction({ type: \"add-group\", id });\n }}\n disabled={readOnly}\n startIcon={<Add />}\n >\n {level === 0 && labels.query?.addGroup?.label != null\n ? labels.query?.addGroup?.label\n : labels.group.addGroup.label}\n </HvButton>\n </div>\n )}\n </>\n );\n\n const onClickCombinator = useCallback(\n (item: HvQueryBuilderQueryCombinator) => {\n dispatchAction({\n type: \"set-combinator\",\n id,\n combinator: item.operand,\n });\n },\n [dispatchAction, id]\n );\n\n return (\n <div\n className={cx(classes.root, {\n [classes.topGroup]: level === 0,\n [classes.subGroup]: level > 0,\n })}\n >\n <HvMultiButton\n className={cx(classes.combinator, classes.topCombinator)}\n disabled={readOnly}\n aria-disabled={readOnly}\n >\n {combinators?.map((item) => (\n <HvButton\n key={item.operand}\n className={classes.combinatorButton}\n selected={item.operand === combinator}\n onClick={() => item.operand && onClickCombinator(item)}\n disabled={readOnly}\n size=\"xs\"\n >\n {item.label}\n </HvButton>\n ))}\n </HvMultiButton>\n <div className={cx(classes.buttonBackground, classes.topRemoveButton)}>\n <HvIconButton\n className={classes.removeButton}\n onClick={() =>\n disableConfirmation\n ? dispatchAction({ type: \"remove-node\", id })\n : askAction({\n actions: [{ type: \"remove-node\", id }],\n dialog:\n level === 0 && labels.query?.delete != null\n ? labels.query.delete\n : labels.group.delete,\n })\n }\n title={\n (level === 0 && labels.query?.delete?.tooltip) ||\n labels.group.delete.tooltip ||\n (level === 0 && labels.query?.delete?.ariaLabel) ||\n labels.group.delete.ariaLabel\n }\n disabled={readOnly}\n >\n <Delete\n role=\"none\"\n className={cx({ [classes.topRemoveButtonDisabled]: readOnly })}\n />\n </HvIconButton>\n </div>\n {rules?.length > 0 && (\n <div\n className={cx(classes.rulesContainer, {\n [classes.subRulesContainer]: level > 0,\n [classes.topRulesContainer]: level === 0,\n })}\n >\n {rules.map((rule, index) => {\n if (\"combinator\" in rule) {\n return (\n <RuleGroup\n key={rule.id}\n level={level + 1}\n {...rule}\n id={rule.id}\n classes={classes}\n />\n );\n }\n\n const isInvalid =\n combinator === \"and\" &&\n rules.some((r, i) => {\n if (\"attribute\" in r) {\n if (\n r.attribute === rule.attribute &&\n r.id !== rule.id &&\n i < index\n ) {\n return true;\n }\n }\n return false;\n });\n\n return (\n <Rule\n key={rule.id}\n {...rule}\n isInvalid={isInvalid}\n id={rule.id}\n combinator={combinator}\n />\n );\n })}\n </div>\n )}\n {rules?.length === 0 && (\n <HvEmptyState\n title={labels.empty?.title}\n message={\n <>\n <HvTypography\n link\n component=\"button\"\n onClick={() => {\n dispatchAction({ type: \"add-rule\", id });\n }}\n className={classes.createConditionButton}\n disabled={readOnly}\n aria-disabled={readOnly}\n >\n {`${labels.empty?.createCondition}`}\n </HvTypography>\n {level <= normalizedMaxDepth && (\n <>\n {`${labels.empty?.spacer}`}\n <HvTypography\n link\n component=\"button\"\n onClick={() => {\n dispatchAction({ type: \"add-group\", id });\n }}\n className={classes.createGroupButton}\n disabled={readOnly}\n aria-disabled={readOnly}\n >\n {`${labels.empty?.createGroup}`}\n </HvTypography>\n </>\n )}\n </>\n }\n icon={<Info />}\n />\n )}\n <div\n className={cx(\n classes.actionButtonContainer,\n classes.topActionButtonContainer\n )}\n >\n {actionButtons}\n </div>\n </div>\n );\n};\n"],"names":["useClasses","useQueryBuilderContext","jsxs","Fragment","jsx","HvButton","Add","useCallback","HvMultiButton","HvIconButton","Delete","Rule","HvEmptyState","HvTypography","Info"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"RuleGroup.cjs","sources":["../../../../src/QueryBuilder/RuleGroup/RuleGroup.tsx"],"sourcesContent":["import { useCallback } from \"react\";\nimport { Add, Delete, Info } from \"@hitachivantara/uikit-react-icons\";\n\nimport { HvButton } from \"../../Button\";\nimport { HvEmptyState } from \"../../EmptyState\";\nimport { HvMultiButton } from \"../../MultiButton\";\nimport { HvTypography } from \"../../Typography\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { Rule } from \"../Rule\";\nimport { useQueryBuilderContext } from \"../Context\";\nimport { useClasses } from \"../QueryBuilder.styles\";\nimport { HvQueryBuilderQueryCombinator, Query } from \"../types\";\nimport { HvIconButton } from \"../../IconButton\";\n\nexport interface RuleGroupProps {\n id: React.Key;\n level?: number;\n combinator?: string;\n rules?: Query[\"rules\"];\n classes?: ExtractNames<typeof useClasses>;\n}\n\nexport const RuleGroup = ({\n level = 0,\n id,\n combinator = \"and\",\n rules = [],\n classes: classesProp,\n}: RuleGroupProps) => {\n const { classes, cx } = useClasses(classesProp);\n\n const {\n dispatchAction,\n askAction,\n maxDepth,\n combinators,\n labels,\n readOnly,\n disableConfirmation,\n } = useQueryBuilderContext();\n\n const normalizedMaxDepth = maxDepth - 1;\n\n const actionButtons = (\n <>\n <div className={classes.buttonBackground}>\n <HvButton\n variant=\"secondarySubtle\"\n onClick={() => {\n dispatchAction({ type: \"add-rule\", id });\n }}\n disabled={readOnly}\n startIcon={<Add />}\n >\n {level === 0 && labels.query?.addRule?.label != null\n ? labels.query?.addRule?.label\n : labels.group.addRule.label}\n </HvButton>\n </div>\n {level <= normalizedMaxDepth && (\n <div className={classes.buttonBackground}>\n <HvButton\n variant=\"secondarySubtle\"\n onClick={() => {\n dispatchAction({ type: \"add-group\", id });\n }}\n disabled={readOnly}\n startIcon={<Add />}\n >\n {level === 0 && labels.query?.addGroup?.label != null\n ? labels.query?.addGroup?.label\n : labels.group.addGroup.label}\n </HvButton>\n </div>\n )}\n </>\n );\n\n const onClickCombinator = useCallback(\n (item: HvQueryBuilderQueryCombinator) => {\n dispatchAction({\n type: \"set-combinator\",\n id,\n combinator: item.operand,\n });\n },\n [dispatchAction, id]\n );\n\n return (\n <div\n className={cx(classes.root, {\n [classes.topGroup]: level === 0,\n [classes.subGroup]: level > 0,\n })}\n >\n <HvMultiButton\n className={cx(classes.combinator, classes.topCombinator)}\n disabled={readOnly}\n aria-disabled={readOnly}\n >\n {combinators?.map((item) => (\n <HvButton\n key={item.operand}\n className={classes.combinatorButton}\n selected={item.operand === combinator}\n onClick={() => item.operand && onClickCombinator(item)}\n disabled={readOnly}\n size=\"xs\"\n >\n {item.label}\n </HvButton>\n ))}\n </HvMultiButton>\n <div className={cx(classes.buttonBackground, classes.topRemoveButton)}>\n <HvIconButton\n className={classes.removeButton}\n onClick={() =>\n disableConfirmation\n ? dispatchAction({ type: \"remove-node\", id })\n : askAction({\n actions: [{ type: \"remove-node\", id }],\n dialog:\n level === 0 && labels.query?.delete != null\n ? labels.query.delete\n : labels.group.delete,\n })\n }\n title={\n (level === 0 && labels.query?.delete?.tooltip) ||\n labels.group.delete.tooltip ||\n (level === 0 && labels.query?.delete?.ariaLabel) ||\n labels.group.delete.ariaLabel\n }\n disabled={readOnly}\n >\n <Delete\n role=\"none\"\n className={cx({ [classes.topRemoveButtonDisabled]: readOnly })}\n />\n </HvIconButton>\n </div>\n {rules?.length > 0 && (\n <div\n className={cx(classes.rulesContainer, {\n [classes.subRulesContainer]: level > 0,\n [classes.topRulesContainer]: level === 0,\n })}\n >\n {rules.map((rule, index) => {\n if (\"combinator\" in rule) {\n return (\n <RuleGroup\n key={rule.id}\n level={level + 1}\n {...rule}\n id={rule.id}\n classes={classes}\n />\n );\n }\n\n const isInvalid =\n combinator === \"and\" &&\n rules.some((r, i) => {\n if (\"attribute\" in r) {\n if (\n r.attribute === rule.attribute &&\n r.id !== rule.id &&\n i < index\n ) {\n return true;\n }\n }\n return false;\n });\n\n return (\n <Rule\n key={rule.id}\n {...rule}\n isInvalid={isInvalid}\n id={rule.id}\n combinator={combinator}\n />\n );\n })}\n </div>\n )}\n {rules?.length === 0 && (\n <HvEmptyState\n title={labels.empty?.title}\n message={\n <>\n <HvTypography\n link\n component=\"button\"\n onClick={() => {\n dispatchAction({ type: \"add-rule\", id });\n }}\n className={classes.createConditionButton}\n disabled={readOnly}\n aria-disabled={readOnly}\n >\n {`${labels.empty?.createCondition}`}\n </HvTypography>\n {level <= normalizedMaxDepth && (\n <>\n {`${labels.empty?.spacer}`}\n <HvTypography\n link\n component=\"button\"\n onClick={() => {\n dispatchAction({ type: \"add-group\", id });\n }}\n className={classes.createGroupButton}\n disabled={readOnly}\n aria-disabled={readOnly}\n >\n {`${labels.empty?.createGroup}`}\n </HvTypography>\n </>\n )}\n </>\n }\n icon={<Info />}\n />\n )}\n <div\n className={cx(\n classes.actionButtonContainer,\n classes.topActionButtonContainer\n )}\n >\n {actionButtons}\n </div>\n </div>\n );\n};\n"],"names":["useClasses","useQueryBuilderContext","jsxs","Fragment","jsx","HvButton","Add","useCallback","HvMultiButton","HvIconButton","Delete","Rule","HvEmptyState","HvTypography","Info"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.cjs","sources":["../../../src/QueryBuilder/types.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"types.cjs","sources":["../../../src/QueryBuilder/types.ts"],"sourcesContent":["import { HvOptional } from \"../types/generic\";\n\nexport const defaultRendererKey = \"DEFAULT\";\n\nconst defaultAttributes = [\n \"boolean\",\n \"numeric\",\n \"dateandtime\",\n \"text\",\n \"textarea\",\n] as const;\ntype DefaultAttributes = (typeof defaultAttributes)[number];\n\nexport interface HvQueryBuilderAttribute extends Record<string, unknown> {\n id?: string;\n label: string;\n type: DefaultAttributes | (string & {});\n}\n\nexport interface HvQueryBuilderNumericRange {\n from: number | string;\n to: number | string;\n}\n\nexport interface HvQueryBuilderDateTimeStrings {\n date?: string;\n time?: string;\n}\n\nexport interface HvQueryBuilderDateTimeRange {\n start?: HvQueryBuilderDateTimeStrings;\n end?: HvQueryBuilderDateTimeStrings;\n}\n\nexport type HvQueryBuilderQueryRuleValue =\n | string\n | number\n | boolean\n | HvQueryBuilderNumericRange\n | HvQueryBuilderDateTimeStrings\n | HvQueryBuilderDateTimeRange;\n\nexport type HvQueryBuilderQueryRule = HvOptional<QueryRule, \"id\">;\n\nexport interface HvQueryBuilderQueryGroup\n extends Omit<HvOptional<QueryGroup, \"id\">, \"rules\"> {\n rules: Array<HvQueryBuilderQueryRule | HvQueryBuilderQueryGroup>;\n}\n\nexport type HvQueryBuilderQuery = HvQueryBuilderQueryGroup;\n\nexport interface QueryRule {\n id: React.Key;\n attribute?: string;\n operator?: string;\n value?: HvQueryBuilderQueryRuleValue;\n}\n\nexport interface QueryGroup {\n id: React.Key;\n combinator: string;\n rules: Array<QueryRule | QueryGroup>;\n}\n\nexport type Query = QueryGroup;\n\n// TODO - remove this type in v6\n/** @deprecated */\nexport interface HvQueryBuilderChangedQuery\n extends Omit<HvQueryBuilderQuery, \"id\" | \"rules\"> {\n rules: Array<\n Omit<HvQueryBuilderQueryRule, \"id\"> | HvQueryBuilderChangedQuery\n >;\n}\n\nexport interface HvQueryBuilderQueryCombinator {\n operand: string;\n label: string;\n}\n\nexport interface HvQueryBuilderQueryOperator {\n operator: string;\n label: string;\n combinators: string[];\n}\n\ninterface DialogLabels {\n dialogTitle: string;\n dialogMessage: string;\n dialogConfirm: string;\n dialogCancel: string;\n dialogCloseTooltip: string;\n}\n\n/** @private label structure action icon buttons */\ninterface ActionIconLabels extends DialogLabels {\n // TODO: remove in v6 - duplicated labels - `tooltip` *is* the aria-label\n /** @deprecated use `tooltip` label instead */\n ariaLabel: string;\n tooltip?: string;\n}\n\nexport type QueryAction =\n | {\n type: \"reset-query\";\n }\n | {\n type: \"reset-group\";\n id: React.Key;\n }\n | {\n type: \"add-rule\" | \"add-group\" | \"remove-node\";\n id: React.Key;\n }\n | {\n type: \"set-combinator\";\n id: React.Key;\n combinator: string;\n }\n | {\n type: \"set-attribute\";\n id: React.Key;\n attribute?: string | null;\n operator?: string | null;\n value?: HvQueryBuilderQueryRuleValue | null;\n }\n | {\n type: \"set-operator\";\n id: React.Key;\n operator: string | null;\n value?: HvQueryBuilderQueryRuleValue | null;\n }\n | {\n type: \"set-value\";\n id: React.Key;\n value: HvQueryBuilderQueryRuleValue | null | any;\n }\n | {\n type: \"set-query\";\n // Query with ids\n query: Query;\n };\n\nexport interface AskAction {\n actions: QueryAction[];\n dialog: DialogLabels;\n}\n\nexport interface HvQueryBuilderLabels {\n query?: {\n delete?: ActionIconLabels;\n addRule?: {\n label: string;\n };\n addGroup?: {\n label: string;\n };\n };\n rule: {\n attribute: {\n exists: string;\n label: string;\n placeholder: string;\n };\n operator: {\n label: string;\n placeholder: string;\n };\n value: {\n distance: {\n label: string;\n placeholder?: string;\n connectorText: string;\n button: string;\n validation: {\n required: string;\n invalid: string;\n };\n };\n text: {\n label: string;\n placeholder: string;\n validation: {\n required: string;\n };\n };\n boolean: {\n label: string;\n placeholder: string;\n options: Record<string, string>;\n };\n numeric: {\n label: string;\n placeholder: string;\n validation: {\n required: string;\n invalid: string;\n equal: string;\n greaterThan: string;\n };\n range: {\n leftLabel: string;\n rightLabel: string;\n };\n };\n datetime: {\n dateLabel: string;\n datePlaceholder: string;\n timeLabel: string;\n timePlaceholder: string;\n startDateLabel: string;\n startDatePlaceholder: string;\n startTimeLabel: string;\n startTimePlaceholder: string;\n endDateLabel: string;\n endDatePlaceholder: string;\n endTimeLabel: string;\n endTimePlaceholder: string;\n validation: {\n required: string;\n invalidInterval: string;\n };\n };\n };\n delete: ActionIconLabels;\n };\n group: {\n delete: ActionIconLabels;\n reset: ActionIconLabels;\n addRule: {\n label: string;\n };\n addGroup: {\n label: string;\n };\n };\n empty: {\n title: string;\n createCondition: string;\n createGroup: string;\n spacer: string;\n };\n}\n\nexport interface HvQueryBuilderRendererProps<V = any> {\n id: React.Key;\n attribute: string;\n operator?: string;\n value?: V;\n}\n\nexport type ValueRenderer =\n | React.FC<HvQueryBuilderRendererProps>\n | Record<string, React.FC<HvQueryBuilderRendererProps>>;\n\nexport type HvQueryBuilderRenderers = Record<string, ValueRenderer>;\n"],"names":[],"mappings":";;AAEO,MAAM,qBAAqB;;"}
|
|
@@ -1,22 +1,45 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const helpers = require("../../utils/helpers.cjs");
|
|
3
4
|
const isBigList = (values) => values != null && values?.length > 10;
|
|
5
|
+
const ID_PREFIX = "@hv_";
|
|
6
|
+
const createId = () => helpers.uniqueId(ID_PREFIX);
|
|
4
7
|
const emptyRule = () => ({
|
|
5
|
-
id:
|
|
8
|
+
id: createId()
|
|
6
9
|
});
|
|
7
10
|
const emptyGroup = (createEmptyRule = false) => ({
|
|
8
|
-
id:
|
|
11
|
+
id: createId(),
|
|
9
12
|
combinator: "and",
|
|
10
13
|
rules: createEmptyRule ? [emptyRule()] : []
|
|
11
14
|
});
|
|
12
|
-
const clearNodeIds = (original) => {
|
|
15
|
+
const clearNodeIds = (original, full = false) => {
|
|
13
16
|
const rule = { ...original };
|
|
14
|
-
|
|
17
|
+
if (!full && rule.id?.toString().startsWith(ID_PREFIX) || full) {
|
|
18
|
+
delete rule.id;
|
|
19
|
+
}
|
|
15
20
|
if ("rules" in rule) {
|
|
16
|
-
rule.rules = rule.rules.map((r) => clearNodeIds(r));
|
|
21
|
+
rule.rules = rule.rules.map((r) => clearNodeIds(r, full));
|
|
17
22
|
}
|
|
18
23
|
return rule;
|
|
19
24
|
};
|
|
25
|
+
const isQueryGroup = (value) => "rules" in value;
|
|
26
|
+
const setNodeIds = (query, prevQuery) => {
|
|
27
|
+
if (!query.id) {
|
|
28
|
+
query.id = prevQuery && prevQuery?.id && helpers.isEqual(
|
|
29
|
+
clearNodeIds(structuredClone(query)),
|
|
30
|
+
clearNodeIds(structuredClone(prevQuery))
|
|
31
|
+
) ? prevQuery.id : createId();
|
|
32
|
+
}
|
|
33
|
+
if (isQueryGroup(query)) {
|
|
34
|
+
query.rules = query.rules.map(
|
|
35
|
+
(item, idx) => setNodeIds(
|
|
36
|
+
item,
|
|
37
|
+
prevQuery && isQueryGroup(prevQuery) ? prevQuery.rules[idx] : void 0
|
|
38
|
+
)
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
return query;
|
|
42
|
+
};
|
|
20
43
|
const findNodeById = (id, node) => {
|
|
21
44
|
if (node.id === id) {
|
|
22
45
|
return node;
|
|
@@ -54,3 +77,4 @@ exports.emptyRule = emptyRule;
|
|
|
54
77
|
exports.findNodeById = findNodeById;
|
|
55
78
|
exports.findParentById = findParentById;
|
|
56
79
|
exports.isBigList = isBigList;
|
|
80
|
+
exports.setNodeIds = setNodeIds;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/QueryBuilder/utils/index.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/QueryBuilder/utils/index.tsx"],"sourcesContent":["import { isEqual, uniqueId } from \"../../utils/helpers\";\nimport {\n HvQueryBuilderQueryGroup,\n HvQueryBuilderQueryRule,\n Query,\n} from \"../types\";\n\nexport const isBigList = (values: unknown[]) =>\n values != null && values?.length > 10;\n\nconst ID_PREFIX = \"@hv_\";\nconst createId = () => uniqueId(ID_PREFIX);\n\nexport const emptyRule = () => ({\n id: createId(),\n});\n\nexport const emptyGroup = (createEmptyRule = false) => ({\n id: createId(),\n combinator: \"and\",\n rules: createEmptyRule ? [emptyRule()] : [],\n});\n\nexport const clearNodeIds = (\n original: HvQueryBuilderQueryGroup | HvQueryBuilderQueryRule,\n full: boolean = false\n) => {\n const rule = { ...original };\n\n if ((!full && rule.id?.toString().startsWith(ID_PREFIX)) || full) {\n delete rule.id;\n }\n\n if (\"rules\" in rule) {\n rule.rules = rule.rules.map((r) => clearNodeIds(r, full));\n }\n\n return rule;\n};\n\nconst isQueryGroup = (\n value: HvQueryBuilderQueryGroup | HvQueryBuilderQueryRule\n): value is HvQueryBuilderQueryGroup => \"rules\" in value;\n\nexport const setNodeIds = (\n query: HvQueryBuilderQueryGroup | HvQueryBuilderQueryRule,\n prevQuery?: HvQueryBuilderQueryGroup | HvQueryBuilderQueryRule\n): Query => {\n // Use already existing autogenerated id when possible\n if (!query.id) {\n query.id =\n prevQuery &&\n prevQuery?.id &&\n isEqual(\n clearNodeIds(structuredClone(query)),\n clearNodeIds(structuredClone(prevQuery))\n )\n ? prevQuery.id\n : createId();\n }\n\n if (isQueryGroup(query)) {\n query.rules = query.rules.map((item, idx) =>\n setNodeIds(\n item,\n prevQuery && isQueryGroup(prevQuery) ? prevQuery.rules[idx] : undefined\n )\n );\n }\n\n return query as Query;\n};\n\nexport const findNodeById = (\n id: React.Key,\n node: HvQueryBuilderQueryGroup | HvQueryBuilderQueryRule\n) => {\n if (node.id === id) {\n return node;\n }\n if (\"rules\" in node) {\n for (let i = 0; i < node.rules.length; ++i) {\n const rule = node.rules[i];\n\n const found = findNodeById(id, rule);\n if (found) {\n return found;\n }\n }\n }\n\n return null;\n};\n\nexport const findParentById = (\n id: React.Key,\n node: HvQueryBuilderQueryGroup | HvQueryBuilderQueryRule,\n parent?: HvQueryBuilderQueryGroup\n) => {\n if (node.id === id) {\n return parent ?? null;\n }\n\n if (\"rules\" in node) {\n const group = node;\n\n for (let i = 0; i < group.rules.length; ++i) {\n const rule = group.rules[i];\n\n const found = findParentById(id, rule, group);\n if (found) {\n return found;\n }\n }\n }\n\n return null;\n};\n"],"names":["uniqueId","isEqual"],"mappings":";;;AAOO,MAAM,YAAY,CAAC,WACxB,UAAU,QAAQ,QAAQ,SAAS;AAErC,MAAM,YAAY;AAClB,MAAM,WAAW,MAAMA,iBAAS,SAAS;AAElC,MAAM,YAAY,OAAO;AAAA,EAC9B,IAAI,SAAS;AACf;AAEa,MAAA,aAAa,CAAC,kBAAkB,WAAW;AAAA,EACtD,IAAI,SAAS;AAAA,EACb,YAAY;AAAA,EACZ,OAAO,kBAAkB,CAAC,UAAU,CAAC,IAAI,CAAC;AAC5C;AAEO,MAAM,eAAe,CAC1B,UACA,OAAgB,UACb;AACG,QAAA,OAAO,EAAE,GAAG;AAEb,MAAA,CAAC,QAAQ,KAAK,IAAI,WAAW,WAAW,SAAS,KAAM,MAAM;AAChE,WAAO,KAAK;AAAA,EACd;AAEA,MAAI,WAAW,MAAM;AACd,SAAA,QAAQ,KAAK,MAAM,IAAI,CAAC,MAAM,aAAa,GAAG,IAAI,CAAC;AAAA,EAC1D;AAEO,SAAA;AACT;AAEA,MAAM,eAAe,CACnB,UACsC,WAAW;AAEtC,MAAA,aAAa,CACxB,OACA,cACU;AAEN,MAAA,CAAC,MAAM,IAAI;AACP,UAAA,KACJ,aACA,WAAW,MACXC,QAAA;AAAA,MACE,aAAa,gBAAgB,KAAK,CAAC;AAAA,MACnC,aAAa,gBAAgB,SAAS,CAAC;AAAA,IAAA,IAErC,UAAU,KACV;EACR;AAEI,MAAA,aAAa,KAAK,GAAG;AACjB,UAAA,QAAQ,MAAM,MAAM;AAAA,MAAI,CAAC,MAAM,QACnC;AAAA,QACE;AAAA,QACA,aAAa,aAAa,SAAS,IAAI,UAAU,MAAM,GAAG,IAAI;AAAA,MAChE;AAAA,IAAA;AAAA,EAEJ;AAEO,SAAA;AACT;AAEa,MAAA,eAAe,CAC1B,IACA,SACG;AACC,MAAA,KAAK,OAAO,IAAI;AACX,WAAA;AAAA,EACT;AACA,MAAI,WAAW,MAAM;AACnB,aAAS,IAAI,GAAG,IAAI,KAAK,MAAM,QAAQ,EAAE,GAAG;AACpC,YAAA,OAAO,KAAK,MAAM,CAAC;AAEnB,YAAA,QAAQ,aAAa,IAAI,IAAI;AACnC,UAAI,OAAO;AACF,eAAA;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAEO,SAAA;AACT;AAEO,MAAM,iBAAiB,CAC5B,IACA,MACA,WACG;AACC,MAAA,KAAK,OAAO,IAAI;AAClB,WAAO,UAAU;AAAA,EACnB;AAEA,MAAI,WAAW,MAAM;AACnB,UAAM,QAAQ;AAEd,aAAS,IAAI,GAAG,IAAI,MAAM,MAAM,QAAQ,EAAE,GAAG;AACrC,YAAA,OAAO,MAAM,MAAM,CAAC;AAE1B,YAAM,QAAQ,eAAe,IAAI,MAAM,KAAK;AAC5C,UAAI,OAAO;AACF,eAAA;AAAA,MACT;AAAA,IACF;AAAA,EACF;AAEO,SAAA;AACT;;;;;;;;"}
|
|
@@ -2,11 +2,13 @@
|
|
|
2
2
|
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
3
|
const index = require("./index.cjs");
|
|
4
4
|
const reducer = (state, action) => {
|
|
5
|
-
const query =
|
|
5
|
+
const query = structuredClone(state);
|
|
6
6
|
switch (action.type) {
|
|
7
7
|
case "reset-query": {
|
|
8
8
|
return index.emptyGroup();
|
|
9
9
|
}
|
|
10
|
+
case "set-query":
|
|
11
|
+
return action.query;
|
|
10
12
|
case "reset-group": {
|
|
11
13
|
const group = index.findNodeById(action.id, query);
|
|
12
14
|
if (group && "rules" in group) {
|
|
@@ -78,7 +80,9 @@ const reducer = (state, action) => {
|
|
|
78
80
|
case "set-value": {
|
|
79
81
|
const node = index.findNodeById(action.id, query);
|
|
80
82
|
if (node && "operator" in node) {
|
|
81
|
-
|
|
83
|
+
if ("value" in node) {
|
|
84
|
+
node.value = action.value ?? void 0;
|
|
85
|
+
}
|
|
82
86
|
return query;
|
|
83
87
|
}
|
|
84
88
|
break;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reducer.cjs","sources":["../../../../src/QueryBuilder/utils/reducer.tsx"],"sourcesContent":["import { Reducer } from \"react\";\n\nimport { emptyRule, emptyGroup, findNodeById, findParentById } from \"./index\";\nimport {
|
|
1
|
+
{"version":3,"file":"reducer.cjs","sources":["../../../../src/QueryBuilder/utils/reducer.tsx"],"sourcesContent":["import { Reducer } from \"react\";\n\nimport { emptyRule, emptyGroup, findNodeById, findParentById } from \"./index\";\nimport { Query, QueryAction } from \"../types\";\n\nconst reducer: Reducer<Query, QueryAction> = (state, action) => {\n const query = structuredClone(state);\n\n switch (action.type) {\n case \"reset-query\": {\n return emptyGroup();\n }\n case \"set-query\":\n return action.query;\n case \"reset-group\": {\n const group = findNodeById(action.id, query);\n if (group && \"rules\" in group) {\n group.rules = [emptyRule()];\n\n return query;\n }\n break;\n }\n case \"add-rule\": {\n const group = findNodeById(action.id, query);\n if (group && \"rules\" in group) {\n const rule = emptyRule();\n\n group.rules.push(rule);\n\n return query;\n }\n break;\n }\n case \"add-group\": {\n const group = findNodeById(action.id, query);\n if (group && \"rules\" in group) {\n group.rules.push(emptyGroup(true));\n\n return query;\n }\n break;\n }\n case \"remove-node\": {\n const parent = findParentById(action.id, query);\n if (parent) {\n parent.rules = parent.rules.filter((rule) => rule.id !== action.id);\n\n return query;\n }\n\n // reset query if deleting top node\n return emptyGroup();\n }\n case \"set-combinator\": {\n const node = findNodeById(action.id, query);\n if (node && \"combinator\" in node) {\n if (node.combinator !== action.combinator) {\n node.combinator = action.combinator;\n\n return query;\n }\n }\n break;\n }\n case \"set-attribute\": {\n const node = findNodeById(action.id, query);\n if (node && node.attribute !== action.attribute) {\n node.attribute = action.attribute ?? undefined;\n\n // we keep the operator and value unless the operator is explicitly null (or set)\n if (action.operator !== undefined) {\n node.operator = action.operator ?? undefined;\n node.value = action.value ?? undefined;\n }\n\n return query;\n }\n break;\n }\n case \"set-operator\": {\n const node = findNodeById(action.id, query);\n if (node && \"attribute\" in node) {\n if (node.operator !== action.operator) {\n node.operator = action.operator;\n if (action.value !== undefined) {\n node.value = action.value ?? undefined;\n }\n\n return query;\n }\n }\n break;\n }\n case \"set-value\": {\n const node = findNodeById(action.id, query);\n if (node && \"operator\" in node) {\n // Making sure we are not adding \"value: undefined\" to the object when value wasn't even set (because of EmptyValue)\n // Without this we can trigger onChange\n if (\"value\" in node) {\n node.value = action.value ?? undefined;\n }\n\n return query;\n }\n break;\n }\n\n default:\n }\n\n // Return existing state if nothing changed\n return query;\n};\n\nexport default reducer;\n"],"names":["emptyGroup","findNodeById","emptyRule","findParentById"],"mappings":";;;AAKA,MAAM,UAAuC,CAAC,OAAO,WAAW;AACxD,QAAA,QAAQ,gBAAgB,KAAK;AAEnC,UAAQ,OAAO,MAAM;AAAA,IACnB,KAAK,eAAe;AAClB,aAAOA,MAAW,WAAA;AAAA,IACpB;AAAA,IACA,KAAK;AACH,aAAO,OAAO;AAAA,IAChB,KAAK,eAAe;AAClB,YAAM,QAAQC,MAAA,aAAa,OAAO,IAAI,KAAK;AACvC,UAAA,SAAS,WAAW,OAAO;AACvB,cAAA,QAAQ,CAACC,MAAA,UAAA,CAAW;AAEnB,eAAA;AAAA,MACT;AACA;AAAA,IACF;AAAA,IACA,KAAK,YAAY;AACf,YAAM,QAAQD,MAAA,aAAa,OAAO,IAAI,KAAK;AACvC,UAAA,SAAS,WAAW,OAAO;AAC7B,cAAM,OAAOC,MAAAA;AAEP,cAAA,MAAM,KAAK,IAAI;AAEd,eAAA;AAAA,MACT;AACA;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,YAAM,QAAQD,MAAA,aAAa,OAAO,IAAI,KAAK;AACvC,UAAA,SAAS,WAAW,OAAO;AAC7B,cAAM,MAAM,KAAKD,MAAAA,WAAW,IAAI,CAAC;AAE1B,eAAA;AAAA,MACT;AACA;AAAA,IACF;AAAA,IACA,KAAK,eAAe;AAClB,YAAM,SAASG,MAAA,eAAe,OAAO,IAAI,KAAK;AAC9C,UAAI,QAAQ;AACH,eAAA,QAAQ,OAAO,MAAM,OAAO,CAAC,SAAS,KAAK,OAAO,OAAO,EAAE;AAE3D,eAAA;AAAA,MACT;AAGA,aAAOH,MAAW,WAAA;AAAA,IACpB;AAAA,IACA,KAAK,kBAAkB;AACrB,YAAM,OAAOC,MAAA,aAAa,OAAO,IAAI,KAAK;AACtC,UAAA,QAAQ,gBAAgB,MAAM;AAC5B,YAAA,KAAK,eAAe,OAAO,YAAY;AACzC,eAAK,aAAa,OAAO;AAElB,iBAAA;AAAA,QACT;AAAA,MACF;AACA;AAAA,IACF;AAAA,IACA,KAAK,iBAAiB;AACpB,YAAM,OAAOA,MAAA,aAAa,OAAO,IAAI,KAAK;AAC1C,UAAI,QAAQ,KAAK,cAAc,OAAO,WAAW;AAC1C,aAAA,YAAY,OAAO,aAAa;AAGjC,YAAA,OAAO,aAAa,QAAW;AAC5B,eAAA,WAAW,OAAO,YAAY;AAC9B,eAAA,QAAQ,OAAO,SAAS;AAAA,QAC/B;AAEO,eAAA;AAAA,MACT;AACA;AAAA,IACF;AAAA,IACA,KAAK,gBAAgB;AACnB,YAAM,OAAOA,MAAA,aAAa,OAAO,IAAI,KAAK;AACtC,UAAA,QAAQ,eAAe,MAAM;AAC3B,YAAA,KAAK,aAAa,OAAO,UAAU;AACrC,eAAK,WAAW,OAAO;AACnB,cAAA,OAAO,UAAU,QAAW;AACzB,iBAAA,QAAQ,OAAO,SAAS;AAAA,UAC/B;AAEO,iBAAA;AAAA,QACT;AAAA,MACF;AACA;AAAA,IACF;AAAA,IACA,KAAK,aAAa;AAChB,YAAM,OAAOA,MAAA,aAAa,OAAO,IAAI,KAAK;AACtC,UAAA,QAAQ,cAAc,MAAM;AAG9B,YAAI,WAAW,MAAM;AACd,eAAA,QAAQ,OAAO,SAAS;AAAA,QAC/B;AAEO,eAAA;AAAA,MACT;AACA;AAAA,IACF;AAAA,EAGF;AAGO,SAAA;AACT;AAEA,MAAA,YAAe;;"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
|
|
3
|
+
const reactTable = require("react-table");
|
|
4
|
+
const useHvRowState = reactTable.useRowState.bind({});
|
|
5
|
+
useHvRowState.pluginName = "useHvRowState";
|
|
6
|
+
const useHvRowState$1 = useHvRowState;
|
|
7
|
+
exports.default = useHvRowState$1;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useRowState.cjs","sources":["../../../../src/Table/hooks/useRowState.ts"],"sourcesContent":["import { Hooks, useRowState } from \"react-table\";\n\n// #region ##### TYPES #####\n\nexport type UseRowStateProps = (<D extends object = Record<string, unknown>>(\n hooks: Hooks<D>\n) => void) & { pluginName: string };\n\n// #endregion ##### TYPES #####\n\nconst useHvRowState = useRowState.bind({});\n(useHvRowState.pluginName as string) = \"useHvRowState\";\n\nexport default useHvRowState;\n"],"names":["useRowState"],"mappings":";;;AAUA,MAAM,gBAAgBA,WAAA,YAAY,KAAK,CAAA,CAAE;AACxC,cAAc,aAAwB;AAEvC,MAAA,kBAAe;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useControlled.cjs","sources":["../../../src/hooks/useControlled.ts"],"sourcesContent":["// based in https://raw.githubusercontent.com/mui-org/material-ui/next/packages/material-ui/src/utils/useControlled.js\n// modifications:\n// 1. renamed default to initialState, to convey the same meaning of the useState hook.\n// 2. removed the console error when initialState changes; that is acceptable and just ignored, like in useState.\n// 3. the console error regarding switching from controlled to uncontrolled (or vice-versa) is sent synchronously\n// so the stacktrace shows the caller\n// 4. given that, the hook signature was simplified, no need for metadata\n\nimport { useRef, useState, useCallback, SetStateAction } from \"react\";\n\
|
|
1
|
+
{"version":3,"file":"useControlled.cjs","sources":["../../../src/hooks/useControlled.ts"],"sourcesContent":["// based in https://raw.githubusercontent.com/mui-org/material-ui/next/packages/material-ui/src/utils/useControlled.js\n// modifications:\n// 1. renamed default to initialState, to convey the same meaning of the useState hook.\n// 2. removed the console error when initialState changes; that is acceptable and just ignored, like in useState.\n// 3. the console error regarding switching from controlled to uncontrolled (or vice-versa) is sent synchronously\n// so the stacktrace shows the caller\n// 4. given that, the hook signature was simplified, no need for metadata\n\nimport { useRef, useState, useCallback, SetStateAction } from \"react\";\n\nexport const useControlled = (controlledProp: any, initialState: any) => {\n const { current: isControlled } = useRef(controlledProp !== undefined);\n const [valueState, setValue] = useState(initialState);\n const value = isControlled ? controlledProp : valueState;\n\n if (import.meta.env.DEV && isControlled !== (controlledProp !== undefined)) {\n // eslint-disable-next-line no-console\n console.error(\n [\n `A component is changing the ${\n isControlled ? \"\" : \"un\"\n }controlled state to be ${isControlled ? \"un\" : \"\"}controlled.`,\n \"Elements should not switch from uncontrolled to controlled (or vice versa).\",\n \"Decide between using a controlled or uncontrolled element for the lifetime of the component.\",\n \"The nature of the state is determined during the first render, it's considered controlled if the value is not `undefined`.\",\n ].join(\"\\n\")\n );\n }\n\n const setValueIfUncontrolled = useCallback(\n (newValue: SetStateAction<any>) => {\n if (!isControlled) {\n setValue(newValue);\n }\n },\n [isControlled]\n );\n\n return [value, setValueIfUncontrolled];\n};\n"],"names":["useRef","useState","useCallback"],"mappings":";;;AAUa,MAAA,gBAAgB,CAAC,gBAAqB,iBAAsB;AACvE,QAAM,EAAE,SAAS,aAAiB,IAAAA,MAAA,OAAO,mBAAmB,MAAS;AACrE,QAAM,CAAC,YAAY,QAAQ,IAAIC,eAAS,YAAY;AAC9C,QAAA,QAAQ,eAAe,iBAAiB;AAgB9C,QAAM,yBAAyBC,MAAA;AAAA,IAC7B,CAAC,aAAkC;AACjC,UAAI,CAAC,cAAc;AACjB,iBAAS,QAAQ;AAAA,MACnB;AAAA,IACF;AAAA,IACA,CAAC,YAAY;AAAA,EAAA;AAGR,SAAA,CAAC,OAAO,sBAAsB;AACvC;;"}
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -194,6 +194,8 @@ const List_styles = require("./List/List.styles.cjs");
|
|
|
194
194
|
const List = require("./List/List.cjs");
|
|
195
195
|
const Loading_styles = require("./Loading/Loading.styles.cjs");
|
|
196
196
|
const Loading = require("./Loading/Loading.cjs");
|
|
197
|
+
const LoadingContainer_styles = require("./LoadingContainer/LoadingContainer.styles.cjs");
|
|
198
|
+
const LoadingContainer = require("./LoadingContainer/LoadingContainer.cjs");
|
|
197
199
|
const Login_styles = require("./Login/Login.styles.cjs");
|
|
198
200
|
const Login = require("./Login/Login.cjs");
|
|
199
201
|
const MultiButton_styles = require("./MultiButton/MultiButton.styles.cjs");
|
|
@@ -262,6 +264,7 @@ const useHeaderGroups = require("./Table/hooks/useHeaderGroups.cjs");
|
|
|
262
264
|
const useResizeColumns = require("./Table/hooks/useResizeColumns.cjs");
|
|
263
265
|
const useGlobalFilter = require("./Table/hooks/useGlobalFilter.cjs");
|
|
264
266
|
const useFilters = require("./Table/hooks/useFilters.cjs");
|
|
267
|
+
const useRowState = require("./Table/hooks/useRowState.cjs");
|
|
265
268
|
const renderers = require("./Table/renderers/renderers.cjs");
|
|
266
269
|
const DateColumnCell = require("./Table/renderers/DateColumnCell/DateColumnCell.cjs");
|
|
267
270
|
const DropdownColumnCell = require("./Table/renderers/DropdownColumnCell/DropdownColumnCell.cjs");
|
|
@@ -553,6 +556,8 @@ exports.listClasses = List_styles.staticClasses;
|
|
|
553
556
|
exports.HvList = List.HvList;
|
|
554
557
|
exports.loadingClasses = Loading_styles.staticClasses;
|
|
555
558
|
exports.HvLoading = Loading.HvLoading;
|
|
559
|
+
exports.loadingContainerClasses = LoadingContainer_styles.staticClasses;
|
|
560
|
+
exports.HvLoadingContainer = LoadingContainer.HvLoadingContainer;
|
|
556
561
|
exports.loginClasses = Login_styles.staticClasses;
|
|
557
562
|
exports.HvLogin = Login.HvLogin;
|
|
558
563
|
exports.multiButtonClasses = MultiButton_styles.staticClasses;
|
|
@@ -638,6 +643,7 @@ exports.useHvHeaderGroups = useHeaderGroups.default;
|
|
|
638
643
|
exports.useHvResizeColumns = useResizeColumns.default;
|
|
639
644
|
exports.useHvGlobalFilter = useGlobalFilter.default;
|
|
640
645
|
exports.useHvFilters = useFilters.default;
|
|
646
|
+
exports.useHvRowState = useRowState.default;
|
|
641
647
|
exports.hvDateColumn = renderers.hvDateColumn;
|
|
642
648
|
exports.hvDropdownColumn = renderers.hvDropdownColumn;
|
|
643
649
|
exports.hvExpandColumn = renderers.hvExpandColumn;
|
package/dist/cjs/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"generic.cjs","sources":["../../../src/types/generic.ts"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport type {\n HvExtraProps,\n HvExtraDeepProps,\n} from \"@hitachivantara/uikit-react-shared\";\n\nexport type { HvExtraProps, HvExtraDeepProps };\n\ntype AsProp<C extends React.ElementType> = {\n /** Custom element type to override the root component */\n component?: C;\n};\n\ntype PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);\n\n// Workaround to fix the use of Omit with ComponentPropsWithoutRef\n// Without this the event handlers return any instead of the type for the chosen element\ntype FixComponentProps<T> = T extends any ? T : never;\n\ntype PolymorphicComponent<\n C extends React.ElementType,\n Props = {}\n> = React.PropsWithChildren<Props & AsProp<C>> &\n FixComponentProps<\n Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>\n >;\n\nexport type PolymorphicRef<C extends React.ElementType> =\n React.ComponentPropsWithRef<C>[\"ref\"];\n\nexport type PolymorphicComponentRef<\n C extends React.ElementType,\n Props = {}\n> = PolymorphicComponent<C, Props> & { ref?: PolymorphicRef<C> };\n\n/** HV Base Props. Extends `React.HTMLAttributes` of an element `E`, and filters `K` keys. */\nexport type HvBaseProps<\n E extends HTMLElement = HTMLDivElement,\n K extends keyof React.HTMLAttributes<E> = never\n> = Omit<React.HTMLAttributes<E>, K>;\n\n/** This type allows to do a deep partial by applying the Partial type to each key recursively */\nexport type DeepPartial<T> = T extends Object\n ? Partial<{\n [P in keyof T]: DeepPartial<T[P]>;\n }>\n : T;\n\n/** This type combines the HvExtraProps and DeepPartial types */\nexport type HvExtraDeepPartialProps<T> = Partial<{\n [P in keyof T]: DeepPartial<T[P]> & HvExtraProps;\n}> &\n HvExtraProps;\n\nexport type Arrayable<T> = T | T[];\n\n/** React.forwardRef with fixed type declarations */\nexport function fixedForwardRef<T, P = {}>(\n // TODO: change `React.ReactElement | null` to `React.ReactNode` in typescript@5\n render: (props: P, ref: React.Ref<T>) => React.ReactElement | null\n): (props: P & React.RefAttributes<T>) => React.ReactElement | null {\n return forwardRef(render) as any;\n}\n"],"names":["forwardRef"],"mappings":";;;AA0DO,SAAS,gBAEd,QACkE;AAClE,SAAOA,MAAAA,WAAW,MAAM;AAC1B;;"}
|
|
1
|
+
{"version":3,"file":"generic.cjs","sources":["../../../src/types/generic.ts"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport type {\n HvExtraProps,\n HvExtraDeepProps,\n} from \"@hitachivantara/uikit-react-shared\";\n\nexport type { HvExtraProps, HvExtraDeepProps };\n\ntype AsProp<C extends React.ElementType> = {\n /** Custom element type to override the root component */\n component?: C;\n};\n\ntype PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);\n\n// Workaround to fix the use of Omit with ComponentPropsWithoutRef\n// Without this the event handlers return any instead of the type for the chosen element\ntype FixComponentProps<T> = T extends any ? T : never;\n\ntype PolymorphicComponent<\n C extends React.ElementType,\n Props = {}\n> = React.PropsWithChildren<Props & AsProp<C>> &\n FixComponentProps<\n Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>\n >;\n\nexport type PolymorphicRef<C extends React.ElementType> =\n React.ComponentPropsWithRef<C>[\"ref\"];\n\nexport type PolymorphicComponentRef<\n C extends React.ElementType,\n Props = {}\n> = PolymorphicComponent<C, Props> & { ref?: PolymorphicRef<C> };\n\n/** HV Base Props. Extends `React.HTMLAttributes` of an element `E`, and filters `K` keys. */\nexport type HvBaseProps<\n E extends HTMLElement = HTMLDivElement,\n K extends keyof React.HTMLAttributes<E> = never\n> = Omit<React.HTMLAttributes<E>, K>;\n\n/** This type allows to do a deep partial by applying the Partial type to each key recursively */\nexport type DeepPartial<T> = T extends Object\n ? Partial<{\n [P in keyof T]: DeepPartial<T[P]>;\n }>\n : T;\n\n/** This type combines the HvExtraProps and DeepPartial types */\nexport type HvExtraDeepPartialProps<T> = Partial<{\n [P in keyof T]: DeepPartial<T[P]> & HvExtraProps;\n}> &\n HvExtraProps;\n\nexport type Arrayable<T> = T | T[];\n\n/** React.forwardRef with fixed type declarations */\nexport function fixedForwardRef<T, P = {}>(\n // TODO: change `React.ReactElement | null` to `React.ReactNode` in typescript@5\n render: (props: P, ref: React.Ref<T>) => React.ReactElement | null\n): (props: P & React.RefAttributes<T>) => React.ReactElement | null {\n return forwardRef(render) as any;\n}\n\n// Source code from: https://github.com/piotrwitek/utility-types/blob/master/src/mapped-types.ts\n/**\n * Optional\n * @desc From `T` make a set of properties by key `K` become optional\n * @example\n * type Props = {\n * name: string;\n * age: number;\n * visible: boolean;\n * };\n *\n * // Expect: { name?: string; age?: number; visible?: boolean; }\n * type Props = Optional<Props>;\n *\n * // Expect: { name: string; age?: number; visible?: boolean; }\n * type Props = Optional<Props, 'age' | 'visible'>;\n */\nexport type HvOptional<T extends object, K extends keyof T = keyof T> = Omit<\n T,\n K\n> &\n Partial<Pick<T, K>>;\n"],"names":["forwardRef"],"mappings":";;;AA0DO,SAAS,gBAEd,QACkE;AAClE,SAAOA,MAAAA,WAAW,MAAM;AAC1B;;"}
|
|
@@ -1,18 +1,15 @@
|
|
|
1
1
|
import { jsx } from "@emotion/react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useState, useCallback } from "react";
|
|
3
3
|
import MuiCheckbox from "@mui/material/Checkbox";
|
|
4
|
-
import { Checkbox, CheckboxPartial, CheckboxCheck } from "@hitachivantara/uikit-react-icons";
|
|
5
4
|
import { useDefaultProps } from "../hooks/useDefaultProps.js";
|
|
6
5
|
import { useClasses } from "./BaseCheckBox.styles.js";
|
|
7
6
|
import { staticClasses } from "./BaseCheckBox.styles.js";
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
const color = disabled && ["atmo3", "secondary_60"] || semantic && ["base_light", "base_dark"] || void 0;
|
|
11
|
-
const checkedColor = disabled && ["atmo3", "secondary_60"] || semantic && ["base_dark", "base_light"] || void 0;
|
|
7
|
+
import { Box, Partial, Check } from "./icons.js";
|
|
8
|
+
const getSelectorIcons = () => {
|
|
12
9
|
return {
|
|
13
|
-
checkbox: /* @__PURE__ */ jsx(
|
|
14
|
-
checkboxPartial: /* @__PURE__ */ jsx(
|
|
15
|
-
checkboxChecked: /* @__PURE__ */ jsx(
|
|
10
|
+
checkbox: /* @__PURE__ */ jsx(Box, {}),
|
|
11
|
+
checkboxPartial: /* @__PURE__ */ jsx(Partial, {}),
|
|
12
|
+
checkboxChecked: /* @__PURE__ */ jsx(Check, {})
|
|
16
13
|
};
|
|
17
14
|
};
|
|
18
15
|
const HvBaseCheckBox = forwardRef((props, ref) => {
|
|
@@ -37,7 +34,7 @@ const HvBaseCheckBox = forwardRef((props, ref) => {
|
|
|
37
34
|
} = useDefaultProps("HvBaseCheckBox", props);
|
|
38
35
|
const { classes, cx } = useClasses(classesProp);
|
|
39
36
|
const [focusVisible, setFocusVisible] = useState(false);
|
|
40
|
-
const icons = getSelectorIcons(
|
|
37
|
+
const icons = getSelectorIcons();
|
|
41
38
|
const onChangeCallback = useCallback(
|
|
42
39
|
(event) => {
|
|
43
40
|
if (readOnly) {
|
|
@@ -70,7 +67,13 @@ const HvBaseCheckBox = forwardRef((props, ref) => {
|
|
|
70
67
|
value,
|
|
71
68
|
className: cx(
|
|
72
69
|
classes.root,
|
|
73
|
-
{
|
|
70
|
+
{
|
|
71
|
+
[classes.disabled]: disabled,
|
|
72
|
+
[classes.focusVisible]: focusVisible,
|
|
73
|
+
[classes.checked]: checked,
|
|
74
|
+
[classes.indeterminate]: indeterminate,
|
|
75
|
+
[classes.semantic]: semantic
|
|
76
|
+
},
|
|
74
77
|
className
|
|
75
78
|
),
|
|
76
79
|
icon: icons.checkbox,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseCheckBox.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\n\nimport MuiCheckbox, {\n CheckboxProps as MuiCheckboxProps,\n} from \"@mui/material/Checkbox\";\n\nimport {
|
|
1
|
+
{"version":3,"file":"BaseCheckBox.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\n\nimport MuiCheckbox, {\n CheckboxProps as MuiCheckboxProps,\n} from \"@mui/material/Checkbox\";\n\nimport { ExtractNames } from \"../utils/classes\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./BaseCheckBox.styles\";\n\nimport { Box, Check, Partial } from \"./icons\";\n\nexport { staticClasses as baseCheckBoxClasses };\n\nexport type HvBaseCheckBoxClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvBaseCheckBoxProps\n extends Omit<MuiCheckboxProps, \"onChange\" | \"classes\"> {\n /**\n * The input name.\n */\n name?: string;\n /**\n * The value of the input.\n *\n * Is up to the application's logic when to consider the submission of this value.\n * Generally it should be used only when the checkbox is neither unchecked nor indeterminate.\n *\n * The default value is \"on\".\n */\n value?: any;\n /**\n * Indicates that the input is disabled.\n */\n disabled?: boolean;\n /**\n * Indicates that the input is not editable.\n */\n readOnly?: boolean;\n /**\n * Indicates that user input is required.\n */\n required?: boolean;\n /**\n * If `true` the checkbox is selected, if set to `false` the checkbox is not selected.\n *\n * When defined the checkbox state becomes controlled.\n */\n checked?: boolean;\n /**\n * When uncontrolled, defines the initial checked state.\n */\n defaultChecked?: boolean;\n /**\n * If `true` the checkbox visually shows the indeterminate state.\n */\n indeterminate?: boolean;\n /**\n * The callback fired when the checkbox is pressed.\n */\n onChange?: (\n event: React.ChangeEvent<HTMLInputElement>,\n checked: boolean,\n value: any\n ) => void;\n /**\n * Whether the selector should use semantic colors.\n */\n semantic?: boolean;\n /**\n * Properties passed on to the input element.\n */\n inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n /**\n * Callback fired when the component is focused with a keyboard.\n * We trigger a `onFocus` callback too.\n */\n onFocusVisible?: (event: React.FocusEvent<any>) => void;\n /**\n * Callback fired when the component is blurred.\n */\n onBlur?: (event: React.FocusEvent<HTMLButtonElement>) => void;\n /**\n * A Jss Object used to override or extend the styles applied to the checkbox.\n */\n classes?: HvBaseCheckBoxClasses;\n}\n\nconst getSelectorIcons = () => {\n return {\n checkbox: <Box />,\n checkboxPartial: <Partial />,\n checkboxChecked: <Check />,\n };\n};\n\n/**\n * A Checkbox is a mechanism that allows user to select one or more options.\n *\n * The Base Checkbox is a building block of the Checkbox form element. Don't use unless\n * implementing a custom use case not covered by the Checkbox form element.\n */\nexport const HvBaseCheckBox = forwardRef<\n HTMLButtonElement,\n HvBaseCheckBoxProps\n>((props, ref) => {\n const {\n id,\n classes: classesProp,\n className,\n name,\n inputProps,\n onChange,\n onFocusVisible,\n onBlur,\n checked,\n indeterminate,\n defaultChecked,\n value = \"on\",\n required = false,\n readOnly = false,\n disabled = false,\n semantic = false,\n ...others\n } = useDefaultProps(\"HvBaseCheckBox\", props);\n\n const { classes, cx } = useClasses(classesProp);\n\n const [focusVisible, setFocusVisible] = useState<boolean>(false);\n\n const icons = getSelectorIcons();\n\n const onChangeCallback = useCallback(\n (event: React.ChangeEvent<HTMLInputElement>) => {\n if (readOnly) {\n return;\n }\n\n onChange?.(event, event.target.checked, value);\n },\n [onChange, readOnly, value]\n );\n\n const onBlurCallback = useCallback(\n (event: React.FocusEvent<HTMLButtonElement>) => {\n setFocusVisible(false);\n onBlur?.(event);\n },\n [onBlur]\n );\n\n const onFocusVisibleCallback = useCallback(\n (event: React.FocusEvent<any>) => {\n setFocusVisible(true);\n onFocusVisible?.(event);\n },\n [onFocusVisible]\n );\n\n return (\n <MuiCheckbox\n ref={ref}\n id={id}\n name={name}\n value={value}\n className={cx(\n classes.root,\n {\n [classes.disabled]: disabled,\n [classes.focusVisible]: focusVisible,\n [classes.checked]: checked,\n [classes.indeterminate]: indeterminate,\n [classes.semantic]: semantic,\n },\n className\n )}\n icon={icons.checkbox}\n indeterminateIcon={icons.checkboxPartial}\n checkedIcon={icons.checkboxChecked}\n disabled={disabled}\n required={required}\n readOnly={readOnly}\n checked={checked}\n defaultChecked={defaultChecked}\n indeterminate={indeterminate}\n inputProps={inputProps}\n onChange={onChangeCallback}\n onFocusVisible={onFocusVisibleCallback}\n onBlur={onBlurCallback}\n color=\"default\"\n disableRipple\n {...others}\n />\n );\n});\n"],"names":[],"mappings":";;;;;;;AAyFA,MAAM,mBAAmB,MAAM;AACtB,SAAA;AAAA,IACL,8BAAW,KAAI,EAAA;AAAA,IACf,qCAAkB,SAAQ,EAAA;AAAA,IAC1B,qCAAkB,OAAM,EAAA;AAAA,EAAA;AAE5B;AAQO,MAAM,iBAAiB,WAG5B,CAAC,OAAO,QAAQ;AACV,QAAA;AAAA,IACJ;AAAA,IACA,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,WAAW;AAAA,IACX,GAAG;AAAA,EAAA,IACD,gBAAgB,kBAAkB,KAAK;AAE3C,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAE9C,QAAM,CAAC,cAAc,eAAe,IAAI,SAAkB,KAAK;AAE/D,QAAM,QAAQ;AAEd,QAAM,mBAAmB;AAAA,IACvB,CAAC,UAA+C;AAC9C,UAAI,UAAU;AACZ;AAAA,MACF;AAEA,iBAAW,OAAO,MAAM,OAAO,SAAS,KAAK;AAAA,IAC/C;AAAA,IACA,CAAC,UAAU,UAAU,KAAK;AAAA,EAAA;AAG5B,QAAM,iBAAiB;AAAA,IACrB,CAAC,UAA+C;AAC9C,sBAAgB,KAAK;AACrB,eAAS,KAAK;AAAA,IAChB;AAAA,IACA,CAAC,MAAM;AAAA,EAAA;AAGT,QAAM,yBAAyB;AAAA,IAC7B,CAAC,UAAiC;AAChC,sBAAgB,IAAI;AACpB,uBAAiB,KAAK;AAAA,IACxB;AAAA,IACA,CAAC,cAAc;AAAA,EAAA;AAIf,SAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACT,QAAQ;AAAA,QACR;AAAA,UACE,CAAC,QAAQ,QAAQ,GAAG;AAAA,UACpB,CAAC,QAAQ,YAAY,GAAG;AAAA,UACxB,CAAC,QAAQ,OAAO,GAAG;AAAA,UACnB,CAAC,QAAQ,aAAa,GAAG;AAAA,UACzB,CAAC,QAAQ,QAAQ,GAAG;AAAA,QACtB;AAAA,QACA;AAAA,MACF;AAAA,MACA,MAAM,MAAM;AAAA,MACZ,mBAAmB,MAAM;AAAA,MACzB,aAAa,MAAM;AAAA,MACnB;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,UAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,QAAQ;AAAA,MACR,OAAM;AAAA,MACN,eAAa;AAAA,MACZ,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;"}
|
|
@@ -4,20 +4,29 @@ import { createClasses } from "../utils/classes.js";
|
|
|
4
4
|
const { staticClasses, useClasses } = createClasses("HvBaseCheckBox", {
|
|
5
5
|
root: {
|
|
6
6
|
padding: 0,
|
|
7
|
+
width: 32,
|
|
8
|
+
minWidth: 32,
|
|
9
|
+
height: 32,
|
|
7
10
|
borderRadius: theme.radii.base,
|
|
8
11
|
cursor: "pointer",
|
|
9
12
|
"&:hover": {
|
|
10
13
|
backgroundColor: theme.colors.containerBackgroundHover
|
|
14
|
+
},
|
|
15
|
+
"& svg": {
|
|
16
|
+
width: 16,
|
|
17
|
+
height: 16,
|
|
18
|
+
color: theme.colors.atmo1,
|
|
19
|
+
borderRadius: theme.radii.none,
|
|
20
|
+
border: `1px solid ${theme.colors.secondary}`
|
|
11
21
|
}
|
|
12
22
|
},
|
|
13
23
|
disabled: {
|
|
14
24
|
"&$root": {
|
|
15
25
|
cursor: "not-allowed",
|
|
16
|
-
pointerEvents: "initial"
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
fill: theme.colors.secondary_60
|
|
26
|
+
pointerEvents: "initial",
|
|
27
|
+
"& svg": {
|
|
28
|
+
color: theme.colors.atmo3,
|
|
29
|
+
borderColor: theme.colors.secondary_60
|
|
21
30
|
}
|
|
22
31
|
}
|
|
23
32
|
},
|
|
@@ -26,7 +35,46 @@ const { staticClasses, useClasses } = createClasses("HvBaseCheckBox", {
|
|
|
26
35
|
...outlineStyles
|
|
27
36
|
}
|
|
28
37
|
},
|
|
29
|
-
icon: {}
|
|
38
|
+
icon: {},
|
|
39
|
+
checked: {
|
|
40
|
+
"& svg": {
|
|
41
|
+
border: `1px solid ${theme.colors.secondary}`,
|
|
42
|
+
backgroundColor: theme.colors.secondary,
|
|
43
|
+
color: theme.colors.atmo1
|
|
44
|
+
},
|
|
45
|
+
"&$disabled": {
|
|
46
|
+
"& svg": {
|
|
47
|
+
backgroundColor: theme.colors.atmo3,
|
|
48
|
+
borderColor: theme.colors.atmo3,
|
|
49
|
+
color: theme.colors.secondary_60
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
},
|
|
53
|
+
indeterminate: {
|
|
54
|
+
"& svg": {
|
|
55
|
+
color: theme.colors.secondary
|
|
56
|
+
},
|
|
57
|
+
"&$disabled": {
|
|
58
|
+
"& svg": {
|
|
59
|
+
backgroundColor: theme.colors.atmo3,
|
|
60
|
+
borderColor: theme.colors.secondary_60,
|
|
61
|
+
color: theme.colors.secondary_60
|
|
62
|
+
}
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
semantic: {
|
|
66
|
+
"& svg": {
|
|
67
|
+
border: `1px solid ${theme.colors.base_dark}`,
|
|
68
|
+
color: theme.colors.base_light,
|
|
69
|
+
backgroundColor: theme.colors.base_dark
|
|
70
|
+
},
|
|
71
|
+
"&$indeterminate": {
|
|
72
|
+
"& svg": {
|
|
73
|
+
color: theme.colors.base_dark,
|
|
74
|
+
backgroundColor: theme.colors.base_light
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
|
30
78
|
});
|
|
31
79
|
export {
|
|
32
80
|
staticClasses,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseCheckBox.styles.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseCheckBox\", {\n root: {\n padding: 0,\n borderRadius: theme.radii.base,\n cursor: \"pointer\",\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n },\n disabled: {\n \"&$root\": {\n cursor: \"not-allowed\",\n pointerEvents: \"initial\",\n },\n\n \"& svg\": {\n \"&
|
|
1
|
+
{"version":3,"file":"BaseCheckBox.styles.js","sources":["../../../src/BaseCheckBox/BaseCheckBox.styles.ts"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvBaseCheckBox\", {\n root: {\n padding: 0,\n width: 32,\n minWidth: 32,\n height: 32,\n borderRadius: theme.radii.base,\n cursor: \"pointer\",\n \"&:hover\": {\n backgroundColor: theme.colors.containerBackgroundHover,\n },\n\n \"& svg\": {\n width: 16,\n height: 16,\n color: theme.colors.atmo1,\n borderRadius: theme.radii.none,\n border: `1px solid ${theme.colors.secondary}`,\n },\n },\n disabled: {\n \"&$root\": {\n cursor: \"not-allowed\",\n pointerEvents: \"initial\",\n \"& svg\": {\n color: theme.colors.atmo3,\n borderColor: theme.colors.secondary_60,\n },\n },\n },\n focusVisible: {\n \"& svg\": {\n ...outlineStyles,\n },\n },\n icon: {},\n checked: {\n \"& svg\": {\n border: `1px solid ${theme.colors.secondary}`,\n backgroundColor: theme.colors.secondary,\n color: theme.colors.atmo1,\n },\n \"&$disabled\": {\n \"& svg\": {\n backgroundColor: theme.colors.atmo3,\n borderColor: theme.colors.atmo3,\n color: theme.colors.secondary_60,\n },\n },\n },\n indeterminate: {\n \"& svg\": {\n color: theme.colors.secondary,\n },\n \"&$disabled\": {\n \"& svg\": {\n backgroundColor: theme.colors.atmo3,\n borderColor: theme.colors.secondary_60,\n color: theme.colors.secondary_60,\n },\n },\n },\n semantic: {\n \"& svg\": {\n border: `1px solid ${theme.colors.base_dark}`,\n color: theme.colors.base_light,\n backgroundColor: theme.colors.base_dark,\n },\n \"&$indeterminate\": {\n \"& svg\": {\n color: theme.colors.base_dark,\n backgroundColor: theme.colors.base_light,\n },\n },\n },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,kBAAkB;AAAA,EAC3E,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,cAAc,MAAM,MAAM;AAAA,IAC1B,QAAQ;AAAA,IACR,WAAW;AAAA,MACT,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IAEA,SAAS;AAAA,MACP,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO,MAAM,OAAO;AAAA,MACpB,cAAc,MAAM,MAAM;AAAA,MAC1B,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,IAC7C;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,UAAU;AAAA,MACR,QAAQ;AAAA,MACR,eAAe;AAAA,MACf,SAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,QACpB,aAAa,MAAM,OAAO;AAAA,MAC5B;AAAA,IACF;AAAA,EACF;AAAA,EACA,cAAc;AAAA,IACZ,SAAS;AAAA,MACP,GAAG;AAAA,IACL;AAAA,EACF;AAAA,EACA,MAAM,CAAC;AAAA,EACP,SAAS;AAAA,IACP,SAAS;AAAA,MACP,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC3C,iBAAiB,MAAM,OAAO;AAAA,MAC9B,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,iBAAiB,MAAM,OAAO;AAAA,QAC9B,aAAa,MAAM,OAAO;AAAA,QAC1B,OAAO,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AAAA,EACA,eAAe;AAAA,IACb,SAAS;AAAA,MACP,OAAO,MAAM,OAAO;AAAA,IACtB;AAAA,IACA,cAAc;AAAA,MACZ,SAAS;AAAA,QACP,iBAAiB,MAAM,OAAO;AAAA,QAC9B,aAAa,MAAM,OAAO;AAAA,QAC1B,OAAO,MAAM,OAAO;AAAA,MACtB;AAAA,IACF;AAAA,EACF;AAAA,EACA,UAAU;AAAA,IACR,SAAS;AAAA,MACP,QAAQ,aAAa,MAAM,OAAO,SAAS;AAAA,MAC3C,OAAO,MAAM,OAAO;AAAA,MACpB,iBAAiB,MAAM,OAAO;AAAA,IAChC;AAAA,IACA,mBAAmB;AAAA,MACjB,SAAS;AAAA,QACP,OAAO,MAAM,OAAO;AAAA,QACpB,iBAAiB,MAAM,OAAO;AAAA,MAChC;AAAA,IACF;AAAA,EACF;AACF,CAAC;"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { jsx } from "@emotion/react/jsx-runtime";
|
|
2
|
+
const Box = () => {
|
|
3
|
+
return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { fill: "currentcolor", d: "m0,0l16,0l0,16l-16,0l0,-16z" }) });
|
|
4
|
+
};
|
|
5
|
+
const Check = () => {
|
|
6
|
+
return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx(
|
|
7
|
+
"path",
|
|
8
|
+
{
|
|
9
|
+
d: "m5.03,12.06l-3.76,-3.75l1.42,-1.42l2.24,2.25l6.3,-7.2l1.5,1.31l-7.7,8.81z",
|
|
10
|
+
fill: "currentcolor"
|
|
11
|
+
}
|
|
12
|
+
) });
|
|
13
|
+
};
|
|
14
|
+
const Partial = () => {
|
|
15
|
+
return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx("path", { id: "svg_2", d: "m3,8l8,0l0,-2l-8,0l0,2z", fill: "currentcolor" }) });
|
|
16
|
+
};
|
|
17
|
+
export {
|
|
18
|
+
Box,
|
|
19
|
+
Check,
|
|
20
|
+
Partial
|
|
21
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icons.js","sources":["../../../src/BaseCheckBox/icons.tsx"],"sourcesContent":["export const Box = () => {\n return (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <path fill=\"currentcolor\" d=\"m0,0l16,0l0,16l-16,0l0,-16z\" />\n </svg>\n );\n};\n\nexport const Check = () => {\n return (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"m5.03,12.06l-3.76,-3.75l1.42,-1.42l2.24,2.25l6.3,-7.2l1.5,1.31l-7.7,8.81z\"\n fill=\"currentcolor\"\n />\n </svg>\n );\n};\n\nexport const Partial = () => {\n return (\n <svg width=\"14\" height=\"14\" xmlns=\"http://www.w3.org/2000/svg\">\n <path id=\"svg_2\" d=\"m3,8l8,0l0,-2l-8,0l0,2z\" fill=\"currentcolor\" />\n </svg>\n );\n};\n"],"names":[],"mappings":";AAAO,MAAM,MAAM,MAAM;AACvB,SACG,oBAAA,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,OAAM,8BAChC,UAAA,oBAAC,QAAK,EAAA,MAAK,gBAAe,GAAE,+BAA8B,EAC5D,CAAA;AAEJ;AAEO,MAAM,QAAQ,MAAM;AACzB,6BACG,OAAI,EAAA,OAAM,MAAK,QAAO,MAAK,OAAM,8BAChC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,GAAE;AAAA,MACF,MAAK;AAAA,IAAA;AAAA,EAET,EAAA,CAAA;AAEJ;AAEO,MAAM,UAAU,MAAM;AAC3B,6BACG,OAAI,EAAA,OAAM,MAAK,QAAO,MAAK,OAAM,8BAChC,UAAC,oBAAA,QAAA,EAAK,IAAG,SAAQ,GAAE,2BAA0B,MAAK,gBAAe,EACnE,CAAA;AAEJ;"}
|
|
@@ -100,7 +100,10 @@ const HvCheckBox = forwardRef(
|
|
|
100
100
|
id: hasLabel ? setId(elementId, "input") : setId(id, "input"),
|
|
101
101
|
name,
|
|
102
102
|
className: cx(classes.checkbox, {
|
|
103
|
-
[classes.invalidCheckbox]: isStateInvalid
|
|
103
|
+
[classes.invalidCheckbox]: isStateInvalid,
|
|
104
|
+
[classes.checked]: isChecked,
|
|
105
|
+
[classes.indeterminate]: isIndeterminate,
|
|
106
|
+
[classes.semantic]: semantic
|
|
104
107
|
}),
|
|
105
108
|
disabled,
|
|
106
109
|
readOnly,
|