@hitachivantara/uikit-react-core 5.7.3 → 5.7.5

package/dist/cjs/components/CheckBoxGroup/CheckBoxGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxGroup.cjs","sources":["../../../../src/components/CheckBoxGroup/CheckBoxGroup.tsx"],"sourcesContent":["import { HvFormStatus } from \"../Forms\";\nimport { HvBaseProps } from \"@core/types\";\nimport {\n  StyledFormElement,\n  StyledGroupContainer,\n  StyledLabel,\n} from \"./CheckBoxGroup.styles\";\nimport { clsx } from \"clsx\";\nimport { useControlled, useUniqueId } from \"@core/hooks\";\nimport { multiSelectionEventHandler, setId } from \"@core/utils\";\nimport { HvCheckBox, HvInfoMessage, HvWarningText } from \"@core/components\";\nimport { Children, cloneElement, useCallback, useMemo, useRef } from \"react\";\nimport checkBoxGroupClasses, {\n  HvCheckBoxGroupClasses,\n} from \"./checkBoxGroupClasses\";\n\nconst computeSelectAllState = (selected, total) => {\n  if (selected === 0) {\n    return \"none\";\n  }\n\n  if (selected === total) {\n    return \"all\";\n  }\n\n  return \"some\";\n};\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n  const selectedValues = Children.toArray(children)\n    .map((child: any) => {\n      const childIsControlled = child?.props?.checked !== undefined;\n      const childIsSelected = childIsControlled\n        ? child?.props?.checked\n        : child?.props?.defaultChecked;\n\n      return childIsSelected ? child?.props?.value : undefined;\n    })\n    .filter((v) => v !== undefined);\n\n  return selectedValues;\n};\n\nexport interface HvCheckBoxGroupProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * The form element name.\n   *\n   * It is propagated to the children checkboxes, unless they already have one.\n   */\n  name?: string;\n  /**\n   * The value of the form element. An array of values represented in the child checkboxes.\n   *\n   * When defined the checkbox group state becomes controlled.\n   */\n  value?: any[];\n  /**\n   * When uncontrolled, defines the initial value.\n   */\n  defaultValue?: any[];\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * Indicates that the form element is disabled.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any[]) => void;\n  /**\n   * Indicates whether the checkbox group's orientation is horizontal or vertical.\n   *\n   * Defaults to vertical.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * Indicates if an additional select all checkbox should be shown.\n   */\n  showSelectAll?: boolean;\n  /**\n   * The label of the select all checkbox. Defaults to \"All\".\n   */\n  selectAllLabel?: string;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvCheckBoxGroupClasses;\n}\n\n/**\n * A checkbox group is a type of selection list that allows the user to select multiple options through the use of checkboxes.\n */\nexport const HvCheckBoxGroup = ({\n  id,\n  classes,\n  className,\n  children,\n  name,\n  label,\n  description,\n  status,\n  statusMessage,\n  defaultValue,\n  value: valueProp,\n  required = false,\n  readOnly = false,\n  disabled = false,\n  showSelectAll = false,\n  orientation = \"vertical\",\n  selectAllLabel = \"All\",\n  selectAllConjunctionLabel = \"/\",\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-errormessage\": ariaErrorMessage,\n  onChange,\n  ...others\n}: HvCheckBoxGroupProps) => {\n  const [value, setValue] = useControlled(\n    valueProp,\n    defaultValue !== undefined\n      ? defaultValue\n      : // When uncontrolled and no default value is given,\n        // extract the initial selected values from the children own state\n        () => getValueFromSelectedChildren(children)\n  );\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const elementId = useUniqueId(id, \"hvcheckboxgroup\");\n\n  const selectionAnchor = useRef(undefined);\n\n  const [allValues, selectedState, selectedCount] = useMemo(() => {\n    const childValues: any[] = [];\n    const childSelectedState: boolean[] = [];\n    let childSelectedCounter = 0;\n\n    Children.toArray(children).forEach((child: any, i: number) => {\n      const childValue = child?.props?.value;\n      const childIsSelected = value.indexOf(childValue) !== -1;\n\n      childValues[i] = childValue;\n      childSelectedState[i] = childIsSelected;\n\n      if (childIsSelected) {\n        childSelectedCounter += 1;\n      }\n    });\n\n    return [childValues, childSelectedState, childSelectedCounter];\n  }, [children, value]);\n\n  const selectAllState = computeSelectAllState(\n    value.length,\n    selectedState.length\n  );\n\n  const onChildChangeInterceptor = useCallback(\n    (\n      index: number,\n      childOnChange: (\n        event: React.ChangeEvent<HTMLInputElement>,\n        isChecked: boolean\n      ) => void,\n      event: React.ChangeEvent<HTMLInputElement>,\n      isChecked: boolean\n    ) => {\n      const newValue = multiSelectionEventHandler(\n        event,\n        index,\n        selectionAnchor,\n        allValues,\n        selectedState,\n        isChecked\n      );\n\n      childOnChange?.(event, isChecked);\n\n      onChange?.(event, newValue);\n\n      setValue(() => {\n        // This will only run if uncontrolled\n\n        if (required && newValue.length === 0) {\n          setValidationState(\"invalid\");\n        } else {\n          setValidationState(\"valid\");\n        }\n\n        return newValue;\n      });\n    },\n    [allValues, onChange, required, selectedState, setValidationState, setValue]\n  );\n\n  const modifiedChildren = useMemo(() => {\n    return Children.map(children, (child: any, i: number) => {\n      const childIsSelected = selectedState[i];\n\n      return cloneElement(child, {\n        checked: childIsSelected,\n        name: child?.props?.name || name,\n        onChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          isChecked: boolean\n        ) =>\n          onChildChangeInterceptor(i, child?.props?.onChange, event, isChecked),\n        disabled: disabled || child?.props?.disabled,\n        readOnly: readOnly || child?.props?.readOnly,\n      });\n    });\n  }, [\n    children,\n    disabled,\n    name,\n    onChildChangeInterceptor,\n    readOnly,\n    selectedState,\n  ]);\n\n  const handleSelectAll = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    selectAllChecked: boolean\n  ) => {\n    let newValue: any[];\n    if (selectAllChecked) {\n      newValue = [...allValues];\n    } else {\n      newValue = [];\n    }\n\n    onChange?.(event, newValue);\n\n    setValue(() => {\n      // This will only run if uncontrolled\n      if (required && newValue.length === 0) {\n        setValidationState(\"invalid\");\n      } else {\n        setValidationState(\"valid\");\n      }\n\n      return newValue;\n    });\n  };\n\n  const selectAllLabelComponent = (\n    <>\n      {selectedCount === 0 ? (\n        <>\n          <b>{selectAllLabel}</b>\n          {` (${Children.toArray(children).length})`}\n        </>\n      ) : (\n        <>\n          <b>{selectedCount}</b>\n          {` ${selectAllConjunctionLabel} ${Children.toArray(children).length}`}\n        </>\n      )}\n    </>\n  );\n\n  // The error message area will only be created if:\n  //   - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const errorMessageId = canShowError\n    ? setId(elementId, \"error\")\n    : ariaErrorMessage;\n\n  return (\n    <StyledFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={clsx(className, classes?.root, checkBoxGroupClasses.root)}\n    >\n      {label && (\n        <StyledLabel\n          id={setId(elementId, \"label\")}\n          label={label}\n          className={clsx(classes?.label, checkBoxGroupClasses.label)}\n        />\n      )}\n\n      {description && (\n        <HvInfoMessage id={setId(elementId, \"description\")}>\n          {description}\n        </HvInfoMessage>\n      )}\n\n      <StyledGroupContainer\n        role=\"group\"\n        aria-label={ariaLabel}\n        aria-labelledby={\n          ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n        }\n        aria-disabled={disabled ? true : undefined}\n        aria-invalid={validationState === \"invalid\" ? true : undefined}\n        aria-errormessage={\n          validationState === \"invalid\" ? errorMessageId : undefined\n        }\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        className={clsx(\n          classes?.group,\n          checkBoxGroupClasses.group,\n          orientation === \"vertical\" &&\n            clsx(classes?.vertical, checkBoxGroupClasses.vertical),\n          orientation === \"horizontal\" &&\n            clsx(classes?.horizontal, checkBoxGroupClasses.horizontal),\n          validationState === \"invalid\" &&\n            clsx(classes?.invalid, checkBoxGroupClasses.invalid)\n        )}\n        $vertical={orientation === \"vertical\"}\n        $horizontal={orientation === \"horizontal\"}\n        $invalid={validationState === \"invalid\"}\n        {...others}\n      >\n        {showSelectAll && (\n          <HvCheckBox\n            checked={selectAllState === \"all\"}\n            indeterminate={selectAllState === \"some\"}\n            label={selectAllLabelComponent}\n            disabled={disabled}\n            readOnly={readOnly}\n            className={clsx(classes?.selectAll, checkBoxGroupClasses.selectAll)}\n            onChange={handleSelectAll}\n          />\n        )}\n        {modifiedChildren}\n      </StyledGroupContainer>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={clsx(classes?.error, checkBoxGroupClasses.error)}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </StyledFormElement>\n  );\n};\n"],"names":["computeSelectAllState","selected","total","getValueFromSelectedChildren","children","selectedValues","Children","toArray","map","child","childIsControlled","props","checked","undefined","childIsSelected","defaultChecked","value","filter","v","HvCheckBoxGroup","id","classes","className","name","label","description","status","statusMessage","defaultValue","valueProp","required","readOnly","disabled","showSelectAll","orientation","selectAllLabel","selectAllConjunctionLabel","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","onChange","others","setValue","useControlled","validationState","setValidationState","validationMessage","elementId","useUniqueId","selectionAnchor","useRef","allValues","selectedState","selectedCount","useMemo","childValues","childSelectedState","childSelectedCounter","forEach","i","childValue","indexOf","selectAllState","length","onChildChangeInterceptor","useCallback","index","childOnChange","event","isChecked","newValue","multiSelectionEventHandler","modifiedChildren","cloneElement","handleSelectAll","selectAllChecked","selectAllLabelComponent","_Fragment","_jsxs","_jsx","canShowError","errorMessageId","setId","StyledFormElement","clsx","root","checkBoxGroupClasses","StyledLabel","HvInfoMessage","StyledGroupContainer","role","join","trim","group","vertical","horizontal","invalid","$vertical","$horizontal","$invalid","HvCheckBox","indeterminate","selectAll","HvWarningText","disableBorder","error"],"mappings":"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"}
+{"version":3,"file":"CheckBoxGroup.cjs","sources":["../../../../src/components/CheckBoxGroup/CheckBoxGroup.tsx"],"sourcesContent":["import { HvBaseProps } from \"@core/types\";\nimport { clsx } from \"clsx\";\nimport { useControlled, useUniqueId } from \"@core/hooks\";\nimport { multiSelectionEventHandler, setId } from \"@core/utils\";\nimport { HvCheckBox, HvInfoMessage, HvWarningText } from \"@core/components\";\nimport { Children, cloneElement, useCallback, useMemo, useRef } from \"react\";\nimport {\n  StyledFormElement,\n  StyledGroupContainer,\n  StyledLabel,\n} from \"./CheckBoxGroup.styles\";\nimport { HvFormStatus } from \"../Forms\";\nimport checkBoxGroupClasses, {\n  HvCheckBoxGroupClasses,\n} from \"./checkBoxGroupClasses\";\n\nconst computeSelectAllState = (selected, total) => {\n  if (selected === 0) {\n    return \"none\";\n  }\n\n  if (selected === total) {\n    return \"all\";\n  }\n\n  return \"some\";\n};\n\nconst getValueFromSelectedChildren = (children: React.ReactNode) => {\n  const selectedValues = Children.toArray(children)\n    .map((child: any) => {\n      const childIsControlled = child?.props?.checked !== undefined;\n      const childIsSelected = childIsControlled\n        ? child?.props?.checked\n        : child?.props?.defaultChecked;\n\n      return childIsSelected ? child?.props?.value : undefined;\n    })\n    .filter((v) => v !== undefined);\n\n  return selectedValues;\n};\n\nexport interface HvCheckBoxGroupProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\"> {\n  /**\n   * The form element name.\n   *\n   * It is propagated to the children checkboxes, unless they already have one.\n   */\n  name?: string;\n  /**\n   * The value of the form element. An array of values represented in the child checkboxes.\n   *\n   * When defined the checkbox group state becomes controlled.\n   */\n  value?: any[];\n  /**\n   * When uncontrolled, defines the initial value.\n   */\n  defaultValue?: any[];\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /**\n   * Provide additional descriptive text for the form element.\n   */\n  description?: React.ReactNode;\n  /**\n   * Indicates that the form element is disabled.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  disabled?: boolean;\n  /**\n   * Indicates that the form element is not editable.\n   * If `true` the state is propagated to the children checkboxes.\n   */\n  readOnly?: boolean;\n  /**\n   * Indicates that user input is required on the form element.\n   */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to the state.\n   */\n  status?: HvFormStatus;\n  /**\n   * The error message to show when the validation status is \"invalid\".\n   *\n   * Defaults to \"Required\" when the status is uncontrolled and no `aria-errormessage` is provided.\n   */\n  statusMessage?: React.ReactNode;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any[]) => void;\n  /**\n   * Indicates whether the checkbox group's orientation is horizontal or vertical.\n   *\n   * Defaults to vertical.\n   */\n  orientation?: \"vertical\" | \"horizontal\";\n  /**\n   * Indicates if an additional select all checkbox should be shown.\n   */\n  showSelectAll?: boolean;\n  /**\n   * The label of the select all checkbox. Defaults to \"All\".\n   */\n  selectAllLabel?: string;\n  /**\n   * Custom label for select all checkbox conjunction\n   */\n  selectAllConjunctionLabel?: string;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvCheckBoxGroupClasses;\n}\n\n/**\n * A checkbox group is a type of selection list that allows the user to select multiple options through the use of checkboxes.\n */\nexport const HvCheckBoxGroup = ({\n  id,\n  classes,\n  className,\n  children,\n  name,\n  label,\n  description,\n  status,\n  statusMessage,\n  defaultValue,\n  value: valueProp,\n  required = false,\n  readOnly = false,\n  disabled = false,\n  showSelectAll = false,\n  orientation = \"vertical\",\n  selectAllLabel = \"All\",\n  selectAllConjunctionLabel = \"/\",\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-errormessage\": ariaErrorMessage,\n  onChange,\n  ...others\n}: HvCheckBoxGroupProps) => {\n  const [value, setValue] = useControlled(\n    valueProp,\n    defaultValue !== undefined\n      ? defaultValue\n      : // When uncontrolled and no default value is given,\n        // extract the initial selected values from the children own state\n        () => getValueFromSelectedChildren(children)\n  );\n\n  const [validationState, setValidationState] = useControlled(\n    status,\n    \"standBy\"\n  );\n\n  const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n  const elementId = useUniqueId(id, \"hvcheckboxgroup\");\n\n  const selectionAnchor = useRef(undefined);\n\n  const [allValues, selectedState, selectedCount] = useMemo(() => {\n    const childValues: any[] = [];\n    const childSelectedState: boolean[] = [];\n    let childSelectedCounter = 0;\n\n    Children.toArray(children).forEach((child: any, i: number) => {\n      const childValue = child?.props?.value;\n      const childIsSelected = value.indexOf(childValue) !== -1;\n\n      childValues[i] = childValue;\n      childSelectedState[i] = childIsSelected;\n\n      if (childIsSelected) {\n        childSelectedCounter += 1;\n      }\n    });\n\n    return [childValues, childSelectedState, childSelectedCounter];\n  }, [children, value]);\n\n  const selectAllState = computeSelectAllState(\n    value.length,\n    selectedState.length\n  );\n\n  const onChildChangeInterceptor = useCallback(\n    (\n      index: number,\n      childOnChange: (\n        event: React.ChangeEvent<HTMLInputElement>,\n        isChecked: boolean\n      ) => void,\n      event: React.ChangeEvent<HTMLInputElement>,\n      isChecked: boolean\n    ) => {\n      const newValue = multiSelectionEventHandler(\n        event,\n        index,\n        selectionAnchor,\n        allValues,\n        selectedState,\n        isChecked\n      );\n\n      childOnChange?.(event, isChecked);\n\n      onChange?.(event, newValue);\n\n      setValue(() => {\n        // This will only run if uncontrolled\n\n        if (required && newValue.length === 0) {\n          setValidationState(\"invalid\");\n        } else {\n          setValidationState(\"valid\");\n        }\n\n        return newValue;\n      });\n    },\n    [allValues, onChange, required, selectedState, setValidationState, setValue]\n  );\n\n  const modifiedChildren = useMemo(() => {\n    return Children.map(children, (child: any, i: number) => {\n      const childIsSelected = selectedState[i];\n\n      return cloneElement(child, {\n        checked: childIsSelected,\n        name: child?.props?.name || name,\n        onChange: (\n          event: React.ChangeEvent<HTMLInputElement>,\n          isChecked: boolean\n        ) =>\n          onChildChangeInterceptor(i, child?.props?.onChange, event, isChecked),\n        disabled: disabled || child?.props?.disabled,\n        readOnly: readOnly || child?.props?.readOnly,\n      });\n    });\n  }, [\n    children,\n    disabled,\n    name,\n    onChildChangeInterceptor,\n    readOnly,\n    selectedState,\n  ]);\n\n  const handleSelectAll = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    selectAllChecked: boolean\n  ) => {\n    let newValue: any[];\n    if (selectAllChecked) {\n      newValue = [...allValues];\n    } else {\n      newValue = [];\n    }\n\n    onChange?.(event, newValue);\n\n    setValue(() => {\n      // This will only run if uncontrolled\n      if (required && newValue.length === 0) {\n        setValidationState(\"invalid\");\n      } else {\n        setValidationState(\"valid\");\n      }\n\n      return newValue;\n    });\n  };\n\n  const selectAllLabelComponent =\n    selectedCount === 0 ? (\n      <>\n        <b>{selectAllLabel}</b>\n        {` (${Children.toArray(children).length})`}\n      </>\n    ) : (\n      <>\n        <b>{selectedCount}</b>\n        {` ${selectAllConjunctionLabel} ${Children.toArray(children).length}`}\n      </>\n    );\n\n  // The error message area will only be created if:\n  //   - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and required is true\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined && required));\n\n  const errorMessageId = canShowError\n    ? setId(elementId, \"error\")\n    : ariaErrorMessage;\n\n  return (\n    <StyledFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={clsx(className, classes?.root, checkBoxGroupClasses.root)}\n    >\n      {label && (\n        <StyledLabel\n          id={setId(elementId, \"label\")}\n          label={label}\n          className={clsx(classes?.label, checkBoxGroupClasses.label)}\n        />\n      )}\n\n      {description && (\n        <HvInfoMessage id={setId(elementId, \"description\")}>\n          {description}\n        </HvInfoMessage>\n      )}\n\n      <StyledGroupContainer\n        role=\"group\"\n        aria-label={ariaLabel}\n        aria-labelledby={\n          ariaLabelledBy || (label && setId(elementId, \"label\")) || undefined\n        }\n        aria-disabled={disabled ? true : undefined}\n        aria-invalid={validationState === \"invalid\" ? true : undefined}\n        aria-errormessage={\n          validationState === \"invalid\" ? errorMessageId : undefined\n        }\n        aria-describedby={\n          [description && setId(elementId, \"description\"), ariaDescribedBy]\n            .join(\" \")\n            .trim() || undefined\n        }\n        className={clsx(\n          classes?.group,\n          checkBoxGroupClasses.group,\n          orientation === \"vertical\" &&\n            clsx(classes?.vertical, checkBoxGroupClasses.vertical),\n          orientation === \"horizontal\" &&\n            clsx(classes?.horizontal, checkBoxGroupClasses.horizontal),\n          validationState === \"invalid\" &&\n            clsx(classes?.invalid, checkBoxGroupClasses.invalid)\n        )}\n        $vertical={orientation === \"vertical\"}\n        $horizontal={orientation === \"horizontal\"}\n        $invalid={validationState === \"invalid\"}\n        {...others}\n      >\n        {showSelectAll && (\n          <HvCheckBox\n            checked={selectAllState === \"all\"}\n            indeterminate={selectAllState === \"some\"}\n            label={selectAllLabelComponent}\n            disabled={disabled}\n            readOnly={readOnly}\n            className={clsx(classes?.selectAll, checkBoxGroupClasses.selectAll)}\n            onChange={handleSelectAll}\n          />\n        )}\n        {modifiedChildren}\n      </StyledGroupContainer>\n\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={clsx(classes?.error, checkBoxGroupClasses.error)}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </StyledFormElement>\n  );\n};\n"],"names":["computeSelectAllState","selected","total","getValueFromSelectedChildren","children","selectedValues","Children","toArray","map","child","childIsControlled","props","checked","undefined","childIsSelected","defaultChecked","value","filter","v","HvCheckBoxGroup","id","classes","className","name","label","description","status","statusMessage","defaultValue","valueProp","required","readOnly","disabled","showSelectAll","orientation","selectAllLabel","selectAllConjunctionLabel","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","onChange","others","setValue","useControlled","validationState","setValidationState","validationMessage","elementId","useUniqueId","selectionAnchor","useRef","allValues","selectedState","selectedCount","useMemo","childValues","childSelectedState","childSelectedCounter","forEach","i","childValue","indexOf","selectAllState","length","onChildChangeInterceptor","useCallback","index","childOnChange","event","isChecked","newValue","multiSelectionEventHandler","modifiedChildren","cloneElement","handleSelectAll","selectAllChecked","selectAllLabelComponent","_jsxs","_Fragment","_jsx","canShowError","errorMessageId","setId","StyledFormElement","clsx","root","checkBoxGroupClasses","StyledLabel","HvInfoMessage","StyledGroupContainer","role","join","trim","group","vertical","horizontal","invalid","$vertical","$horizontal","$invalid","HvCheckBox","indeterminate","selectAll","HvWarningText","disableBorder","error"],"mappings":"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"}

package/dist/cjs/components/ColorPicker/ColorPicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.cjs","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n  HvBaseDropdown,\n  HvFormElement,\n  HvInfoMessage,\n  HvLabel,\n  HvPanel,\n  HvTypography,\n} from \"@core/components\";\nimport { ClassNames } from \"@emotion/react\";\nimport { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport { Picker } from \"./Picker\";\nimport { styles } from \"./ColorPicker.styles\";\nimport colorPickerClasses, { HvColorPickerClasses } from \"./colorPickerClasses\";\nimport { ColorState } from \"react-color\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\nimport { useControlled, useLabels, useTheme, useUniqueId } from \"@core/hooks\";\nimport { setId } from \"@core/utils\";\n\nexport interface HvColorPickerProps {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  /** Class names to be applied. */\n  className?: string;\n  /** Id to be applied to the form element root node. */\n  id?: string;\n  /** The form element name. */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /** The value color, in HEX format. */\n  value?: string;\n  /** The default value color, in HEX format. */\n  defaultValue?: string;\n  /** If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. */\n  disabled?: boolean;\n  /** If `true` the dropdown starts opened if `false` it starts closed. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** A function to be executed whenever the color changes. */\n  onChange?: (color: string) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvColorPickerClasses;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** Recommended colors. The colors are HEX values. */\n  recommendedColors?: string[];\n  /** Recommended colors position. */\n  recommendedColorsPosition?: \"top\" | \"bottom\";\n  /** If `true`, the labels are shown. If `false`, they are not shown. */\n  showLabels?: boolean;\n  /** An object containing all the labels. */\n  labels?: {\n    recommendedColorsLabel?: string;\n    customColorsLabel?: string;\n  };\n  /** Icon type for the input's end adornment. */\n  dropdownIcon?: \"arrow\" | \"colorPicker\";\n  /** If `true`, the input only shows an icon. If `false`, the input shows text and icons. */\n  iconOnly?: boolean;\n  /** If `true`, the saved colors area is shown. If `false`, it is not shown. */\n  showSavedColors?: boolean;\n  /** If `true`, the custom colors area is shown. If `false`, it is not shown. */\n  showCustomColors?: boolean;\n  /** The saved colors. The colors are HEX values. */\n  savedColorsValue?: string[];\n  /** The default saved colors. The colors are HEX values. */\n  defaultSavedColorsValue?: string[];\n  /** Callback fired when a new saved color is added. */\n  onSavedColorAdded?: (color?: string) => void;\n  /** Callback fired when a new saved color is removed. */\n  onSavedColorRemoved?: (color?: string) => void;\n  /** Aria label to apply to delete saved color button. */\n  deleteSavedColorButtonArialLabel?: string;\n}\n\nconst DEFAULT_LABELS: HvColorPickerProps[\"labels\"] = {\n  recommendedColorsLabel: \"Recommended colors:\",\n  customColorsLabel: \"Custom colors:\",\n};\n\n/**\n * A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation.\n * It receives a color string in HEX format and outputs an HEX formatted color.\n */\nexport const HvColorPicker = ({\n  id,\n  name,\n  required = false,\n  disabled = false,\n  label,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  description,\n  \"aria-describedby\": ariaDescribedBy,\n  className,\n  classes,\n  value,\n  onChange,\n  defaultValue = \"\",\n  expanded,\n  defaultExpanded = false,\n  recommendedColorsPosition = \"top\",\n  recommendedColors = [\n    \"#95AFE8\",\n    \"#E89E5D\",\n    \"#83B8A6\",\n    \"#70759C\",\n    \"#C57E7E\",\n    \"#FADA95\",\n    \"#ADBFE8\",\n    \"#E3B386\",\n    \"#9AC6B7\",\n    \"#8B90AF\",\n    \"#CF9797\",\n    \"#FAE1AA\",\n  ],\n  showLabels = true,\n  labels: labelsProp,\n  dropdownIcon = \"colorPicker\",\n  placeholder = \"Select color...\",\n  iconOnly = false,\n  showSavedColors = true,\n  showCustomColors = true,\n  savedColorsValue,\n  defaultSavedColorsValue = [],\n  onSavedColorAdded,\n  onSavedColorRemoved,\n  deleteSavedColorButtonArialLabel = \"Delete saved color\",\n}: HvColorPickerProps) => {\n  const { activeTheme } = useTheme();\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const [color, setColor] = useControlled(value, defaultValue);\n  const [savedColors, setSavedColors] = useControlled(\n    savedColorsValue,\n    defaultSavedColorsValue\n  );\n  const elementId = useUniqueId(id, \"hvdropdown\");\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  const handleToggle = (_, open: boolean) => {\n    setIsOpen(open);\n  };\n\n  const handleSelect = (val: ColorState | { hex: string; source: string }) => {\n    onChange?.(val.hex);\n    setColor(val.hex);\n  };\n\n  const handleAddColor = () => {\n    // When no color is provided, react-color sets the picker to #000000.\n    // This is the color that should be added in this case.\n    const colorToAdd = color || \"#000000\";\n\n    onSavedColorAdded?.(colorToAdd);\n    setSavedColors([...savedColors, colorToAdd]);\n  };\n\n  const handleRemoveColor = (val: string, position: number) => {\n    if (savedColors[position] === val) {\n      const sColors = [...savedColors];\n      sColors.splice(position, 1);\n      onSavedColorRemoved?.(val);\n      setSavedColors(sColors);\n    }\n  };\n\n  const setFocusToContent = (containerRef: HTMLElement | null) => {\n    const inputs = containerRef?.getElementsByTagName(\"input\");\n    if (inputs && inputs.length > 0) {\n      inputs[0].focus();\n    }\n  };\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <HvFormElement\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          className={cx(colorPickerClasses.root, className, classes?.root)}\n        >\n          {(hasLabel || hasDescription) && (\n            <div\n              className={cx(\n                colorPickerClasses.labelContainer,\n                css(styles.labelContainer),\n                classes?.labelContainer\n              )}\n            >\n              {hasLabel && (\n                <HvLabel\n                  id={setId(elementId, \"label\")}\n                  label={label}\n                  className={cx(\n                    colorPickerClasses.label,\n                    css(styles.label),\n                    classes?.label\n                  )}\n                />\n              )}\n\n              {hasDescription && (\n                <HvInfoMessage\n                  id={setId(elementId, \"description\")}\n                  className={cx(\n                    colorPickerClasses.description,\n                    classes?.description\n                  )}\n                >\n                  {description}\n                </HvInfoMessage>\n              )}\n            </div>\n          )}\n          <HvBaseDropdown\n            className={className}\n            expanded={isOpen}\n            onToggle={handleToggle}\n            onContainerCreation={setFocusToContent}\n            classes={{\n              root: iconOnly\n                ? cx(\n                    colorPickerClasses.dropdownRootIconOnly,\n                    css(styles.dropdownRootIconOnly),\n                    classes?.dropdownRootIconOnly\n                  )\n                : undefined,\n            }}\n            adornment={\n              iconOnly && color ? (\n                <Checkbox\n                  className={cx(\n                    colorPickerClasses.headerColorIconOnly,\n                    css(styles.headerColorIconOnly),\n                    css({\n                      \"& svg:last-child\": {\n                        fill: color,\n                      },\n                    }),\n                    classes?.headerColorIconOnly\n                  )}\n                  color={[color]}\n                />\n              ) : dropdownIcon === \"colorPicker\" ? (\n                <ColorPicker\n                  className={cx(\n                    colorPickerClasses.colorPickerIcon,\n                    css(styles.colorPickerIcon),\n                    classes?.colorPickerIcon\n                  )}\n                />\n              ) : undefined\n            }\n            placeholder={\n              iconOnly ? undefined : color ? (\n                <>\n                  <Checkbox\n                    className={cx(\n                      colorPickerClasses.headerColorIcon,\n                      css(styles.headerColorIcon),\n                      css({\n                        \"& svg:last-child\": {\n                          fill: color,\n                        },\n                      }),\n                      classes?.headerColorIcon\n                    )}\n                    color={[color]}\n                  />\n                  <HvTypography\n                    className={cx(\n                      colorPickerClasses.headerColorValue,\n                      css(styles.headerColorValue),\n                      classes?.headerColorValue\n                    )}\n                    variant={activeTheme?.colorPicker.inputValueVariant}\n                  >\n                    {color}\n                  </HvTypography>\n                </>\n              ) : (\n                placeholder\n              )\n            }\n            aria-label={ariaLabel}\n            aria-labelledby={\n              [label && setId(elementId, \"label\"), ariaLabelledBy]\n                .join(\" \")\n                .trim() || undefined\n            }\n            aria-describedby={\n              [description && setId(elementId, \"description\"), ariaDescribedBy]\n                .join(\" \")\n                .trim() || undefined\n            }\n          >\n            <HvPanel\n              className={cx(\n                colorPickerClasses.panel,\n                css(styles.panel),\n                classes?.panel\n              )}\n            >\n              <div\n                className={cx(\n                  colorPickerClasses.colorPicker,\n                  css(styles.colorPicker),\n                  classes?.colorPicker\n                )}\n              >\n                {recommendedColorsPosition === \"top\" && (\n                  <PresetColors\n                    className={cx(\n                      colorPickerClasses.recommendedColorsRoot,\n                      (showCustomColors || showSavedColors) &&\n                        css({\n                          paddingBottom:\n                            activeTheme?.colorPicker\n                              .recommendedColorsBottomPadding,\n                        }),\n                      classes?.recommendedColorsRoot\n                    )}\n                    colors={recommendedColors}\n                    onClick={handleSelect}\n                    title={\n                      showLabels ? labels?.recommendedColorsLabel : undefined\n                    }\n                  />\n                )}\n                {showCustomColors && (\n                  <Picker\n                    classes={{\n                      fields:\n                        recommendedColorsPosition === \"bottom\" ||\n                        showSavedColors\n                          ? cx(\n                              colorPickerClasses.pickerFields,\n                              css(styles.pickerFields),\n                              classes?.pickerFields\n                            )\n                          : undefined,\n                    }}\n                    title={showLabels ? labels?.customColorsLabel : undefined}\n                    color={color}\n                    onChange={handleSelect}\n                  />\n                )}\n                {showSavedColors && (\n                  <SavedColors\n                    colors={savedColors}\n                    onAddColor={handleAddColor}\n                    onClickColor={handleSelect}\n                    onRemoveColor={handleRemoveColor}\n                    deleteButtonArialLabel={deleteSavedColorButtonArialLabel}\n                  />\n                )}\n                {recommendedColorsPosition === \"bottom\" && (\n                  <PresetColors\n                    colors={recommendedColors}\n                    onClick={handleSelect}\n                    title={\n                      showLabels ? labels?.recommendedColorsLabel : undefined\n                    }\n                  />\n                )}\n              </div>\n            </HvPanel>\n          </HvBaseDropdown>\n        </HvFormElement>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["DEFAULT_LABELS","recommendedColorsLabel","customColorsLabel","HvColorPicker","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","value","onChange","defaultValue","expanded","defaultExpanded","recommendedColorsPosition","recommendedColors","showLabels","labels","labelsProp","dropdownIcon","placeholder","iconOnly","showSavedColors","showCustomColors","savedColorsValue","defaultSavedColorsValue","onSavedColorAdded","onSavedColorRemoved","deleteSavedColorButtonArialLabel","activeTheme","useTheme","useLabels","isOpen","setIsOpen","useControlled","Boolean","color","setColor","savedColors","setSavedColors","elementId","useUniqueId","hasLabel","hasDescription","handleToggle","_","open","handleSelect","val","hex","handleAddColor","colorToAdd","handleRemoveColor","position","sColors","splice","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","ClassNames","children","css","cx","HvFormElement","colorPickerClasses","root","labelContainer","styles","_jsx","HvLabel","setId","HvInfoMessage","HvBaseDropdown","onToggle","onContainerCreation","dropdownRootIconOnly","undefined","adornment","Checkbox","headerColorIconOnly","fill","ColorPicker","colorPickerIcon","_Fragment","headerColorIcon","HvTypography","headerColorValue","variant","colorPicker","inputValueVariant","join","trim","HvPanel","panel","PresetColors","recommendedColorsRoot","paddingBottom","recommendedColorsBottomPadding","colors","onClick","title","Picker","fields","pickerFields","SavedColors","onAddColor","onClickColor","onRemoveColor","deleteButtonArialLabel"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.cjs","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import {\n  HvBaseDropdown,\n  HvFormElement,\n  HvInfoMessage,\n  HvLabel,\n  HvPanel,\n  HvTypography,\n} from \"@core/components\";\nimport { ClassNames } from \"@emotion/react\";\nimport { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\nimport { ColorState } from \"react-color\";\nimport { useControlled, useLabels, useTheme, useUniqueId } from \"@core/hooks\";\nimport { setId } from \"@core/utils\";\nimport { Picker } from \"./Picker\";\nimport { styles } from \"./ColorPicker.styles\";\nimport colorPickerClasses, { HvColorPickerClasses } from \"./colorPickerClasses\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\n\nexport interface HvColorPickerProps {\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  \"aria-describedby\"?: string;\n  /** Class names to be applied. */\n  className?: string;\n  /** Id to be applied to the form element root node. */\n  id?: string;\n  /** The form element name. */\n  name?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be provided instead.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /** The value color, in HEX format. */\n  value?: string;\n  /** The default value color, in HEX format. */\n  defaultValue?: string;\n  /** If `true` the dropdown is disabled unable to be interacted, if `false` it is enabled. */\n  disabled?: boolean;\n  /** If `true` the dropdown starts opened if `false` it starts closed. */\n  expanded?: boolean;\n  /** When uncontrolled, defines the initial expanded state. */\n  defaultExpanded?: boolean;\n  /** A function to be executed whenever the color changes. */\n  onChange?: (color: string) => void;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvColorPickerClasses;\n  /** The placeholder value when nothing is selected. */\n  placeholder?: string;\n  /** Recommended colors. The colors are HEX values. */\n  recommendedColors?: string[];\n  /** Recommended colors position. */\n  recommendedColorsPosition?: \"top\" | \"bottom\";\n  /** If `true`, the labels are shown. If `false`, they are not shown. */\n  showLabels?: boolean;\n  /** An object containing all the labels. */\n  labels?: {\n    recommendedColorsLabel?: string;\n    customColorsLabel?: string;\n  };\n  /** Icon type for the input's end adornment. */\n  dropdownIcon?: \"arrow\" | \"colorPicker\";\n  /** If `true`, the input only shows an icon. If `false`, the input shows text and icons. */\n  iconOnly?: boolean;\n  /** If `true`, the saved colors area is shown. If `false`, it is not shown. */\n  showSavedColors?: boolean;\n  /** If `true`, the custom colors area is shown. If `false`, it is not shown. */\n  showCustomColors?: boolean;\n  /** The saved colors. The colors are HEX values. */\n  savedColorsValue?: string[];\n  /** The default saved colors. The colors are HEX values. */\n  defaultSavedColorsValue?: string[];\n  /** Callback fired when a new saved color is added. */\n  onSavedColorAdded?: (color?: string) => void;\n  /** Callback fired when a new saved color is removed. */\n  onSavedColorRemoved?: (color?: string) => void;\n  /** Aria label to apply to delete saved color button. */\n  deleteSavedColorButtonArialLabel?: string;\n}\n\nconst DEFAULT_LABELS: HvColorPickerProps[\"labels\"] = {\n  recommendedColorsLabel: \"Recommended colors:\",\n  customColorsLabel: \"Custom colors:\",\n};\n\n/**\n * A color picker component which allows the user to select a color from a list of pre-defined colors or freely select one color via the Hue and Saturation.\n * It receives a color string in HEX format and outputs an HEX formatted color.\n */\nexport const HvColorPicker = ({\n  id,\n  name,\n  required = false,\n  disabled = false,\n  label,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  description,\n  \"aria-describedby\": ariaDescribedBy,\n  className,\n  classes,\n  value,\n  onChange,\n  defaultValue = \"\",\n  expanded,\n  defaultExpanded = false,\n  recommendedColorsPosition = \"top\",\n  recommendedColors = [\n    \"#95AFE8\",\n    \"#E89E5D\",\n    \"#83B8A6\",\n    \"#70759C\",\n    \"#C57E7E\",\n    \"#FADA95\",\n    \"#ADBFE8\",\n    \"#E3B386\",\n    \"#9AC6B7\",\n    \"#8B90AF\",\n    \"#CF9797\",\n    \"#FAE1AA\",\n  ],\n  showLabels = true,\n  labels: labelsProp,\n  dropdownIcon = \"colorPicker\",\n  placeholder = \"Select color...\",\n  iconOnly = false,\n  showSavedColors = true,\n  showCustomColors = true,\n  savedColorsValue,\n  defaultSavedColorsValue = [],\n  onSavedColorAdded,\n  onSavedColorRemoved,\n  deleteSavedColorButtonArialLabel = \"Delete saved color\",\n}: HvColorPickerProps) => {\n  const { activeTheme } = useTheme();\n\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n  const [color, setColor] = useControlled(value, defaultValue);\n  const [savedColors, setSavedColors] = useControlled(\n    savedColorsValue,\n    defaultSavedColorsValue\n  );\n  const elementId = useUniqueId(id, \"hvdropdown\");\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  const handleToggle = (_, open: boolean) => {\n    setIsOpen(open);\n  };\n\n  const handleSelect = (val: ColorState | { hex: string; source: string }) => {\n    onChange?.(val.hex);\n    setColor(val.hex);\n  };\n\n  const handleAddColor = () => {\n    // When no color is provided, react-color sets the picker to #000000.\n    // This is the color that should be added in this case.\n    const colorToAdd = color || \"#000000\";\n\n    onSavedColorAdded?.(colorToAdd);\n    setSavedColors([...savedColors, colorToAdd]);\n  };\n\n  const handleRemoveColor = (val: string, position: number) => {\n    if (savedColors[position] === val) {\n      const sColors = [...savedColors];\n      sColors.splice(position, 1);\n      onSavedColorRemoved?.(val);\n      setSavedColors(sColors);\n    }\n  };\n\n  const setFocusToContent = (containerRef: HTMLElement | null) => {\n    const inputs = containerRef?.getElementsByTagName(\"input\");\n    if (inputs && inputs.length > 0) {\n      inputs[0].focus();\n    }\n  };\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <HvFormElement\n          id={id}\n          name={name}\n          disabled={disabled}\n          required={required}\n          className={cx(colorPickerClasses.root, className, classes?.root)}\n        >\n          {(hasLabel || hasDescription) && (\n            <div\n              className={cx(\n                colorPickerClasses.labelContainer,\n                css(styles.labelContainer),\n                classes?.labelContainer\n              )}\n            >\n              {hasLabel && (\n                <HvLabel\n                  id={setId(elementId, \"label\")}\n                  label={label}\n                  className={cx(\n                    colorPickerClasses.label,\n                    css(styles.label),\n                    classes?.label\n                  )}\n                />\n              )}\n\n              {hasDescription && (\n                <HvInfoMessage\n                  id={setId(elementId, \"description\")}\n                  className={cx(\n                    colorPickerClasses.description,\n                    classes?.description\n                  )}\n                >\n                  {description}\n                </HvInfoMessage>\n              )}\n            </div>\n          )}\n          <HvBaseDropdown\n            className={className}\n            expanded={isOpen}\n            onToggle={handleToggle}\n            onContainerCreation={setFocusToContent}\n            classes={{\n              root: iconOnly\n                ? cx(\n                    colorPickerClasses.dropdownRootIconOnly,\n                    css(styles.dropdownRootIconOnly),\n                    classes?.dropdownRootIconOnly\n                  )\n                : undefined,\n            }}\n            adornment={\n              iconOnly && color ? (\n                <Checkbox\n                  className={cx(\n                    colorPickerClasses.headerColorIconOnly,\n                    css(styles.headerColorIconOnly),\n                    css({\n                      \"& svg:last-child\": {\n                        fill: color,\n                      },\n                    }),\n                    classes?.headerColorIconOnly\n                  )}\n                  color={[color]}\n                />\n              ) : dropdownIcon === \"colorPicker\" ? (\n                <ColorPicker\n                  className={cx(\n                    colorPickerClasses.colorPickerIcon,\n                    css(styles.colorPickerIcon),\n                    classes?.colorPickerIcon\n                  )}\n                />\n              ) : undefined\n            }\n            placeholder={\n              iconOnly ? undefined : color ? (\n                <>\n                  <Checkbox\n                    className={cx(\n                      colorPickerClasses.headerColorIcon,\n                      css(styles.headerColorIcon),\n                      css({\n                        \"& svg:last-child\": {\n                          fill: color,\n                        },\n                      }),\n                      classes?.headerColorIcon\n                    )}\n                    color={[color]}\n                  />\n                  <HvTypography\n                    className={cx(\n                      colorPickerClasses.headerColorValue,\n                      css(styles.headerColorValue),\n                      classes?.headerColorValue\n                    )}\n                    variant={activeTheme?.colorPicker.inputValueVariant}\n                  >\n                    {color}\n                  </HvTypography>\n                </>\n              ) : (\n                placeholder\n              )\n            }\n            aria-label={ariaLabel}\n            aria-labelledby={\n              [label && setId(elementId, \"label\"), ariaLabelledBy]\n                .join(\" \")\n                .trim() || undefined\n            }\n            aria-describedby={\n              [description && setId(elementId, \"description\"), ariaDescribedBy]\n                .join(\" \")\n                .trim() || undefined\n            }\n          >\n            <HvPanel\n              className={cx(\n                colorPickerClasses.panel,\n                css(styles.panel),\n                classes?.panel\n              )}\n            >\n              <div\n                className={cx(\n                  colorPickerClasses.colorPicker,\n                  css(styles.colorPicker),\n                  classes?.colorPicker\n                )}\n              >\n                {recommendedColorsPosition === \"top\" && (\n                  <PresetColors\n                    className={cx(\n                      colorPickerClasses.recommendedColorsRoot,\n                      (showCustomColors || showSavedColors) &&\n                        css({\n                          paddingBottom:\n                            activeTheme?.colorPicker\n                              .recommendedColorsBottomPadding,\n                        }),\n                      classes?.recommendedColorsRoot\n                    )}\n                    colors={recommendedColors}\n                    onClick={handleSelect}\n                    title={\n                      showLabels ? labels?.recommendedColorsLabel : undefined\n                    }\n                  />\n                )}\n                {showCustomColors && (\n                  <Picker\n                    classes={{\n                      fields:\n                        recommendedColorsPosition === \"bottom\" ||\n                        showSavedColors\n                          ? cx(\n                              colorPickerClasses.pickerFields,\n                              css(styles.pickerFields),\n                              classes?.pickerFields\n                            )\n                          : undefined,\n                    }}\n                    title={showLabels ? labels?.customColorsLabel : undefined}\n                    color={color}\n                    onChange={handleSelect}\n                  />\n                )}\n                {showSavedColors && (\n                  <SavedColors\n                    colors={savedColors}\n                    onAddColor={handleAddColor}\n                    onClickColor={handleSelect}\n                    onRemoveColor={handleRemoveColor}\n                    deleteButtonArialLabel={deleteSavedColorButtonArialLabel}\n                  />\n                )}\n                {recommendedColorsPosition === \"bottom\" && (\n                  <PresetColors\n                    colors={recommendedColors}\n                    onClick={handleSelect}\n                    title={\n                      showLabels ? labels?.recommendedColorsLabel : undefined\n                    }\n                  />\n                )}\n              </div>\n            </HvPanel>\n          </HvBaseDropdown>\n        </HvFormElement>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["DEFAULT_LABELS","recommendedColorsLabel","customColorsLabel","HvColorPicker","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","value","onChange","defaultValue","expanded","defaultExpanded","recommendedColorsPosition","recommendedColors","showLabels","labels","labelsProp","dropdownIcon","placeholder","iconOnly","showSavedColors","showCustomColors","savedColorsValue","defaultSavedColorsValue","onSavedColorAdded","onSavedColorRemoved","deleteSavedColorButtonArialLabel","activeTheme","useTheme","useLabels","isOpen","setIsOpen","useControlled","Boolean","color","setColor","savedColors","setSavedColors","elementId","useUniqueId","hasLabel","hasDescription","handleToggle","_","open","handleSelect","val","hex","handleAddColor","colorToAdd","handleRemoveColor","position","sColors","splice","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","ClassNames","children","css","cx","HvFormElement","colorPickerClasses","root","labelContainer","styles","_jsx","HvLabel","setId","HvInfoMessage","HvBaseDropdown","onToggle","onContainerCreation","dropdownRootIconOnly","undefined","adornment","Checkbox","headerColorIconOnly","fill","ColorPicker","colorPickerIcon","_Fragment","headerColorIcon","HvTypography","headerColorValue","variant","colorPicker","inputValueVariant","join","trim","HvPanel","panel","PresetColors","recommendedColorsRoot","paddingBottom","recommendedColorsBottomPadding","colors","onClick","title","Picker","fields","pickerFields","SavedColors","onAddColor","onClickColor","onRemoveColor","deleteButtonArialLabel"],"mappings":"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"}

package/dist/cjs/components/ColorPicker/Picker/Picker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Picker.cjs","sources":["../../../../../src/components/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { useCallback } from \"react\";\nimport { Saturation, Hue } from \"react-color/lib/components/common\";\nimport {\n  CustomPicker,\n  CustomPickerInjectedProps,\n  HSLColor,\n  HSVColor,\n  RGBColor,\n} from \"react-color\";\nimport { styles } from \"./Picker.styles\";\nimport { Fields } from \"../Fields\";\nimport { HvTypography } from \"@core/components\";\nimport { useTheme } from \"@core/hooks\";\nimport colorPickerPickerClasses, {\n  HvColorPickerPickerClasses,\n} from \"./pickerClasses\";\n\nexport const Picker = ({\n  onChange,\n  rgb,\n  hsl,\n  hsv,\n  hex,\n  title,\n  classes,\n}: {\n  classes?: HvColorPickerPickerClasses;\n  title?: string;\n} & CustomPickerInjectedProps<\n  | HSLColor\n  | HSVColor\n  | RGBColor\n  | {\n      source?: string;\n      hex?: string;\n    }\n>) => {\n  const { activeTheme } = useTheme();\n\n  const SaturationPointer = useCallback(\n    () => (\n      <ClassNames>\n        {({ css, cx }) => (\n          <div\n            className={cx(\n              colorPickerPickerClasses.saturationPointer,\n              css(styles.saturationPointer),\n              classes?.saturationPointer\n            )}\n          />\n        )}\n      </ClassNames>\n    ),\n    []\n  );\n\n  const HueSlider = useCallback(\n    () => (\n      <ClassNames>\n        {({ css, cx }) => (\n          <div\n            className={cx(\n              colorPickerPickerClasses.hueSlider,\n              css(styles.hueSlider),\n              classes?.hueSlider\n            )}\n          />\n        )}\n      </ClassNames>\n    ),\n    []\n  );\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <>\n          {title && (\n            <HvTypography\n              className={cx(\n                colorPickerPickerClasses.title,\n                css(styles.title),\n                classes?.title\n              )}\n              variant=\"caption1\"\n            >\n              {title}\n            </HvTypography>\n          )}\n          <div\n            className={cx(\n              colorPickerPickerClasses.pickers,\n              css(styles.pickers),\n              classes?.pickers\n            )}\n          >\n            <div\n              className={cx(\n                colorPickerPickerClasses.saturation,\n                css(styles.saturation),\n                classes?.saturation\n              )}\n            >\n              <Saturation\n                hsl={hsl}\n                hsv={hsv}\n                onChange={onChange}\n                pointer={SaturationPointer}\n              />\n            </div>\n            <div\n              className={cx(\n                colorPickerPickerClasses.hue,\n                css(styles.hue),\n                classes?.hue\n              )}\n            >\n              <Hue\n                direction={activeTheme?.colorPicker.hueDirection}\n                hsl={hsl}\n                onChange={onChange}\n                pointer={HueSlider}\n              />\n            </div>\n          </div>\n          <Fields\n            className={cx(colorPickerPickerClasses.fields, classes?.fields)}\n            rgb={rgb}\n            hex={hex}\n            onChange={onChange}\n          />\n        </>\n      )}\n    </ClassNames>\n  );\n};\n\nexport default CustomPicker(Picker);\n"],"names":["Picker","onChange","rgb","hsl","hsv","hex","title","classes","activeTheme","useTheme","SaturationPointer","useCallback","_jsx","ClassNames","children","css","cx","className","colorPickerPickerClasses","saturationPointer","styles","HueSlider","hueSlider","_Fragment","HvTypography","variant","_jsxs","pickers","saturation","Saturation","pointer","hue","Hue","direction","colorPicker","hueDirection","Fields","fields","CustomPicker"],"mappings":";;;;;;;;;;;;AAkBO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAYF,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAU,SAAA;AAElC,QAAMC,oBAAoBC,MAAAA,YACxB,MACEC,2BAAAA,IAACC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACP,OAAA;AAAA,MACEC,WAAWD,GACTE,cAAyBC,QAAAA,mBACzBJ,IAAIK,cAAAA,OAAOD,iBAAiB,GAC5BZ,mCAASY,iBAAiB;AAAA,IAAA,CAC1B;AAAA,EAAA,CAIT,GACD,CAAE,CAAA;AAGJ,QAAME,YAAYV,MAAAA,YAChB,MACEC,2BAAAA,IAACC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACP,OAAA;AAAA,MACEC,WAAWD,GACTE,cAAyBI,QAAAA,WACzBP,IAAIK,cAAAA,OAAOE,SAAS,GACpBf,mCAASe,SAAS;AAAA,IAAA,CAClB;AAAA,EAAA,CAIT,GACD,CAAE,CAAA;AAGJ,wCACGT,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,sCACPO,WAAAA,UAAA;AAAA,MAAAT,UACGR,CAAAA,SACCM,2BAAAA,IAACY,yBAAY;AAAA,QACXP,WAAWD,GACTE,cAAyBZ,QAAAA,OACzBS,IAAIK,cAAAA,OAAOd,KAAK,GAChBC,mCAASD,KAAK;AAAA,QAEhBmB,SAAQ;AAAA,QAAUX,UAEjBR;AAAAA,MAAAA,CAAK,GAGVoB,2BAAAA,KAAA,OAAA;AAAA,QACET,WAAWD,GACTE,cAAyBS,QAAAA,SACzBZ,IAAIK,cAAAA,OAAOO,OAAO,GAClBpB,mCAASoB,OAAO;AAAA,QAChBb,WAEFF,2BAAAA,IAAA,OAAA;AAAA,UACEK,WAAWD,GACTE,cAAyBU,QAAAA,YACzBb,IAAIK,cAAAA,OAAOQ,UAAU,GACrBrB,mCAASqB,UAAU;AAAA,UACnBd,yCAEDe,mBAAU;AAAA,YACT1B;AAAAA,YACAC;AAAAA,YACAH;AAAAA,YACA6B,SAASpB;AAAAA,UAAAA,CAAkB;AAAA,QAAA,CAC3B,GAEJE,2BAAAA,IAAA,OAAA;AAAA,UACEK,WAAWD,GACTE,cAAyBa,QAAAA,KACzBhB,IAAIK,cAAAA,OAAOW,GAAG,GACdxB,mCAASwB,GAAG;AAAA,UACZjB,yCAEDkB,YAAG;AAAA,YACFC,WAAWzB,2CAAa0B,YAAYC;AAAAA,YACpChC;AAAAA,YACAF;AAAAA,YACA6B,SAAST;AAAAA,UAAAA,CAAU;AAAA,QAAA,CAEjB,CAAA;AAAA,MAAA,CACF,GACNT,2BAAAA,IAACwB,eAAM;AAAA,QACLnB,WAAWD,GAAGE,cAAAA,QAAyBmB,QAAQ9B,mCAAS8B,MAAM;AAAA,QAC9DnC;AAAAA,QACAG;AAAAA,QACAJ;AAAAA,MAAAA,CACA,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAGK;AAEjB;AAEA,MAAeqC,WAAAA,WAAAA,aAAatC,MAAM;;;"}
+{"version":3,"file":"Picker.cjs","sources":["../../../../../src/components/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { useCallback } from \"react\";\nimport { Saturation, Hue } from \"react-color/lib/components/common\";\nimport {\n  CustomPicker,\n  CustomPickerInjectedProps,\n  HSLColor,\n  HSVColor,\n  RGBColor,\n} from \"react-color\";\nimport { HvTypography } from \"@core/components\";\nimport { useTheme } from \"@core/hooks\";\nimport { styles } from \"./Picker.styles\";\nimport { Fields } from \"../Fields\";\nimport colorPickerPickerClasses, {\n  HvColorPickerPickerClasses,\n} from \"./pickerClasses\";\n\nexport const Picker = ({\n  onChange,\n  rgb,\n  hsl,\n  hsv,\n  hex,\n  title,\n  classes,\n}: {\n  classes?: HvColorPickerPickerClasses;\n  title?: string;\n} & CustomPickerInjectedProps<\n  | HSLColor\n  | HSVColor\n  | RGBColor\n  | {\n      source?: string;\n      hex?: string;\n    }\n>) => {\n  const { activeTheme } = useTheme();\n\n  const SaturationPointer = useCallback(\n    () => (\n      <ClassNames>\n        {({ css, cx }) => (\n          <div\n            className={cx(\n              colorPickerPickerClasses.saturationPointer,\n              css(styles.saturationPointer),\n              classes?.saturationPointer\n            )}\n          />\n        )}\n      </ClassNames>\n    ),\n    []\n  );\n\n  const HueSlider = useCallback(\n    () => (\n      <ClassNames>\n        {({ css, cx }) => (\n          <div\n            className={cx(\n              colorPickerPickerClasses.hueSlider,\n              css(styles.hueSlider),\n              classes?.hueSlider\n            )}\n          />\n        )}\n      </ClassNames>\n    ),\n    []\n  );\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <>\n          {title && (\n            <HvTypography\n              className={cx(\n                colorPickerPickerClasses.title,\n                css(styles.title),\n                classes?.title\n              )}\n              variant=\"caption1\"\n            >\n              {title}\n            </HvTypography>\n          )}\n          <div\n            className={cx(\n              colorPickerPickerClasses.pickers,\n              css(styles.pickers),\n              classes?.pickers\n            )}\n          >\n            <div\n              className={cx(\n                colorPickerPickerClasses.saturation,\n                css(styles.saturation),\n                classes?.saturation\n              )}\n            >\n              <Saturation\n                hsl={hsl}\n                hsv={hsv}\n                onChange={onChange}\n                pointer={SaturationPointer}\n              />\n            </div>\n            <div\n              className={cx(\n                colorPickerPickerClasses.hue,\n                css(styles.hue),\n                classes?.hue\n              )}\n            >\n              <Hue\n                direction={activeTheme?.colorPicker.hueDirection}\n                hsl={hsl}\n                onChange={onChange}\n                pointer={HueSlider}\n              />\n            </div>\n          </div>\n          <Fields\n            className={cx(colorPickerPickerClasses.fields, classes?.fields)}\n            rgb={rgb}\n            hex={hex}\n            onChange={onChange}\n          />\n        </>\n      )}\n    </ClassNames>\n  );\n};\n\nexport default CustomPicker(Picker);\n"],"names":["Picker","onChange","rgb","hsl","hsv","hex","title","classes","activeTheme","useTheme","SaturationPointer","useCallback","_jsx","ClassNames","children","css","cx","className","colorPickerPickerClasses","saturationPointer","styles","HueSlider","hueSlider","_Fragment","HvTypography","variant","_jsxs","pickers","saturation","Saturation","pointer","hue","Hue","direction","colorPicker","hueDirection","Fields","fields","CustomPicker"],"mappings":";;;;;;;;;;;;AAkBO,MAAMA,SAASA,CAAC;AAAA,EACrBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAYF,MAAM;AACE,QAAA;AAAA,IAAEC;AAAAA,MAAgBC,SAAU,SAAA;AAElC,QAAMC,oBAAoBC,MAAAA,YACxB,MACEC,2BAAAA,IAACC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACP,OAAA;AAAA,MACEC,WAAWD,GACTE,cAAyBC,QAAAA,mBACzBJ,IAAIK,cAAAA,OAAOD,iBAAiB,GAC5BZ,mCAASY,iBAAiB;AAAA,IAAA,CAC1B;AAAA,EAAA,CAIT,GACD,CAAE,CAAA;AAGJ,QAAME,YAAYV,MAAAA,YAChB,MACEC,2BAAAA,IAACC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,qCACP,OAAA;AAAA,MACEC,WAAWD,GACTE,cAAyBI,QAAAA,WACzBP,IAAIK,cAAAA,OAAOE,SAAS,GACpBf,mCAASe,SAAS;AAAA,IAAA,CAClB;AAAA,EAAA,CAIT,GACD,CAAE,CAAA;AAGJ,wCACGT,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,sCACPO,WAAAA,UAAA;AAAA,MAAAT,UACGR,CAAAA,SACCM,2BAAAA,IAACY,yBAAY;AAAA,QACXP,WAAWD,GACTE,cAAyBZ,QAAAA,OACzBS,IAAIK,cAAAA,OAAOd,KAAK,GAChBC,mCAASD,KAAK;AAAA,QAEhBmB,SAAQ;AAAA,QAAUX,UAEjBR;AAAAA,MAAAA,CAAK,GAGVoB,2BAAAA,KAAA,OAAA;AAAA,QACET,WAAWD,GACTE,cAAyBS,QAAAA,SACzBZ,IAAIK,cAAAA,OAAOO,OAAO,GAClBpB,mCAASoB,OAAO;AAAA,QAChBb,WAEFF,2BAAAA,IAAA,OAAA;AAAA,UACEK,WAAWD,GACTE,cAAyBU,QAAAA,YACzBb,IAAIK,cAAAA,OAAOQ,UAAU,GACrBrB,mCAASqB,UAAU;AAAA,UACnBd,yCAEDe,mBAAU;AAAA,YACT1B;AAAAA,YACAC;AAAAA,YACAH;AAAAA,YACA6B,SAASpB;AAAAA,UAAAA,CAAkB;AAAA,QAAA,CAC3B,GAEJE,2BAAAA,IAAA,OAAA;AAAA,UACEK,WAAWD,GACTE,cAAyBa,QAAAA,KACzBhB,IAAIK,cAAAA,OAAOW,GAAG,GACdxB,mCAASwB,GAAG;AAAA,UACZjB,yCAEDkB,YAAG;AAAA,YACFC,WAAWzB,2CAAa0B,YAAYC;AAAAA,YACpChC;AAAAA,YACAF;AAAAA,YACA6B,SAAST;AAAAA,UAAAA,CAAU;AAAA,QAAA,CAEjB,CAAA;AAAA,MAAA,CACF,GACNT,2BAAAA,IAACwB,eAAM;AAAA,QACLnB,WAAWD,GAAGE,cAAAA,QAAyBmB,QAAQ9B,mCAAS8B,MAAM;AAAA,QAC9DnC;AAAAA,QACAG;AAAAA,QACAJ;AAAAA,MAAAA,CACA,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAGK;AAEjB;AAEA,MAAeqC,WAAAA,WAAAA,aAAatC,MAAM;;;"}

package/dist/cjs/components/ColorPicker/PresetColors/PresetColors.cjs

@@ -1,9 +1,9 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("@emotion/react");
+const common = require("react-color/lib/components/common");
 const PresetColors_styles = require("./PresetColors.styles.cjs");
 const presetColorsClasses = require("./presetColorsClasses.cjs");
-const common = require("react-color/lib/components/common");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Typography = require("../../Typography/Typography.cjs");
 const PresetColors = ({

package/dist/cjs/components/ColorPicker/PresetColors/PresetColors.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"PresetColors.cjs","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { styles } from \"./PresetColors.styles\";\nimport { HvTypography } from \"@core/components\";\nimport colorPickerPresetColorsClasses, {\n  HvColorPickerPresetColorsClasses,\n} from \"./presetColorsClasses\";\n\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\ninterface PresetColorsProps {\n  colors: string[];\n  onClick: (color: { hex: string; source: string }) => void;\n  title?: string;\n  className?: string;\n  classes?: HvColorPickerPresetColorsClasses;\n}\n\nexport const PresetColors = ({\n  onClick,\n  colors,\n  title,\n  className,\n  classes,\n}: PresetColorsProps) => {\n  const handleClick = (hex: string) => {\n    onClick({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            colorPickerPresetColorsClasses.root,\n            css(styles.root),\n            className,\n            classes?.root\n          )}\n        >\n          {title && (\n            <HvTypography\n              className={cx(\n                colorPickerPresetColorsClasses.title,\n                css(styles.title),\n                classes?.title\n              )}\n              variant=\"caption1\"\n            >\n              {title}\n            </HvTypography>\n          )}\n          <div\n            className={cx(\n              colorPickerPresetColorsClasses.colors,\n              css(styles.colors),\n              classes?.colors\n            )}\n          >\n            {colors.map((color, index) => {\n              return (\n                <div\n                  key={`recommended-color-${color}-${index}`}\n                  className={cx(\n                    colorPickerPresetColorsClasses.swatchWrap,\n                    css(styles.swatchWrap),\n                    classes?.swatchWrap\n                  )}\n                >\n                  <Swatch\n                    color={color}\n                    onClick={handleClick}\n                    focusStyle={{\n                      boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n                    }}\n                  />\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["PresetColors","onClick","colors","title","className","classes","handleClick","hex","source","ClassNames","children","css","cx","colorPickerPresetColorsClasses","root","styles","_jsx","HvTypography","variant","map","color","index","swatchWrap","Swatch","focusStyle","boxShadow"],"mappings":";;;;;;;;AAmBO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACiB,MAAM;AACjBC,QAAAA,cAAcA,CAACC,QAAgB;AAC3B,YAAA;AAAA,MACNA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,sCACP,OAAA;AAAA,MACER,WAAWQ,GACTC,4BAA+BC,MAC/BH,IAAII,2BAAOD,IAAI,GACfV,WACAC,mCAASS,IAAI;AAAA,MACbJ,UAEDP,CAAAA,SACCa,2BAAAA,IAACC,yBAAY;AAAA,QACXb,WAAWQ,GACTC,oBAA+BV,QAAAA,OAC/BQ,IAAII,oBAAAA,OAAOZ,KAAK,GAChBE,mCAASF,KAAK;AAAA,QAEhBe,SAAQ;AAAA,QAAUR,UAEjBP;AAAAA,MAAAA,CAAK,GAGVa,2BAAAA,IAAA,OAAA;AAAA,QACEZ,WAAWQ,GACTC,oBAA+BX,QAAAA,QAC/BS,IAAII,oBAAAA,OAAOb,MAAM,GACjBG,mCAASH,MAAM;AAAA,QACfQ,UAEDR,OAAOiB,IAAI,CAACC,OAAOC,UAAU;AAC5B,gDACE,OAAA;AAAA,YAEEjB,WAAWQ,GACTC,oBAA+BS,QAAAA,YAC/BX,IAAII,oBAAAA,OAAOO,UAAU,GACrBjB,mCAASiB,UAAU;AAAA,YACnBZ,yCAEDa,eAAM;AAAA,cACLH;AAAAA,cACAnB,SAASK;AAAAA,cACTkB,YAAY;AAAA,gBACVC,WAAY,4CAA2CL;AAAAA,cACzD;AAAA,YAAA,CAAE;AAAA,UAAA,GAZE,qBAAoBA,SAASC,OAAO;AAAA,QAAA,CAgB/C;AAAA,MAAA,CACG,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAGC;AAEjB;;"}
+{"version":3,"file":"PresetColors.cjs","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { HvTypography } from \"@core/components\";\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\nimport { styles } from \"./PresetColors.styles\";\nimport colorPickerPresetColorsClasses, {\n  HvColorPickerPresetColorsClasses,\n} from \"./presetColorsClasses\";\n\ninterface PresetColorsProps {\n  colors: string[];\n  onClick: (color: { hex: string; source: string }) => void;\n  title?: string;\n  className?: string;\n  classes?: HvColorPickerPresetColorsClasses;\n}\n\nexport const PresetColors = ({\n  onClick,\n  colors,\n  title,\n  className,\n  classes,\n}: PresetColorsProps) => {\n  const handleClick = (hex: string) => {\n    onClick({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            colorPickerPresetColorsClasses.root,\n            css(styles.root),\n            className,\n            classes?.root\n          )}\n        >\n          {title && (\n            <HvTypography\n              className={cx(\n                colorPickerPresetColorsClasses.title,\n                css(styles.title),\n                classes?.title\n              )}\n              variant=\"caption1\"\n            >\n              {title}\n            </HvTypography>\n          )}\n          <div\n            className={cx(\n              colorPickerPresetColorsClasses.colors,\n              css(styles.colors),\n              classes?.colors\n            )}\n          >\n            {colors.map((color, index) => {\n              return (\n                <div\n                  key={`recommended-color-${color}-${index}`}\n                  className={cx(\n                    colorPickerPresetColorsClasses.swatchWrap,\n                    css(styles.swatchWrap),\n                    classes?.swatchWrap\n                  )}\n                >\n                  <Swatch\n                    color={color}\n                    onClick={handleClick}\n                    focusStyle={{\n                      boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n                    }}\n                  />\n                </div>\n              );\n            })}\n          </div>\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["PresetColors","onClick","colors","title","className","classes","handleClick","hex","source","ClassNames","children","css","cx","colorPickerPresetColorsClasses","root","styles","_jsx","HvTypography","variant","map","color","index","swatchWrap","Swatch","focusStyle","boxShadow"],"mappings":";;;;;;;;AAkBO,MAAMA,eAAeA,CAAC;AAAA,EAC3BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACiB,MAAM;AACjBC,QAAAA,cAAcA,CAACC,QAAgB;AAC3B,YAAA;AAAA,MACNA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,sCACP,OAAA;AAAA,MACER,WAAWQ,GACTC,4BAA+BC,MAC/BH,IAAII,2BAAOD,IAAI,GACfV,WACAC,mCAASS,IAAI;AAAA,MACbJ,UAEDP,CAAAA,SACCa,2BAAAA,IAACC,yBAAY;AAAA,QACXb,WAAWQ,GACTC,oBAA+BV,QAAAA,OAC/BQ,IAAII,oBAAAA,OAAOZ,KAAK,GAChBE,mCAASF,KAAK;AAAA,QAEhBe,SAAQ;AAAA,QAAUR,UAEjBP;AAAAA,MAAAA,CAAK,GAGVa,2BAAAA,IAAA,OAAA;AAAA,QACEZ,WAAWQ,GACTC,oBAA+BX,QAAAA,QAC/BS,IAAII,oBAAAA,OAAOb,MAAM,GACjBG,mCAASH,MAAM;AAAA,QACfQ,UAEDR,OAAOiB,IAAI,CAACC,OAAOC,UAAU;AAC5B,gDACE,OAAA;AAAA,YAEEjB,WAAWQ,GACTC,oBAA+BS,QAAAA,YAC/BX,IAAII,oBAAAA,OAAOO,UAAU,GACrBjB,mCAASiB,UAAU;AAAA,YACnBZ,yCAEDa,eAAM;AAAA,cACLH;AAAAA,cACAnB,SAASK;AAAAA,cACTkB,YAAY;AAAA,gBACVC,WAAY,4CAA2CL;AAAAA,cACzD;AAAA,YAAA,CAAE;AAAA,UAAA,GAZE,qBAAoBA,SAASC,OAAO;AAAA,QAAA,CAgB/C;AAAA,MAAA,CACG,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAGC;AAEjB;;"}

package/dist/cjs/components/ColorPicker/SavedColors/SavedColors.cjs

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const react = require("@emotion/react");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
-const SavedColors_styles = require("./SavedColors.styles.cjs");
 const common = require("react-color/lib/components/common");
+const SavedColors_styles = require("./SavedColors.styles.cjs");
 const savedColorsClasses = require("./savedColorsClasses.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const Button = require("../../Button/Button.cjs");

package/dist/cjs/components/ColorPicker/SavedColors/SavedColors.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"SavedColors.cjs","sources":["../../../../../src/components/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { HvButton } from \"@core/components\";\nimport { CloseXS, Add } from \"@hitachivantara/uikit-react-icons\";\nimport { styles } from \"./SavedColors.styles\";\n\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\nimport colorPickerSavedColorsClasses, {\n  HvColorPickerSavedColorsClasses,\n} from \"./savedColorsClasses\";\n\ninterface SavedColorsProps {\n  colors: string[];\n  onClickColor: (color: { hex: string; source: string }) => void;\n  onAddColor: () => void;\n  onRemoveColor: (color: string, index: number) => void;\n  deleteButtonArialLabel?: string;\n  classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = ({\n  colors,\n  onClickColor,\n  onAddColor,\n  onRemoveColor,\n  deleteButtonArialLabel,\n  classes,\n}: SavedColorsProps) => {\n  const handleClick = (hex: string) => {\n    onClickColor({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            colorPickerSavedColorsClasses.root,\n            css(styles.root),\n            classes?.root\n          )}\n        >\n          <HvButton\n            className={cx(\n              colorPickerSavedColorsClasses.addButton,\n              css(styles.addButton),\n              classes?.addButton\n            )}\n            variant=\"secondarySubtle\"\n            icon\n            onClick={onAddColor}\n          >\n            <Add />\n          </HvButton>\n          {colors.map((color, index) => {\n            return (\n              <div\n                key={`saved-color-${color}-${index}`}\n                className={cx(\n                  colorPickerSavedColorsClasses.swatchRoot,\n                  css(styles.swatchRoot),\n                  classes?.swatchRoot\n                )}\n              >\n                <div\n                  className={cx(\n                    colorPickerSavedColorsClasses.swatchWrap,\n                    css(styles.swatchWrap),\n                    classes?.swatchWrap\n                  )}\n                >\n                  <Swatch\n                    color={color}\n                    onClick={handleClick}\n                    focusStyle={{\n                      boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n                    }}\n                  />\n                </div>\n                <div\n                  className={cx(\n                    colorPickerSavedColorsClasses.removeButtonRoot,\n                    css(styles.removeButtonRoot),\n                    classes?.removeButtonRoot\n                  )}\n                >\n                  <HvButton\n                    className={cx(\n                      colorPickerSavedColorsClasses.removeButton,\n                      css(styles.removeButton),\n                      classes?.removeButton\n                    )}\n                    variant=\"secondarySubtle\"\n                    onClick={() => onRemoveColor(color, index)}\n                    tabIndex={0}\n                    aria-label={deleteButtonArialLabel}\n                  >\n                    <CloseXS iconSize=\"XS\" />\n                  </HvButton>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["SavedColors","colors","onClickColor","onAddColor","onRemoveColor","deleteButtonArialLabel","classes","handleClick","hex","source","ClassNames","children","css","cx","className","colorPickerSavedColorsClasses","root","styles","_jsx","HvButton","addButton","variant","icon","onClick","Add","map","color","index","swatchRoot","swatchWrap","Swatch","focusStyle","boxShadow","removeButtonRoot","removeButton","tabIndex","CloseXS","iconSize"],"mappings":";;;;;;;;;AAqBO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACgB,MAAM;AAChBC,QAAAA,cAAcA,CAACC,QAAgB;AACtB,iBAAA;AAAA,MACXA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,sCACP,OAAA;AAAA,MACEC,WAAWD,GACTE,mBAA8BC,QAAAA,MAC9BJ,IAAIK,mBAAAA,OAAOD,IAAI,GACfV,mCAASU,IAAI;AAAA,MACbL,UAAA,CAEFO,2BAAAA,IAACC,iBAAQ;AAAA,QACPL,WAAWD,GACTE,mBAA8BK,QAAAA,WAC9BR,IAAIK,mBAAAA,OAAOG,SAAS,GACpBd,mCAASc,SAAS;AAAA,QAEpBC,SAAQ;AAAA,QACRC,MAAI;AAAA,QACJC,SAASpB;AAAAA,QAAWQ,UAEpBO,2BAAAA,IAACM,gBAAG,KAAA,EAAA;AAAA,MACK,CAAA,GACVvB,OAAOwB,IAAI,CAACC,OAAOC,UAAU;AAC5B,+CACE,OAAA;AAAA,UAEEb,WAAWD,GACTE,mBAA8Ba,QAAAA,YAC9BhB,IAAIK,mBAAAA,OAAOW,UAAU,GACrBtB,mCAASsB,UAAU;AAAA,UACnBjB,WAEFO,2BAAAA,IAAA,OAAA;AAAA,YACEJ,WAAWD,GACTE,mBAA8Bc,QAAAA,YAC9BjB,IAAIK,mBAAAA,OAAOY,UAAU,GACrBvB,mCAASuB,UAAU;AAAA,YACnBlB,yCAEDmB,eAAM;AAAA,cACLJ;AAAAA,cACAH,SAAShB;AAAAA,cACTwB,YAAY;AAAA,gBACVC,WAAY,4CAA2CN;AAAAA,cACzD;AAAA,YAAA,CAAE;AAAA,UAAA,CACF,GAEJR,2BAAAA,IAAA,OAAA;AAAA,YACEJ,WAAWD,GACTE,mBAA8BkB,QAAAA,kBAC9BrB,IAAIK,mBAAAA,OAAOgB,gBAAgB,GAC3B3B,mCAAS2B,gBAAgB;AAAA,YACzBtB,yCAEDQ,iBAAQ;AAAA,cACPL,WAAWD,GACTE,mBAA8BmB,QAAAA,cAC9BtB,IAAIK,mBAAAA,OAAOiB,YAAY,GACvB5B,mCAAS4B,YAAY;AAAA,cAEvBb,SAAQ;AAAA,cACRE,SAASA,MAAMnB,cAAcsB,OAAOC,KAAK;AAAA,cACzCQ,UAAU;AAAA,cACV,cAAY9B;AAAAA,cAAuBM,yCAElCyB,yBAAO;AAAA,gBAACC,UAAS;AAAA,cAAA,CAAI;AAAA,YAAA,CAAG;AAAA,UAAA,CAEvB,CAAA;AAAA,QAAA,GA1CA,eAAcX,SAASC,OAAO;AAAA,MAAA,CA6CzC,CAAC;AAAA,IAAA,CAAA;AAAA,EAAA,CAGK;AAEjB;;"}
+{"version":3,"file":"SavedColors.cjs","sources":["../../../../../src/components/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["import { ClassNames } from \"@emotion/react\";\nimport { HvButton } from \"@core/components\";\nimport { CloseXS, Add } from \"@hitachivantara/uikit-react-icons\";\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\nimport { styles } from \"./SavedColors.styles\";\n\nimport colorPickerSavedColorsClasses, {\n  HvColorPickerSavedColorsClasses,\n} from \"./savedColorsClasses\";\n\ninterface SavedColorsProps {\n  colors: string[];\n  onClickColor: (color: { hex: string; source: string }) => void;\n  onAddColor: () => void;\n  onRemoveColor: (color: string, index: number) => void;\n  deleteButtonArialLabel?: string;\n  classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = ({\n  colors,\n  onClickColor,\n  onAddColor,\n  onRemoveColor,\n  deleteButtonArialLabel,\n  classes,\n}: SavedColorsProps) => {\n  const handleClick = (hex: string) => {\n    onClickColor({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            colorPickerSavedColorsClasses.root,\n            css(styles.root),\n            classes?.root\n          )}\n        >\n          <HvButton\n            className={cx(\n              colorPickerSavedColorsClasses.addButton,\n              css(styles.addButton),\n              classes?.addButton\n            )}\n            variant=\"secondarySubtle\"\n            icon\n            onClick={onAddColor}\n          >\n            <Add />\n          </HvButton>\n          {colors.map((color, index) => {\n            return (\n              <div\n                key={`saved-color-${color}-${index}`}\n                className={cx(\n                  colorPickerSavedColorsClasses.swatchRoot,\n                  css(styles.swatchRoot),\n                  classes?.swatchRoot\n                )}\n              >\n                <div\n                  className={cx(\n                    colorPickerSavedColorsClasses.swatchWrap,\n                    css(styles.swatchWrap),\n                    classes?.swatchWrap\n                  )}\n                >\n                  <Swatch\n                    color={color}\n                    onClick={handleClick}\n                    focusStyle={{\n                      boxShadow: `inset 0 0 0 1px rgba(0,0,0,.15), 0 0 4px ${color}`,\n                    }}\n                  />\n                </div>\n                <div\n                  className={cx(\n                    colorPickerSavedColorsClasses.removeButtonRoot,\n                    css(styles.removeButtonRoot),\n                    classes?.removeButtonRoot\n                  )}\n                >\n                  <HvButton\n                    className={cx(\n                      colorPickerSavedColorsClasses.removeButton,\n                      css(styles.removeButton),\n                      classes?.removeButton\n                    )}\n                    variant=\"secondarySubtle\"\n                    onClick={() => onRemoveColor(color, index)}\n                    tabIndex={0}\n                    aria-label={deleteButtonArialLabel}\n                  >\n                    <CloseXS iconSize=\"XS\" />\n                  </HvButton>\n                </div>\n              </div>\n            );\n          })}\n        </div>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["SavedColors","colors","onClickColor","onAddColor","onRemoveColor","deleteButtonArialLabel","classes","handleClick","hex","source","ClassNames","children","css","cx","className","colorPickerSavedColorsClasses","root","styles","_jsx","HvButton","addButton","variant","icon","onClick","Add","map","color","index","swatchRoot","swatchWrap","Swatch","focusStyle","boxShadow","removeButtonRoot","removeButton","tabIndex","CloseXS","iconSize"],"mappings":";;;;;;;;;AAqBO,MAAMA,cAAcA,CAAC;AAAA,EAC1BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AACgB,MAAM;AAChBC,QAAAA,cAAcA,CAACC,QAAgB;AACtB,iBAAA;AAAA,MACXA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,wCACGC,MAAAA,YAAU;AAAA,IAAAC,UACRA,CAAC;AAAA,MAAEC;AAAAA,MAAKC;AAAAA,IAAAA,sCACP,OAAA;AAAA,MACEC,WAAWD,GACTE,mBAA8BC,QAAAA,MAC9BJ,IAAIK,mBAAAA,OAAOD,IAAI,GACfV,mCAASU,IAAI;AAAA,MACbL,UAAA,CAEFO,2BAAAA,IAACC,iBAAQ;AAAA,QACPL,WAAWD,GACTE,mBAA8BK,QAAAA,WAC9BR,IAAIK,mBAAAA,OAAOG,SAAS,GACpBd,mCAASc,SAAS;AAAA,QAEpBC,SAAQ;AAAA,QACRC,MAAI;AAAA,QACJC,SAASpB;AAAAA,QAAWQ,UAEpBO,2BAAAA,IAACM,gBAAG,KAAA,EAAA;AAAA,MACK,CAAA,GACVvB,OAAOwB,IAAI,CAACC,OAAOC,UAAU;AAC5B,+CACE,OAAA;AAAA,UAEEb,WAAWD,GACTE,mBAA8Ba,QAAAA,YAC9BhB,IAAIK,mBAAAA,OAAOW,UAAU,GACrBtB,mCAASsB,UAAU;AAAA,UACnBjB,WAEFO,2BAAAA,IAAA,OAAA;AAAA,YACEJ,WAAWD,GACTE,mBAA8Bc,QAAAA,YAC9BjB,IAAIK,mBAAAA,OAAOY,UAAU,GACrBvB,mCAASuB,UAAU;AAAA,YACnBlB,yCAEDmB,eAAM;AAAA,cACLJ;AAAAA,cACAH,SAAShB;AAAAA,cACTwB,YAAY;AAAA,gBACVC,WAAY,4CAA2CN;AAAAA,cACzD;AAAA,YAAA,CAAE;AAAA,UAAA,CACF,GAEJR,2BAAAA,IAAA,OAAA;AAAA,YACEJ,WAAWD,GACTE,mBAA8BkB,QAAAA,kBAC9BrB,IAAIK,mBAAAA,OAAOgB,gBAAgB,GAC3B3B,mCAAS2B,gBAAgB;AAAA,YACzBtB,yCAEDQ,iBAAQ;AAAA,cACPL,WAAWD,GACTE,mBAA8BmB,QAAAA,cAC9BtB,IAAIK,mBAAAA,OAAOiB,YAAY,GACvB5B,mCAAS4B,YAAY;AAAA,cAEvBb,SAAQ;AAAA,cACRE,SAASA,MAAMnB,cAAcsB,OAAOC,KAAK;AAAA,cACzCQ,UAAU;AAAA,cACV,cAAY9B;AAAAA,cAAuBM,yCAElCyB,yBAAO;AAAA,gBAACC,UAAS;AAAA,cAAA,CAAI;AAAA,YAAA,CAAG;AAAA,UAAA,CAEvB,CAAA;AAAA,QAAA,GA1CA,eAAcX,SAASC,OAAO;AAAA,MAAA,CA6CzC,CAAC;AAAA,IAAA,CAAA;AAAA,EAAA,CAGK;AAEjB;;"}

package/dist/cjs/components/Container/Container.cjs

@@ -2,9 +2,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const styles = require("@mui/material/styles");
 const React = require("react");
+const clsx = require("clsx");
 const Container_styles = require("./Container.styles.cjs");
 const containerClasses = require("./containerClasses.cjs");
-const clsx = require("clsx");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const HvContainer = React.forwardRef(({
   maxWidth = false,

package/dist/cjs/components/Container/Container.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Container.cjs","sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { useTheme } from \"@mui/material/styles\";\nimport { ContainerProps as MuiContainerProps } from \"@mui/material/Container\";\nimport { forwardRef } from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport { StyledRoot } from \"./Container.styles\";\nimport containerClasses, { HvContainerClasses } from \"./containerClasses\";\nimport { clsx } from \"clsx\";\n\nexport interface HvContainerProps\n  extends Omit<MuiContainerProps, \"classes\">,\n    HvBaseProps {\n  /**\n   * The component used for the root node.\n   * Either a string to use a DOM element or a component.\n   */\n  component?: React.ElementType;\n  /**\n   * Determine the max-width of the container.\n   * The container width grows with the size of the screen.\n   * Set to `false` to disable `maxWidth`.\n   */\n  maxWidth?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | false;\n  /** If `true`, the left and right padding is removed. */\n  disableGutters?: boolean;\n  /**\n   * Set the max-width to match the min-width of the current breakpoint.\n   * This is useful if you'd prefer to design for a fixed set of sizes\n   * instead of trying to accommodate a fully fluid viewport.\n   * It's fluid by default.\n   */\n  fixed?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvContainerClasses;\n}\n\nexport const HvContainer = forwardRef<HTMLDivElement, HvContainerProps>(\n  ({ maxWidth = false, classes, className, fixed, ...others }, ref) => {\n    const muiTheme = useTheme();\n    return (\n      <StyledRoot\n        className={className}\n        classes={{\n          root: clsx(containerClasses.root, classes?.root),\n          disableGutters: clsx(\n            containerClasses.disableGutters,\n            classes?.disableGutters\n          ),\n          fixed: clsx(containerClasses.fixed, classes?.fixed),\n          maxWidthXs: clsx(containerClasses.maxWidthXs, classes?.maxWidthXs),\n          maxWidthSm: clsx(containerClasses.maxWidthSm, classes?.maxWidthSm),\n          maxWidthMd: clsx(containerClasses.maxWidthMd, classes?.maxWidthMd),\n          maxWidthLg: clsx(containerClasses.maxWidthLg, classes?.maxWidthLg),\n          maxWidthXl: clsx(containerClasses.maxWidthXl, classes?.maxWidthXl),\n        }}\n        $breakpoints={muiTheme.breakpoints}\n        ref={ref}\n        maxWidth={maxWidth}\n        fixed={fixed}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["HvContainer","forwardRef","maxWidth","classes","className","fixed","others","ref","muiTheme","useTheme","StyledRoot","root","clsx","containerClasses","disableGutters","maxWidthXs","maxWidthSm","maxWidthMd","maxWidthLg","maxWidthXl","$breakpoints","breakpoints"],"mappings":";;;;;;;;AAmCaA,MAAAA,cAAcC,iBACzB,CAAC;AAAA,EAAEC,WAAW;AAAA,EAAOC;AAAAA,EAASC;AAAAA,EAAWC;AAAAA,EAAO,GAAGC;AAAO,GAAGC,QAAQ;AACnE,QAAMC,WAAWC,OAAAA;AACjB,wCACGC,iBAAAA,YAAU;AAAA,IACTN;AAAAA,IACAD,SAAS;AAAA,MACPQ,MAAMC,KAAAA,KAAKC,iBAAAA,QAAiBF,MAAMR,mCAASQ,IAAI;AAAA,MAC/CG,gBAAgBF,KAAAA,KACdC,iBAAAA,QAAiBC,gBACjBX,mCAASW,cAAc;AAAA,MAEzBT,OAAOO,KAAAA,KAAKC,iBAAAA,QAAiBR,OAAOF,mCAASE,KAAK;AAAA,MAClDU,YAAYH,KAAAA,KAAKC,iBAAAA,QAAiBE,YAAYZ,mCAASY,UAAU;AAAA,MACjEC,YAAYJ,KAAAA,KAAKC,iBAAAA,QAAiBG,YAAYb,mCAASa,UAAU;AAAA,MACjEC,YAAYL,KAAAA,KAAKC,iBAAAA,QAAiBI,YAAYd,mCAASc,UAAU;AAAA,MACjEC,YAAYN,KAAAA,KAAKC,iBAAAA,QAAiBK,YAAYf,mCAASe,UAAU;AAAA,MACjEC,YAAYP,KAAAA,KAAKC,iBAAAA,QAAiBM,YAAYhB,mCAASgB,UAAU;AAAA,IACnE;AAAA,IACAC,cAAcZ,SAASa;AAAAA,IACvBd;AAAAA,IACAL;AAAAA,IACAG;AAAAA,IAAa,GACTC;AAAAA,EAAAA,CACJ;AAEN,CAAC;;"}
+{"version":3,"file":"Container.cjs","sources":["../../../../src/components/Container/Container.tsx"],"sourcesContent":["import { useTheme } from \"@mui/material/styles\";\nimport { ContainerProps as MuiContainerProps } from \"@mui/material/Container\";\nimport { forwardRef } from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport { clsx } from \"clsx\";\nimport { StyledRoot } from \"./Container.styles\";\nimport containerClasses, { HvContainerClasses } from \"./containerClasses\";\n\nexport interface HvContainerProps\n  extends Omit<MuiContainerProps, \"classes\">,\n    HvBaseProps {\n  /**\n   * The component used for the root node.\n   * Either a string to use a DOM element or a component.\n   */\n  component?: React.ElementType;\n  /**\n   * Determine the max-width of the container.\n   * The container width grows with the size of the screen.\n   * Set to `false` to disable `maxWidth`.\n   */\n  maxWidth?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | false;\n  /** If `true`, the left and right padding is removed. */\n  disableGutters?: boolean;\n  /**\n   * Set the max-width to match the min-width of the current breakpoint.\n   * This is useful if you'd prefer to design for a fixed set of sizes\n   * instead of trying to accommodate a fully fluid viewport.\n   * It's fluid by default.\n   */\n  fixed?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvContainerClasses;\n}\n\nexport const HvContainer = forwardRef<HTMLDivElement, HvContainerProps>(\n  ({ maxWidth = false, classes, className, fixed, ...others }, ref) => {\n    const muiTheme = useTheme();\n    return (\n      <StyledRoot\n        className={className}\n        classes={{\n          root: clsx(containerClasses.root, classes?.root),\n          disableGutters: clsx(\n            containerClasses.disableGutters,\n            classes?.disableGutters\n          ),\n          fixed: clsx(containerClasses.fixed, classes?.fixed),\n          maxWidthXs: clsx(containerClasses.maxWidthXs, classes?.maxWidthXs),\n          maxWidthSm: clsx(containerClasses.maxWidthSm, classes?.maxWidthSm),\n          maxWidthMd: clsx(containerClasses.maxWidthMd, classes?.maxWidthMd),\n          maxWidthLg: clsx(containerClasses.maxWidthLg, classes?.maxWidthLg),\n          maxWidthXl: clsx(containerClasses.maxWidthXl, classes?.maxWidthXl),\n        }}\n        $breakpoints={muiTheme.breakpoints}\n        ref={ref}\n        maxWidth={maxWidth}\n        fixed={fixed}\n        {...others}\n      />\n    );\n  }\n);\n"],"names":["HvContainer","forwardRef","maxWidth","classes","className","fixed","others","ref","muiTheme","useTheme","StyledRoot","root","clsx","containerClasses","disableGutters","maxWidthXs","maxWidthSm","maxWidthMd","maxWidthLg","maxWidthXl","$breakpoints","breakpoints"],"mappings":";;;;;;;;AAmCaA,MAAAA,cAAcC,iBACzB,CAAC;AAAA,EAAEC,WAAW;AAAA,EAAOC;AAAAA,EAASC;AAAAA,EAAWC;AAAAA,EAAO,GAAGC;AAAO,GAAGC,QAAQ;AACnE,QAAMC,WAAWC,OAAAA;AACjB,wCACGC,iBAAAA,YAAU;AAAA,IACTN;AAAAA,IACAD,SAAS;AAAA,MACPQ,MAAMC,KAAAA,KAAKC,iBAAAA,QAAiBF,MAAMR,mCAASQ,IAAI;AAAA,MAC/CG,gBAAgBF,KAAAA,KACdC,iBAAAA,QAAiBC,gBACjBX,mCAASW,cAAc;AAAA,MAEzBT,OAAOO,KAAAA,KAAKC,iBAAAA,QAAiBR,OAAOF,mCAASE,KAAK;AAAA,MAClDU,YAAYH,KAAAA,KAAKC,iBAAAA,QAAiBE,YAAYZ,mCAASY,UAAU;AAAA,MACjEC,YAAYJ,KAAAA,KAAKC,iBAAAA,QAAiBG,YAAYb,mCAASa,UAAU;AAAA,MACjEC,YAAYL,KAAAA,KAAKC,iBAAAA,QAAiBI,YAAYd,mCAASc,UAAU;AAAA,MACjEC,YAAYN,KAAAA,KAAKC,iBAAAA,QAAiBK,YAAYf,mCAASe,UAAU;AAAA,MACjEC,YAAYP,KAAAA,KAAKC,iBAAAA,QAAiBM,YAAYhB,mCAASgB,UAAU;AAAA,IACnE;AAAA,IACAC,cAAcZ,SAASa;AAAAA,IACvBd;AAAAA,IACAL;AAAAA,IACAG;AAAAA,IAAa,GACTC;AAAAA,EAAAA,CACJ;AAEN,CAAC;;"}

package/dist/cjs/components/Controls/Controls.cjs

@@ -1,10 +1,10 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const clsx = require("clsx");
-const Controls_styles = require("./Controls.styles.cjs");
-const controlClasses = require("./controlClasses.cjs");
-const ControlsContext = require("./context/ControlsContext.cjs");
 const React = require("react");
+const ControlsContext = require("./context/ControlsContext.cjs");
+const controlClasses = require("./controlClasses.cjs");
+const Controls_styles = require("./Controls.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const MultiButton = require("../MultiButton/MultiButton.cjs");
 const useControlled = require("../../hooks/useControlled.cjs");

package/dist/cjs/components/Controls/Controls.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.cjs","sources":["../../../../src/components/Controls/Controls.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { HvBaseProps, HvExtraProps } from \"@core/types\";\nimport { StyledRoot, StyledSection } from \"./Controls.styles\";\nimport controlsClasses, { HvControlsClasses } from \"./controlClasses\";\nimport { HvButton, HvMultiButton } from \"@core/components\";\nimport { setId } from \"@core/utils\";\nimport { useControlled } from \"@core/hooks\";\nimport { HvControlsContextProvider } from \"./context/ControlsContext\";\nimport { Children } from \"react\";\nimport { HvTableInstance } from \"@core/components/Table/hooks/useTable\";\n\nexport interface HvControlsViewConfiguration extends HvExtraProps {\n  id?: string;\n  label?: string;\n  icon?: React.ReactNode;\n}\n\nexport interface HvControlsProps extends HvBaseProps {\n  /**\n   * An instance of useHvTable or useTable used to manage the data\n   * if this is not provided data sorting and search must be handled externally\n   */\n  callbacks?: {\n    setSortBy?: HvTableInstance[\"setSortBy\"];\n    setGlobalFilter?: HvTableInstance[\"setGlobalFilter\"];\n  };\n  /**\n   * Views configuration required for the view buttons\n   */\n  views?: HvControlsViewConfiguration[];\n  /**\n   * What view is selected by default\n   */\n  defaultView?: string;\n  /**\n   * Sets the selected view to be the one specified\n   * if specified the component is in a controlled state and it won't change it state\n   * unless specified externally\n   */\n  selectedView?: string;\n  /**\n   * Callback called when the view switcher button is pressed\n   */\n  onViewChange?: (event: Event, id: string) => void;\n  /**\n   * if `true` the button to switch views is not rendered\n   */\n  hideViewSwitcher?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvControlsClasses;\n}\n\nexport const HvControls = ({\n  id,\n  className,\n  classes,\n  views,\n  callbacks,\n  selectedView,\n  defaultView,\n  children,\n  hideViewSwitcher = false,\n  onViewChange,\n}: HvControlsProps) => {\n  const [currentView, setCurrentView] = useControlled(\n    selectedView,\n    defaultView\n  );\n\n  const onViewChangeHandler = (evt, btnId) => {\n    setCurrentView(btnId);\n    onViewChange?.(evt, btnId);\n  };\n\n  const onSearchHandler = (value) => callbacks?.setGlobalFilter?.(value);\n  const onSortHandler = (value) =>\n    callbacks?.setSortBy?.([\n      {\n        id: value?.accessor,\n        desc: value?.desc,\n      },\n    ]);\n\n  const childrenCount = Children.count(children);\n  const childrenArray = Children.toArray(children);\n\n  const childrenIndexCut =\n    childrenCount > 0 ? Math.round(childrenCount * 0.5) : 0;\n  const leftChildren = childrenArray.slice(0, childrenIndexCut);\n  const rightChildren = childrenArray.slice(\n    childrenIndexCut,\n    childrenCount || 0\n  );\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(className, controlsClasses.root, classes?.root)}\n    >\n      <HvControlsContextProvider\n        value={{\n          onSearch: onSearchHandler,\n          onSort: onSortHandler,\n        }}\n      >\n        <StyledSection\n          className={clsx(\n            classes?.section,\n            controlsClasses.section,\n            classes?.leftSection,\n            controlsClasses.leftSection\n          )}\n        >\n          {leftChildren}\n        </StyledSection>\n        <StyledSection\n          className={clsx(\n            classes?.section,\n            controlsClasses.section,\n            classes?.rightSection,\n            controlsClasses.rightSection\n          )}\n        >\n          {rightChildren}\n          {views && !hideViewSwitcher && views?.length > 0 && (\n            <HvMultiButton id={setId(id, \"view-multi-button\")}>\n              {views.map(({ id: btnId, icon, ...others }) => (\n                <HvButton\n                  id={btnId}\n                  key={btnId}\n                  icon\n                  selected={currentView === btnId}\n                  onClick={(evt) => onViewChangeHandler(evt, btnId)}\n                  {...others}\n                >\n                  {icon}\n                </HvButton>\n              ))}\n            </HvMultiButton>\n          )}\n        </StyledSection>\n      </HvControlsContextProvider>\n    </StyledRoot>\n  );\n};\n"],"names":["HvControls","id","className","classes","views","callbacks","selectedView","defaultView","children","hideViewSwitcher","onViewChange","currentView","setCurrentView","useControlled","onViewChangeHandler","evt","btnId","onSearchHandler","value","setGlobalFilter","onSortHandler","setSortBy","accessor","desc","childrenCount","Children","count","childrenArray","toArray","childrenIndexCut","Math","round","leftChildren","slice","rightChildren","StyledRoot","clsx","controlsClasses","root","HvControlsContextProvider","onSearch","onSort","_jsx","StyledSection","section","leftSection","_jsxs","rightSection","length","HvMultiButton","setId","map","icon","others","HvButton","selected","onClick"],"mappings":";;;;;;;;;;;;AAoDO,MAAMA,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,mBAAmB;AAAA,EACnBC;AACe,MAAM;AACrB,QAAM,CAACC,aAAaC,cAAc,IAAIC,cAAAA,cACpCP,cACAC,WAAW;AAGPO,QAAAA,sBAAsBA,CAACC,KAAKC,UAAU;AAC1CJ,mBAAeI,KAAK;AACpBN,iDAAeK,KAAKC;AAAAA,EAAK;AAG3B,QAAMC,kBAAmBC,CAAAA,UAAAA;;AAAUb,wDAAWc,oBAAXd,mCAA6Ba;AAAAA;AAChE,QAAME,gBAAiBF,CAAAA;;AACrBb,wDAAWgB,cAAXhB,mCAAuB,CACrB;AAAA,MACEJ,IAAIiB,+BAAOI;AAAAA,MACXC,MAAML,+BAAOK;AAAAA,IACd,CAAA;AAAA;AAGCC,QAAAA,gBAAgBC,MAAAA,SAASC,MAAMlB,QAAQ;AACvCmB,QAAAA,gBAAgBF,MAAAA,SAASG,QAAQpB,QAAQ;AAE/C,QAAMqB,mBACJL,gBAAgB,IAAIM,KAAKC,MAAMP,gBAAgB,GAAG,IAAI;AACxD,QAAMQ,eAAeL,cAAcM,MAAM,GAAGJ,gBAAgB;AAC5D,QAAMK,gBAAgBP,cAAcM,MAClCJ,kBACAL,iBAAiB,CAAC;AAGpB,wCACGW,gBAAAA,YAAU;AAAA,IACTlC;AAAAA,IACAC,WAAWkC,KAAKlC,KAAAA,WAAWmC,eAAgBC,QAAAA,MAAMnC,mCAASmC,IAAI;AAAA,IAAE9B,0CAE/D+B,2CAAyB;AAAA,MACxBrB,OAAO;AAAA,QACLsB,UAAUvB;AAAAA,QACVwB,QAAQrB;AAAAA,MACV;AAAA,MAAEZ,UAAA,CAEFkC,2BAAAA,IAACC,+BAAa;AAAA,QACZzC,WAAWkC,KAAAA,KACTjC,mCAASyC,SACTP,eAAAA,QAAgBO,SAChBzC,mCAAS0C,aACTR,eAAAA,QAAgBQ,WAAW;AAAA,QAC3BrC,UAEDwB;AAAAA,MAAAA,CACa,GAChBc,2BAAAA,KAACH,+BAAa;AAAA,QACZzC,WAAWkC,KAAAA,KACTjC,mCAASyC,SACTP,eAAAA,QAAgBO,SAChBzC,mCAAS4C,cACTV,eAAAA,QAAgBU,YAAY;AAAA,QAC5BvC,WAED0B,eACA9B,SAAS,CAACK,qBAAoBL,+BAAO4C,UAAS,KAC7CN,2BAAAA,IAACO,2BAAa;AAAA,UAAChD,IAAIiD,MAAAA,MAAMjD,IAAI,mBAAmB;AAAA,UAAEO,UAC/CJ,MAAM+C,IAAI,CAAC;AAAA,YAAElD,IAAIe;AAAAA,YAAOoC;AAAAA,YAAM,GAAGC;AAAAA,UAAAA,qCAC/BC,OAAAA,UAAQ;AAAA,YACPrD,IAAIe;AAAAA,YAEJoC,MAAI;AAAA,YACJG,UAAU5C,gBAAgBK;AAAAA,YAC1BwC,SAAUzC,CAAAA,QAAQD,oBAAoBC,KAAKC,KAAK;AAAA,YAAE,GAC9CqC;AAAAA,YAAM7C,UAET4C;AAAAA,UAAI,GANApC,KAAK,CAQb;AAAA,QAAA,CAEJ,CAAA;AAAA,MAAA,CACa,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAEP;AAEjB;;"}
+{"version":3,"file":"Controls.cjs","sources":["../../../../src/components/Controls/Controls.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { HvBaseProps, HvExtraProps } from \"@core/types\";\nimport { HvButton, HvMultiButton } from \"@core/components\";\nimport { setId } from \"@core/utils\";\nimport { useControlled } from \"@core/hooks\";\nimport { Children } from \"react\";\nimport { HvTableInstance } from \"@core/components/Table/hooks/useTable\";\nimport { HvControlsContextProvider } from \"./context/ControlsContext\";\nimport controlsClasses, { HvControlsClasses } from \"./controlClasses\";\nimport { StyledRoot, StyledSection } from \"./Controls.styles\";\n\nexport interface HvControlsViewConfiguration extends HvExtraProps {\n  id?: string;\n  label?: string;\n  icon?: React.ReactNode;\n}\n\nexport interface HvControlsProps extends HvBaseProps {\n  /**\n   * An instance of useHvTable or useTable used to manage the data\n   * if this is not provided data sorting and search must be handled externally\n   */\n  callbacks?: {\n    setSortBy?: HvTableInstance[\"setSortBy\"];\n    setGlobalFilter?: HvTableInstance[\"setGlobalFilter\"];\n  };\n  /**\n   * Views configuration required for the view buttons\n   */\n  views?: HvControlsViewConfiguration[];\n  /**\n   * What view is selected by default\n   */\n  defaultView?: string;\n  /**\n   * Sets the selected view to be the one specified\n   * if specified the component is in a controlled state and it won't change it state\n   * unless specified externally\n   */\n  selectedView?: string;\n  /**\n   * Callback called when the view switcher button is pressed\n   */\n  onViewChange?: (event: Event, id: string) => void;\n  /**\n   * if `true` the button to switch views is not rendered\n   */\n  hideViewSwitcher?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvControlsClasses;\n}\n\nexport const HvControls = ({\n  id,\n  className,\n  classes,\n  views,\n  callbacks,\n  selectedView,\n  defaultView,\n  children,\n  hideViewSwitcher = false,\n  onViewChange,\n}: HvControlsProps) => {\n  const [currentView, setCurrentView] = useControlled(\n    selectedView,\n    defaultView\n  );\n\n  const onViewChangeHandler = (evt, btnId) => {\n    setCurrentView(btnId);\n    onViewChange?.(evt, btnId);\n  };\n\n  const onSearchHandler = (value) => callbacks?.setGlobalFilter?.(value);\n  const onSortHandler = (value) =>\n    callbacks?.setSortBy?.([\n      {\n        id: value?.accessor,\n        desc: value?.desc,\n      },\n    ]);\n\n  const childrenCount = Children.count(children);\n  const childrenArray = Children.toArray(children);\n\n  const childrenIndexCut =\n    childrenCount > 0 ? Math.round(childrenCount * 0.5) : 0;\n  const leftChildren = childrenArray.slice(0, childrenIndexCut);\n  const rightChildren = childrenArray.slice(\n    childrenIndexCut,\n    childrenCount || 0\n  );\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(className, controlsClasses.root, classes?.root)}\n    >\n      <HvControlsContextProvider\n        value={{\n          onSearch: onSearchHandler,\n          onSort: onSortHandler,\n        }}\n      >\n        <StyledSection\n          className={clsx(\n            classes?.section,\n            controlsClasses.section,\n            classes?.leftSection,\n            controlsClasses.leftSection\n          )}\n        >\n          {leftChildren}\n        </StyledSection>\n        <StyledSection\n          className={clsx(\n            classes?.section,\n            controlsClasses.section,\n            classes?.rightSection,\n            controlsClasses.rightSection\n          )}\n        >\n          {rightChildren}\n          {views && !hideViewSwitcher && views?.length > 0 && (\n            <HvMultiButton id={setId(id, \"view-multi-button\")}>\n              {views.map(({ id: btnId, icon, ...others }) => (\n                <HvButton\n                  id={btnId}\n                  key={btnId}\n                  icon\n                  selected={currentView === btnId}\n                  onClick={(evt) => onViewChangeHandler(evt, btnId)}\n                  {...others}\n                >\n                  {icon}\n                </HvButton>\n              ))}\n            </HvMultiButton>\n          )}\n        </StyledSection>\n      </HvControlsContextProvider>\n    </StyledRoot>\n  );\n};\n"],"names":["HvControls","id","className","classes","views","callbacks","selectedView","defaultView","children","hideViewSwitcher","onViewChange","currentView","setCurrentView","useControlled","onViewChangeHandler","evt","btnId","onSearchHandler","value","setGlobalFilter","onSortHandler","setSortBy","accessor","desc","childrenCount","Children","count","childrenArray","toArray","childrenIndexCut","Math","round","leftChildren","slice","rightChildren","StyledRoot","clsx","controlsClasses","root","HvControlsContextProvider","onSearch","onSort","_jsx","StyledSection","section","leftSection","_jsxs","rightSection","length","HvMultiButton","setId","map","icon","others","HvButton","selected","onClick"],"mappings":";;;;;;;;;;;;AAoDO,MAAMA,aAAaA,CAAC;AAAA,EACzBC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,mBAAmB;AAAA,EACnBC;AACe,MAAM;AACrB,QAAM,CAACC,aAAaC,cAAc,IAAIC,cAAAA,cACpCP,cACAC,WAAW;AAGPO,QAAAA,sBAAsBA,CAACC,KAAKC,UAAU;AAC1CJ,mBAAeI,KAAK;AACpBN,iDAAeK,KAAKC;AAAAA,EAAK;AAG3B,QAAMC,kBAAmBC,CAAAA,UAAAA;;AAAUb,wDAAWc,oBAAXd,mCAA6Ba;AAAAA;AAChE,QAAME,gBAAiBF,CAAAA;;AACrBb,wDAAWgB,cAAXhB,mCAAuB,CACrB;AAAA,MACEJ,IAAIiB,+BAAOI;AAAAA,MACXC,MAAML,+BAAOK;AAAAA,IACd,CAAA;AAAA;AAGCC,QAAAA,gBAAgBC,MAAAA,SAASC,MAAMlB,QAAQ;AACvCmB,QAAAA,gBAAgBF,MAAAA,SAASG,QAAQpB,QAAQ;AAE/C,QAAMqB,mBACJL,gBAAgB,IAAIM,KAAKC,MAAMP,gBAAgB,GAAG,IAAI;AACxD,QAAMQ,eAAeL,cAAcM,MAAM,GAAGJ,gBAAgB;AAC5D,QAAMK,gBAAgBP,cAAcM,MAClCJ,kBACAL,iBAAiB,CAAC;AAGpB,wCACGW,gBAAAA,YAAU;AAAA,IACTlC;AAAAA,IACAC,WAAWkC,KAAKlC,KAAAA,WAAWmC,eAAgBC,QAAAA,MAAMnC,mCAASmC,IAAI;AAAA,IAAE9B,0CAE/D+B,2CAAyB;AAAA,MACxBrB,OAAO;AAAA,QACLsB,UAAUvB;AAAAA,QACVwB,QAAQrB;AAAAA,MACV;AAAA,MAAEZ,UAAA,CAEFkC,2BAAAA,IAACC,+BAAa;AAAA,QACZzC,WAAWkC,KAAAA,KACTjC,mCAASyC,SACTP,eAAAA,QAAgBO,SAChBzC,mCAAS0C,aACTR,eAAAA,QAAgBQ,WAAW;AAAA,QAC3BrC,UAEDwB;AAAAA,MAAAA,CACa,GAChBc,2BAAAA,KAACH,+BAAa;AAAA,QACZzC,WAAWkC,KAAAA,KACTjC,mCAASyC,SACTP,eAAAA,QAAgBO,SAChBzC,mCAAS4C,cACTV,eAAAA,QAAgBU,YAAY;AAAA,QAC5BvC,WAED0B,eACA9B,SAAS,CAACK,qBAAoBL,+BAAO4C,UAAS,KAC7CN,2BAAAA,IAACO,2BAAa;AAAA,UAAChD,IAAIiD,MAAAA,MAAMjD,IAAI,mBAAmB;AAAA,UAAEO,UAC/CJ,MAAM+C,IAAI,CAAC;AAAA,YAAElD,IAAIe;AAAAA,YAAOoC;AAAAA,YAAM,GAAGC;AAAAA,UAAAA,qCAC/BC,OAAAA,UAAQ;AAAA,YACPrD,IAAIe;AAAAA,YAEJoC,MAAI;AAAA,YACJG,UAAU5C,gBAAgBK;AAAAA,YAC1BwC,SAAUzC,CAAAA,QAAQD,oBAAoBC,KAAKC,KAAK;AAAA,YAAE,GAC9CqC;AAAAA,YAAM7C,UAET4C;AAAAA,UAAI,GANApC,KAAK,CAQb;AAAA,QAAA,CAEJ,CAAA;AAAA,MAAA,CACa,CAAA;AAAA,IAAA,CAAA;AAAA,EAAA,CAEP;AAEjB;;"}

package/dist/cjs/components/Controls/LeftControl/LeftControl.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"LeftControl.cjs","sources":["../../../../../src/components/Controls/LeftControl/LeftControl.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useContext } from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport { setId } from \"@core/utils\";\nimport { StyledRoot } from \"./LeftControl.styles\";\nimport { HvInput, HvInputProps } from \"@core/components\";\nimport leftControlClasses, { HvLeftControlClasses } from \"./leftControlClasses\";\nimport { HvControlsContext } from \"../context/ControlsContext\";\n\nexport interface HvLeftControlProps extends HvBaseProps {\n  /** if `true` the hide sort by dropdown is not rendered */\n  hideSearch?: boolean;\n  /** placeholder of the input */\n  placeholder?: string;\n  /** Callback called when a search action occurs */\n  onSearch?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    value: string\n  ) => void;\n  /** Extra props passed to input */\n  searchProps?: HvInputProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLeftControlClasses;\n}\n\nexport const HvLeftControl = ({\n  id,\n  classes,\n  className,\n  children,\n  placeholder = \"Search\",\n  onSearch,\n  hideSearch = false,\n  searchProps,\n  ...others\n}: HvLeftControlProps) => {\n  const { onSearch: onSearchHandler } = useContext(HvControlsContext);\n\n  const onChangeFilter = (e, value) => {\n    onSearch?.(e, value);\n    onSearchHandler?.(value);\n  };\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(className, leftControlClasses.root, classes?.root)}\n      {...others}\n    >\n      {!hideSearch && (\n        <HvInput\n          id={setId(id, \"search-input\")}\n          type=\"search\"\n          placeholder={placeholder}\n          onChange={(e, value) => onChangeFilter(e, value)}\n          {...searchProps}\n        />\n      )}\n      {children}\n    </StyledRoot>\n  );\n};\n"],"names":["HvLeftControl","id","classes","className","children","placeholder","onSearch","hideSearch","searchProps","others","onSearchHandler","useContext","HvControlsContext","onChangeFilter","e","value","StyledRoot","clsx","leftControlClasses","root","HvInput","setId","type","onChange"],"mappings":";;;;;;;;;;AAyBO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,cAAc;AAAA,EACdC;AAAAA,EACAC,aAAa;AAAA,EACbC;AAAAA,EACA,GAAGC;AACe,MAAM;AAClB,QAAA;AAAA,IAAEH,UAAUI;AAAAA,EAAAA,IAAoBC,MAAAA,WAAWC,gBAAAA,iBAAiB;AAE5DC,QAAAA,iBAAiBA,CAACC,GAAGC,UAAU;AACnCT,yCAAWQ,GAAGC;AACdL,uDAAkBK;AAAAA,EAAK;AAGzB,yCACGC,mBAAAA,YAAU;AAAA,IACTf;AAAAA,IACAE,WAAWc,KAAKd,KAAAA,WAAWe,mBAAmBC,QAAAA,MAAMjB,mCAASiB,IAAI;AAAA,IAAE,GAC/DV;AAAAA,IAAML,WAET,CAACG,6CACCa,MAAAA,SAAO;AAAA,MACNnB,IAAIoB,MAAAA,MAAMpB,IAAI,cAAc;AAAA,MAC5BqB,MAAK;AAAA,MACLjB;AAAAA,MACAkB,UAAUA,CAACT,GAAGC,UAAUF,eAAeC,GAAGC,KAAK;AAAA,MAAE,GAC7CP;AAAAA,IAAW,CAAA,GAGlBJ,QAAQ;AAAA,EAAA,CACE;AAEjB;;"}
+{"version":3,"file":"LeftControl.cjs","sources":["../../../../../src/components/Controls/LeftControl/LeftControl.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useContext } from \"react\";\nimport { HvBaseProps } from \"@core/types\";\nimport { setId } from \"@core/utils\";\nimport { HvInput, HvInputProps } from \"@core/components\";\nimport { StyledRoot } from \"./LeftControl.styles\";\nimport leftControlClasses, { HvLeftControlClasses } from \"./leftControlClasses\";\nimport { HvControlsContext } from \"../context/ControlsContext\";\n\nexport interface HvLeftControlProps extends HvBaseProps {\n  /** if `true` the hide sort by dropdown is not rendered */\n  hideSearch?: boolean;\n  /** placeholder of the input */\n  placeholder?: string;\n  /** Callback called when a search action occurs */\n  onSearch?: (\n    event: React.ChangeEvent<HTMLInputElement>,\n    value: string\n  ) => void;\n  /** Extra props passed to input */\n  searchProps?: HvInputProps;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvLeftControlClasses;\n}\n\nexport const HvLeftControl = ({\n  id,\n  classes,\n  className,\n  children,\n  placeholder = \"Search\",\n  onSearch,\n  hideSearch = false,\n  searchProps,\n  ...others\n}: HvLeftControlProps) => {\n  const { onSearch: onSearchHandler } = useContext(HvControlsContext);\n\n  const onChangeFilter = (e, value) => {\n    onSearch?.(e, value);\n    onSearchHandler?.(value);\n  };\n\n  return (\n    <StyledRoot\n      id={id}\n      className={clsx(className, leftControlClasses.root, classes?.root)}\n      {...others}\n    >\n      {!hideSearch && (\n        <HvInput\n          id={setId(id, \"search-input\")}\n          type=\"search\"\n          placeholder={placeholder}\n          onChange={(e, value) => onChangeFilter(e, value)}\n          {...searchProps}\n        />\n      )}\n      {children}\n    </StyledRoot>\n  );\n};\n"],"names":["HvLeftControl","id","classes","className","children","placeholder","onSearch","hideSearch","searchProps","others","onSearchHandler","useContext","HvControlsContext","onChangeFilter","e","value","StyledRoot","clsx","leftControlClasses","root","HvInput","setId","type","onChange"],"mappings":";;;;;;;;;;AAyBO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC;AAAAA,EACAC,cAAc;AAAA,EACdC;AAAAA,EACAC,aAAa;AAAA,EACbC;AAAAA,EACA,GAAGC;AACe,MAAM;AAClB,QAAA;AAAA,IAAEH,UAAUI;AAAAA,EAAAA,IAAoBC,MAAAA,WAAWC,gBAAAA,iBAAiB;AAE5DC,QAAAA,iBAAiBA,CAACC,GAAGC,UAAU;AACnCT,yCAAWQ,GAAGC;AACdL,uDAAkBK;AAAAA,EAAK;AAGzB,yCACGC,mBAAAA,YAAU;AAAA,IACTf;AAAAA,IACAE,WAAWc,KAAKd,KAAAA,WAAWe,mBAAmBC,QAAAA,MAAMjB,mCAASiB,IAAI;AAAA,IAAE,GAC/DV;AAAAA,IAAML,WAET,CAACG,6CACCa,MAAAA,SAAO;AAAA,MACNnB,IAAIoB,MAAAA,MAAMpB,IAAI,cAAc;AAAA,MAC5BqB,MAAK;AAAA,MACLjB;AAAAA,MACAkB,UAAUA,CAACT,GAAGC,UAAUF,eAAeC,GAAGC,KAAK;AAAA,MAAE,GAC7CP;AAAAA,IAAW,CAAA,GAGlBJ,QAAQ;AAAA,EAAA,CACE;AAEjB;;"}

package/dist/cjs/components/Dialog/Dialog.cjs

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
+const react = require("@emotion/react");
 const MuiDialog = require("@mui/material/Dialog");
+const isNil = require("lodash/isNil");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const uikitStyles = require("@hitachivantara/uikit-styles");
-const isNil = require("lodash/isNil");
-const Dialog_styles = require("./Dialog.styles.cjs");
 const dialogClasses = require("./dialogClasses.cjs");
-const react = require("@emotion/react");
+const Dialog_styles = require("./Dialog.styles.cjs");
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const focusableElementFinder = require("../../utils/focusableElementFinder.cjs");
 const withTooltip = require("../../hocs/withTooltip.cjs");
@@ -19,6 +19,17 @@ const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const React__default = /* @__PURE__ */ _interopDefault(React);
 const MuiDialog__default = /* @__PURE__ */ _interopDefault(MuiDialog);
 const isNil__default = /* @__PURE__ */ _interopDefault(isNil);
+const DialogBackdrop = (backdropProps) => {
+  var _a;
+  const {
+    activeTheme,
+    selectedMode
+  } = useTheme.useTheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog_styles.StyledBackdrop, {
+    $backColor: ((_a = activeTheme == null ? void 0 : activeTheme.colors) == null ? void 0 : _a.modes[selectedMode].atmo4) || uikitStyles.theme.colors.atmo4,
+    ...backdropProps
+  });
+};
 const HvDialog = ({
   classes,
   className,
@@ -34,21 +45,19 @@ const HvDialog = ({
 }) => {
   delete others.fullScreen;
   const {
-    activeTheme,
-    selectedMode,
     rootId
   } = useTheme.useTheme();
   const focusableQueue = React.useRef({
     first: void 0,
     last: void 0
   });
-  const wrappedClose = (event, bypassValidation = false, reason) => {
+  const wrappedClose = React.useCallback((event, bypassValidation = false, reason) => {
     if (bypassValidation) {
       onClose == null ? void 0 : onClose(event, reason);
     } else if (!disableBackdropClick) {
       onClose == null ? void 0 : onClose(event, reason);
     }
-  };
+  }, [onClose]);
   const measuredRef = React.useCallback((node) => {
     if (node) {
       const focusableList = focusableElementFinder.getFocusableList(node);
@@ -94,6 +103,13 @@ const HvDialog = ({
     role: "presentation"
   });
   const CloseButtonTooltipWrapper = buttonTitle ? withTooltip.default(closeButtonDisplay, buttonTitle, "top") : closeButtonDisplay;
+  const slots = React.useMemo(() => ({
+    backdrop: (backdropProps) => /* @__PURE__ */ jsxRuntime.jsx(DialogBackdrop, {
+      open,
+      onClick: wrappedClose,
+      ...backdropProps
+    })
+  }), [open, wrappedClose]);
   return /* @__PURE__ */ jsxRuntime.jsx(react.ClassNames, {
     children: ({
       css,
@@ -107,19 +123,7 @@ const HvDialog = ({
       fullScreen: fullscreen,
       onClose: (event, reason) => wrappedClose(event, void 0, reason),
       onKeyDown: keyDownHandler,
-      fullWidth: true,
-      maxWidth: false,
-      slots: {
-        backdrop: (backdropProps) => {
-          var _a;
-          return /* @__PURE__ */ jsxRuntime.jsx(Dialog_styles.StyledBackdrop, {
-            open,
-            onClick: (event) => wrappedClose(event),
-            $backColor: ((_a = activeTheme == null ? void 0 : activeTheme.colors) == null ? void 0 : _a.modes[selectedMode].atmo4) || uikitStyles.theme.colors.atmo4,
-            ...backdropProps
-          });
-        }
-      },
+      slots,
       classes: {
         container: css({
           position: "relative"

package/dist/cjs/components/Dialog/Dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dialog.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useCallback, useRef } from \"react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport isNil from \"lodash/isNil\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { StyledBackdrop, StyledClose, styles } from \"./Dialog.styles\";\nimport {\n  isKeypress,\n  keyboardCodes,\n  setId,\n  getFocusableList,\n} from \"@core/utils\";\nimport { withTooltip } from \"@core/hocs\";\nimport dialogClasses, { HvDialogClasses } from \"./dialogClasses\";\nimport { useTheme } from \"@core/hooks\";\nimport { ClassNames } from \"@emotion/react\";\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n    HvBaseProps {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Function executed on close. */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /** Element id that should be focus when the Dialog opens. */\n  firstFocusable?: string;\n  /** Title for the button close. */\n  buttonTitle?: string;\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  /** Prevent closing the dialog when clicking on the backdrop. */\n  disableBackdropClick?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogClasses;\n}\n\nexport const HvDialog = ({\n  classes,\n  className,\n  id,\n  children,\n  open = false,\n  onClose,\n  firstFocusable,\n  buttonTitle = \"Close\",\n  fullscreen = false,\n  disableBackdropClick = false,\n  ...others\n}: HvDialogProps) => {\n  delete (others as any).fullScreen;\n\n  const { activeTheme, selectedMode, rootId } = useTheme();\n\n  const focusableQueue = useRef<{\n    first?: HTMLElement;\n    last?: HTMLElement;\n  }>({ first: undefined, last: undefined });\n\n  // Because the `disableBackdropClick` property was deprecated in MUI5\n  // and we want to maintain that functionality to the user we're wrapping\n  // the onClose call here to make that check.\n  const wrappedClose = (\n    event,\n    bypassValidation: boolean = false,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => {\n    if (bypassValidation) {\n      onClose?.(event, reason);\n    } else if (!disableBackdropClick) {\n      onClose?.(event, reason);\n    }\n  };\n\n  const measuredRef = useCallback(\n    (node) => {\n      if (node) {\n        const focusableList = getFocusableList(node);\n        focusableQueue.current = {\n          first: focusableList[1],\n          last: focusableList[focusableList.length - 2],\n        };\n        if (isNil(firstFocusable)) focusableList[1].focus();\n        else {\n          const element =\n            firstFocusable && document.getElementById(firstFocusable);\n          if (element) element.focus();\n          else {\n            console.warn(`firstFocusable element ${firstFocusable} not found.`);\n\n            focusableList[1].focus();\n          }\n        }\n      }\n    },\n    [firstFocusable]\n  );\n\n  const keyDownHandler = (event) => {\n    if (\n      isKeypress(event, keyboardCodes.Tab) &&\n      !isNil(event.target) &&\n      !isNil(focusableQueue)\n    ) {\n      if (event.shiftKey && event.target === focusableQueue.current.first) {\n        focusableQueue.current.last?.focus();\n        event.preventDefault();\n      }\n      if (!event.shiftKey && event.target === focusableQueue.current.last) {\n        focusableQueue.current.first?.focus();\n        event.preventDefault();\n      }\n    }\n    // Needed as this handler overrides the one in the material ui Modal.\n    else if (isKeypress(event, keyboardCodes.Esc)) {\n      if (\n        \"onEscapeKeyDown\" in others &&\n        typeof others.onEscapeKeyDown === \"function\"\n      ) {\n        others.onEscapeKeyDown(event);\n      }\n\n      if (!others.disableEscapeKeyDown) {\n        // Swallow the event, in case someone is listening for the escape key on the body.\n        event.stopPropagation();\n\n        wrappedClose(event, true, \"escapeKeyDown\");\n      }\n    }\n  };\n\n  const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <MuiDialog\n          container={document.getElementById(rootId || \"\") || document.body}\n          className={cx(dialogClasses.root, className, classes?.root)}\n          id={id}\n          ref={measuredRef}\n          open={open}\n          fullScreen={fullscreen}\n          onClose={(event, reason) => wrappedClose(event, undefined, reason)}\n          onKeyDown={keyDownHandler}\n          fullWidth\n          maxWidth={false}\n          slots={{\n            backdrop: (backdropProps) => (\n              <StyledBackdrop\n                open={open}\n                onClick={(event) => wrappedClose(event)}\n                $backColor={\n                  activeTheme?.colors?.modes[selectedMode].atmo4 ||\n                  theme.colors.atmo4\n                }\n                {...backdropProps}\n              />\n            ),\n          }}\n          classes={{ container: css({ position: \"relative\" }) }}\n          BackdropProps={{\n            classes: {\n              root: cx(dialogClasses.background, classes?.background),\n            },\n          }}\n          PaperProps={{\n            classes: {\n              root: cx(\n                dialogClasses.paper,\n                fullscreen && cx(dialogClasses.fullscreen, \"fullscreen\"),\n                css(styles.paper),\n                css({ position: \"absolute\" }),\n                classes?.paper,\n                fullscreen && classes?.fullscreen\n              ),\n            },\n          }}\n          aria-modal\n          {...others}\n        >\n          <StyledClose\n            id={setId(id, \"close\")}\n            className={cx(dialogClasses.closeButton, classes?.closeButton)}\n            variant=\"secondaryGhost\"\n            onClick={(event) => wrappedClose(event, true, undefined)}\n            aria-label={buttonTitle}\n          >\n            <CloseButtonTooltipWrapper />\n          </StyledClose>\n          {children && typeof children === \"object\"\n            ? React.Children.map(\n                children,\n                (c: React.ReactNode) =>\n                  c &&\n                  React.cloneElement(c as React.ReactElement, { fullscreen })\n              )\n            : children}\n        </MuiDialog>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["HvDialog","classes","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","fullScreen","activeTheme","selectedMode","rootId","useTheme","focusableQueue","useRef","first","undefined","last","wrappedClose","event","bypassValidation","reason","measuredRef","useCallback","node","focusableList","getFocusableList","current","length","isNil","focus","element","document","getElementById","warn","keyDownHandler","isKeypress","keyboardCodes","Tab","target","shiftKey","preventDefault","Esc","onEscapeKeyDown","disableEscapeKeyDown","stopPropagation","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","ClassNames","css","cx","MuiDialog","container","body","dialogClasses","root","ref","onKeyDown","fullWidth","maxWidth","slots","backdrop","backdropProps","StyledBackdrop","onClick","$backColor","colors","modes","atmo4","theme","position","BackdropProps","background","PaperProps","paper","styles","StyledClose","setId","closeButton","variant","React","Children","map","c","cloneElement"],"mappings":"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"}
+{"version":3,"file":"Dialog.cjs","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useRef } from \"react\";\nimport { ClassNames } from \"@emotion/react\";\nimport MuiDialog, { DialogProps as MuiDialogProps } from \"@mui/material/Dialog\";\nimport { BackdropProps } from \"@mui/material\";\nimport isNil from \"lodash/isNil\";\n\nimport { Close } from \"@hitachivantara/uikit-react-icons\";\nimport { theme } from \"@hitachivantara/uikit-styles\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport {\n  isKeypress,\n  keyboardCodes,\n  setId,\n  getFocusableList,\n} from \"@core/utils\";\nimport { withTooltip } from \"@core/hocs\";\nimport { useTheme } from \"@core/hooks\";\nimport dialogClasses, { HvDialogClasses } from \"./dialogClasses\";\nimport { StyledBackdrop, StyledClose, styles } from \"./Dialog.styles\";\n\nexport interface HvDialogProps\n  extends Omit<MuiDialogProps, \"fullScreen\" | \"classes\" | \"open\">,\n    HvBaseProps {\n  /** Id to be applied to the root node. */\n  id?: string;\n  /** Current state of the Dialog. */\n  open?: boolean;\n  /** Function executed on close. */\n  onClose?: (\n    event: React.SyntheticEvent,\n    reason?: \"escapeKeyDown\" | \"backdropClick\"\n  ) => void;\n  /** @inheritdoc */\n  maxWidth?: MuiDialogProps[\"maxWidth\"];\n  /** @inheritdoc */\n  fullWidth?: MuiDialogProps[\"fullWidth\"];\n  /** Element id that should be focus when the Dialog opens. */\n  firstFocusable?: string;\n  /** Title for the button close. */\n  buttonTitle?: string;\n  /** Set the dialog to fullscreen mode. */\n  fullscreen?: boolean;\n  /** Prevent closing the dialog when clicking on the backdrop. */\n  disableBackdropClick?: boolean;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvDialogClasses;\n}\n\nconst DialogBackdrop = (backdropProps: BackdropProps) => {\n  const { activeTheme, selectedMode } = useTheme();\n  return (\n    <StyledBackdrop\n      $backColor={\n        activeTheme?.colors?.modes[selectedMode].atmo4 || theme.colors.atmo4\n      }\n      {...backdropProps}\n    />\n  );\n};\n\nexport const HvDialog = ({\n  classes,\n  className,\n  id,\n  children,\n  open = false,\n  onClose,\n  firstFocusable,\n  buttonTitle = \"Close\",\n  fullscreen = false,\n  disableBackdropClick = false,\n  ...others\n}: HvDialogProps) => {\n  delete (others as any).fullScreen;\n\n  const { rootId } = useTheme();\n\n  const focusableQueue = useRef<{\n    first?: HTMLElement;\n    last?: HTMLElement;\n  }>({ first: undefined, last: undefined });\n\n  // Because the `disableBackdropClick` property was deprecated in MUI5\n  // and we want to maintain that functionality to the user we're wrapping\n  // the onClose call here to make that check.\n  const wrappedClose = useCallback(\n    (\n      event,\n      bypassValidation: boolean = false,\n      reason?: \"escapeKeyDown\" | \"backdropClick\"\n    ) => {\n      if (bypassValidation) {\n        onClose?.(event, reason);\n      } else if (!disableBackdropClick) {\n        onClose?.(event, reason);\n      }\n    },\n    [onClose]\n  );\n\n  const measuredRef = useCallback(\n    (node) => {\n      if (node) {\n        const focusableList = getFocusableList(node);\n        focusableQueue.current = {\n          first: focusableList[1],\n          last: focusableList[focusableList.length - 2],\n        };\n        if (isNil(firstFocusable)) focusableList[1].focus();\n        else {\n          const element =\n            firstFocusable && document.getElementById(firstFocusable);\n          if (element) element.focus();\n          else {\n            console.warn(`firstFocusable element ${firstFocusable} not found.`);\n\n            focusableList[1].focus();\n          }\n        }\n      }\n    },\n    [firstFocusable]\n  );\n\n  const keyDownHandler = (event) => {\n    if (\n      isKeypress(event, keyboardCodes.Tab) &&\n      !isNil(event.target) &&\n      !isNil(focusableQueue)\n    ) {\n      if (event.shiftKey && event.target === focusableQueue.current.first) {\n        focusableQueue.current.last?.focus();\n        event.preventDefault();\n      }\n      if (!event.shiftKey && event.target === focusableQueue.current.last) {\n        focusableQueue.current.first?.focus();\n        event.preventDefault();\n      }\n    }\n    // Needed as this handler overrides the one in the material ui Modal.\n    else if (isKeypress(event, keyboardCodes.Esc)) {\n      if (\n        \"onEscapeKeyDown\" in others &&\n        typeof others.onEscapeKeyDown === \"function\"\n      ) {\n        others.onEscapeKeyDown(event);\n      }\n\n      if (!others.disableEscapeKeyDown) {\n        // Swallow the event, in case someone is listening for the escape key on the body.\n        event.stopPropagation();\n\n        wrappedClose(event, true, \"escapeKeyDown\");\n      }\n    }\n  };\n\n  const closeButtonDisplay = () => <Close role=\"presentation\" />;\n\n  const CloseButtonTooltipWrapper = buttonTitle\n    ? withTooltip(closeButtonDisplay, buttonTitle, \"top\")\n    : closeButtonDisplay;\n\n  const slots = useMemo<MuiDialogProps[\"slots\"]>(\n    () => ({\n      backdrop: (backdropProps) => (\n        <DialogBackdrop open={open} onClick={wrappedClose} {...backdropProps} />\n      ),\n    }),\n    [open, wrappedClose]\n  );\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <MuiDialog\n          container={document.getElementById(rootId || \"\") || document.body}\n          className={cx(dialogClasses.root, className, classes?.root)}\n          id={id}\n          ref={measuredRef}\n          open={open}\n          fullScreen={fullscreen}\n          onClose={(event, reason) => wrappedClose(event, undefined, reason)}\n          onKeyDown={keyDownHandler}\n          slots={slots}\n          classes={{ container: css({ position: \"relative\" }) }}\n          BackdropProps={{\n            classes: {\n              root: cx(dialogClasses.background, classes?.background),\n            },\n          }}\n          PaperProps={{\n            classes: {\n              root: cx(\n                dialogClasses.paper,\n                fullscreen && cx(dialogClasses.fullscreen, \"fullscreen\"),\n                css(styles.paper),\n                css({ position: \"absolute\" }),\n                classes?.paper,\n                fullscreen && classes?.fullscreen\n              ),\n            },\n          }}\n          aria-modal\n          {...others}\n        >\n          <StyledClose\n            id={setId(id, \"close\")}\n            className={cx(dialogClasses.closeButton, classes?.closeButton)}\n            variant=\"secondaryGhost\"\n            onClick={(event) => wrappedClose(event, true, undefined)}\n            aria-label={buttonTitle}\n          >\n            <CloseButtonTooltipWrapper />\n          </StyledClose>\n          {children && typeof children === \"object\"\n            ? React.Children.map(\n                children,\n                (c: React.ReactNode) =>\n                  c &&\n                  React.cloneElement(c as React.ReactElement, { fullscreen })\n              )\n            : children}\n        </MuiDialog>\n      )}\n    </ClassNames>\n  );\n};\n"],"names":["DialogBackdrop","backdropProps","activeTheme","selectedMode","useTheme","StyledBackdrop","$backColor","colors","modes","atmo4","theme","HvDialog","classes","className","id","children","open","onClose","firstFocusable","buttonTitle","fullscreen","disableBackdropClick","others","fullScreen","rootId","focusableQueue","useRef","first","undefined","last","wrappedClose","useCallback","event","bypassValidation","reason","measuredRef","node","focusableList","getFocusableList","current","length","isNil","focus","element","document","getElementById","warn","keyDownHandler","isKeypress","keyboardCodes","Tab","target","shiftKey","preventDefault","Esc","onEscapeKeyDown","disableEscapeKeyDown","stopPropagation","closeButtonDisplay","_jsx","Close","role","CloseButtonTooltipWrapper","withTooltip","slots","useMemo","backdrop","onClick","ClassNames","css","cx","MuiDialog","container","body","dialogClasses","root","ref","onKeyDown","position","BackdropProps","background","PaperProps","paper","styles","StyledClose","setId","closeButton","variant","React","Children","map","c","cloneElement"],"mappings":"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"}