@hitachivantara/uikit-react-core 5.32.0 → 5.33.0

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

@@ -1 +1 @@
-{"version":3,"file":"CheckBoxGroup.js","sources":["../../../../src/components/CheckBoxGroup/CheckBoxGroup.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { setId } from \"@core/utils/setId\";\nimport { multiSelectionEventHandler } from \"@core/utils/multiSelectionEventHandler\";\nimport { HvCheckBox } from \"@core/components/CheckBox\";\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./CheckBoxGroup.styles\";\n\nconst computeSelectAllState = (selected: number, total: number) => {\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 { staticClasses as checkBoxGroupClasses };\n\nexport type HvCheckBoxGroupClasses = ExtractNames<typeof useClasses>;\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 = forwardRef<HTMLDivElement, HvCheckBoxGroupProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\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    } = useDefaultProps(\"HvCheckBoxGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\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      [\n        allValues,\n        onChange,\n        required,\n        selectedState,\n        setValidationState,\n        setValue,\n      ]\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(\n              i,\n              child?.props?.onChange,\n              event,\n              isChecked\n            ),\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      <HvFormElement\n        id={id}\n        name={name}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {label && (\n          <HvLabel\n            id={setId(elementId, \"label\")}\n            label={label}\n            className={classes.label}\n          />\n        )}\n\n        {description && (\n          <HvInfoMessage id={setId(elementId, \"description\")}>\n            {description}\n          </HvInfoMessage>\n        )}\n\n        <div\n          ref={ref}\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={cx(classes.group, {\n            [classes.vertical]: orientation === \"vertical\",\n            [classes.horizontal]: orientation === \"horizontal\",\n            [classes.invalid]: validationState === \"invalid\",\n          })}\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={classes.selectAll}\n              onChange={handleSelectAll}\n            />\n          )}\n          {modifiedChildren}\n        </div>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["computeSelectAllState","selected","total","getValueFromSelectedChildren","children","selectedValues","Children","toArray","map","child","childIsControlled","props","checked","undefined","childIsSelected","defaultChecked","value","filter","v","HvCheckBoxGroup","forwardRef","ref","id","classes","classesProp","className","name","label","description","status","statusMessage","defaultValue","valueProp","required","readOnly","disabled","showSelectAll","orientation","selectAllLabel","selectAllConjunctionLabel","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","onChange","others","useDefaultProps","cx","useClasses","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","canShowError","errorMessageId","setId","root","join","trim","group","vertical","horizontal","invalid","selectAll","error"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAMA,wBAAwBA,CAACC,UAAkBC,UAAkB;AACjE,MAAID,aAAa,GAAG;AACX,WAAA;AAAA,EACT;AAEA,MAAIA,aAAaC,OAAO;AACf,WAAA;AAAA,EACT;AAEO,SAAA;AACT;AAEA,MAAMC,+BAA+BA,CAACC,aAA8B;AAClE,QAAMC,iBAAiBC,SAASC,QAAQH,QAAQ,EAC7CI,IAAI,CAACC,UAAe;;AACbC,UAAAA,sBAAoBD,oCAAOE,UAAPF,mBAAcG,aAAYC;AACpD,UAAMC,kBAAkBJ,qBACpBD,oCAAOE,UAAPF,mBAAcG,WACdH,oCAAOE,UAAPF,mBAAcM;AAEXD,WAAAA,mBAAkBL,oCAAOE,UAAPF,mBAAcO,QAAQH;AAAAA,EAAAA,CAChD,EACAI,OAAQC,CAAAA,MAAMA,MAAML,MAAS;AAEzBR,SAAAA;AACT;AA+FO,MAAMc,kBAAkBC,WAC7B,CAACT,OAAOU,QAAQ;AACR,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACArB;AAAAA,IACAsB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAf,OAAOgB;AAAAA,IACPC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,gBAAgB;AAAA,IAChBC,cAAc;AAAA,IACdC,iBAAiB;AAAA,IACjBC,4BAA4B;AAAA,IAC5B,cAAcC;AAAAA,IACd,mBAAmBC;AAAAA,IACnB,oBAAoBC;AAAAA,IACpB,qBAAqBC;AAAAA,IACrBC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,mBAAmBnC,KAAK;AAEtC,QAAA;AAAA,IAAEY;AAAAA,IAASwB;AAAAA,EAAAA,IAAOC,WAAWxB,WAAW;AAE9C,QAAM,CAACR,OAAOiC,QAAQ,IAAIC,cACxBlB,WACAD,iBAAiBlB,SACbkB;AAAAA;AAAAA;AAAAA,IAGA,MAAM5B,6BAA6BC,QAAQ;AAAA,GACjD;AAEA,QAAM,CAAC+C,iBAAiBC,kBAAkB,IAAIF,cAC5CrB,QACA,SACF;AAEA,QAAM,CAACwB,iBAAiB,IAAIH,cAAcpB,eAAe,UAAU;AAE7DwB,QAAAA,YAAYC,YAAYjC,IAAI,iBAAiB;AAE7CkC,QAAAA,kBAAkBC,OAAO5C,MAAS;AAExC,QAAM,CAAC6C,WAAWC,eAAeC,aAAa,IAAIC,QAAQ,MAAM;AAC9D,UAAMC,cAAqB,CAAA;AAC3B,UAAMC,qBAAgC,CAAA;AACtC,QAAIC,uBAAuB;AAE3B1D,aAASC,QAAQH,QAAQ,EAAE6D,QAAQ,CAACxD,OAAYyD,MAAc;;AACtDC,YAAAA,cAAa1D,oCAAOE,UAAPF,mBAAcO;AACjC,YAAMF,kBAAkBE,MAAMoD,QAAQD,UAAU,MAAM;AAEtDL,kBAAYI,CAAC,IAAIC;AACjBJ,yBAAmBG,CAAC,IAAIpD;AAExB,UAAIA,iBAAiB;AACK,gCAAA;AAAA,MAC1B;AAAA,IAAA,CACD;AAEM,WAAA,CAACgD,aAAaC,oBAAoBC,oBAAoB;AAAA,EAAA,GAC5D,CAAC5D,UAAUY,KAAK,CAAC;AAEpB,QAAMqD,iBAAiBrE,sBACrBgB,MAAMsD,QACNX,cAAcW,MAChB;AAEA,QAAMC,2BAA2BC,YAC/B,CACEC,OACAC,eAIAC,OACAC,cACG;AACH,UAAMC,WAAWC,2BACfH,OACAF,OACAjB,iBACAE,WACAC,eACAiB,SACF;AAEAF,mDAAgBC,OAAOC;AAEvBhC,yCAAW+B,OAAOE;AAElB5B,aAAS,MAAM;AAGThB,UAAAA,YAAY4C,SAASP,WAAW,GAAG;AACrClB,2BAAmB,SAAS;AAAA,MAAA,OACvB;AACLA,2BAAmB,OAAO;AAAA,MAC5B;AAEOyB,aAAAA;AAAAA,IAAAA,CACR;AAAA,EAAA,GAEH,CACEnB,WACAd,UACAX,UACA0B,eACAP,oBACAH,QAAQ,CAEZ;AAEM8B,QAAAA,mBAAmBlB,QAAQ,MAAM;AACrC,WAAOvD,SAASE,IAAIJ,UAAU,CAACK,OAAYyD,MAAc;;AACjDpD,YAAAA,kBAAkB6C,cAAcO,CAAC;AAEvC,aAAOc,aAAavE,OAAO;AAAA,QACzBG,SAASE;AAAAA,QACTY,QAAMjB,oCAAOE,UAAPF,mBAAciB,SAAQA;AAAAA,QAC5BkB,UAAUA,CACR+B,OACAC,cAEAL;;AAAAA,0CACEL,IACAzD,MAAAA,+BAAOE,UAAPF,gBAAAA,IAAcmC,UACd+B,OACAC,SACF;AAAA;AAAA,QACFzC,UAAUA,cAAY1B,oCAAOE,UAAPF,mBAAc0B;AAAAA,QACpCD,UAAUA,cAAYzB,oCAAOE,UAAPF,mBAAcyB;AAAAA,MAAAA,CACrC;AAAA,IAAA,CACF;AAAA,EAAA,GACA,CACD9B,UACA+B,UACAT,MACA6C,0BACArC,UACAyB,aAAa,CACd;AAEKsB,QAAAA,kBAAkBA,CACtBN,OACAO,qBACG;AACCL,QAAAA;AACJ,QAAIK,kBAAkB;AACT,iBAAA,CAAC,GAAGxB,SAAS;AAAA,IAAA,OACnB;AACLmB,iBAAW,CAAA;AAAA,IACb;AAEAjC,yCAAW+B,OAAOE;AAElB5B,aAAS,MAAM;AAEThB,UAAAA,YAAY4C,SAASP,WAAW,GAAG;AACrClB,2BAAmB,SAAS;AAAA,MAAA,OACvB;AACLA,2BAAmB,OAAO;AAAA,MAC5B;AAEOyB,aAAAA;AAAAA,IAAAA,CACR;AAAA,EAAA;AAGGM,QAAAA,0BACJvB,kBAAkB,IAEd,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,oBAAC,OAAGtB,UAAe,eAAA,CAAA;AAAA,IACjB,KAAIhC,SAASC,QAAQH,QAAQ,EAAEkE,MAAO;AAAA,EAAA,EAAA,CAC1C,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,oBAAC,OAAGV,UAAc,cAAA,CAAA;AAAA,IAChB,IAAGrB,yBAA0B,IAAGjC,SAASC,QAAQH,QAAQ,EAAEkE,MAAO;AAAA,EACtE,EAAA,CAAA;AAOEc,QAAAA,eACJzC,oBAAoB,SAClBd,WAAWhB,UAAaiB,kBAAkBjB,UACzCgB,WAAWhB,UAAaoB;AAE7B,QAAMoD,iBAAiBD,eACnBE,MAAMhC,WAAW,OAAO,IACxBX;AAEJ,SACG,qBAAA,eAAA,EACC,IACA,MACA,QAAQQ,iBACR,UACA,UACA,UACA,WAAWJ,GAAGxB,QAAQgE,MAAM9D,SAAS,GAEpCE,UAAAA;AAAAA,IACC,SAAA,oBAAC,SACC,EAAA,IAAI2D,MAAMhC,WAAW,OAAO,GAC5B,OACA,WAAW/B,QAAQI,MAEtB,CAAA;AAAA,IAEAC,mCACE,eAAc,EAAA,IAAI0D,MAAMhC,WAAW,aAAa,GAC9C1B,UACH,aAAA;AAAA,IAGF,qBAAC,SACC,KACA,MAAK,SACL,cAAYY,WACZ,mBACEC,kBAAmBd,SAAS2D,MAAMhC,WAAW,OAAO,KAAMzC,QAE5D,iBAAesB,WAAW,OAAOtB,QACjC,gBAAcsC,oBAAoB,YAAY,OAAOtC,QACrD,qBACEsC,oBAAoB,YAAYkC,iBAAiBxE,QAEnD,oBACE,CAACe,eAAe0D,MAAMhC,WAAW,aAAa,GAAGZ,eAAe,EAC7D8C,KAAK,GAAG,EACRC,KAAAA,KAAU5E,QAEf,WAAWkC,GAAGxB,QAAQmE,OAAO;AAAA,MAC3B,CAACnE,QAAQoE,QAAQ,GAAGtD,gBAAgB;AAAA,MACpC,CAACd,QAAQqE,UAAU,GAAGvD,gBAAgB;AAAA,MACtC,CAACd,QAAQsE,OAAO,GAAG1C,oBAAoB;AAAA,IAAA,CACxC,GACD,GAAIN,QAEHT,UAAAA;AAAAA,MAAAA,qCACE,YACC,EAAA,SAASiC,mBAAmB,OAC5B,eAAeA,mBAAmB,QAClC,OAAOc,yBACP,UACA,UACA,WAAW5D,QAAQuE,WACnB,UAAUb,iBAEb;AAAA,MACAF;AAAAA,IAAAA,GACH;AAAA,IAECK,gBACC,oBAAC,eACC,EAAA,IAAIE,MAAMhC,WAAW,OAAO,GAC5B,eAAa,MACb,WAAW/B,QAAQwE,OAElB1C,UACH,mBAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,CACF;"}
+{"version":3,"file":"CheckBoxGroup.js","sources":["../../../../src/components/CheckBoxGroup/CheckBoxGroup.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n} from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { setId } from \"@core/utils/setId\";\nimport { multiSelectionEventHandler } from \"@core/utils/multiSelectionEventHandler\";\nimport { HvCheckBox } from \"@core/components/CheckBox\";\nimport {\n  HvFormElement,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvWarningText,\n} from \"@core/components/Forms\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { staticClasses, useClasses } from \"./CheckBoxGroup.styles\";\n\nconst computeSelectAllState = (selected: number, total: number) => {\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 { staticClasses as checkBoxGroupClasses };\n\nexport type HvCheckBoxGroupClasses = ExtractNames<typeof useClasses>;\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 = forwardRef<HTMLDivElement, HvCheckBoxGroupProps>(\n  (props, ref) => {\n    const {\n      id,\n      classes: classesProp,\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    } = useDefaultProps(\"HvCheckBoxGroup\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n\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      [\n        allValues,\n        onChange,\n        required,\n        selectedState,\n        setValidationState,\n        setValue,\n      ]\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(\n              i,\n              child?.props?.onChange,\n              event,\n              isChecked\n            ),\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      <HvFormElement\n        id={id}\n        name={name}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        readOnly={readOnly}\n        className={cx(classes.root, className)}\n      >\n        {label && (\n          <HvLabel\n            id={setId(elementId, \"label\")}\n            label={label}\n            className={classes.label}\n          />\n        )}\n\n        {description && (\n          <HvInfoMessage id={setId(elementId, \"description\")}>\n            {description}\n          </HvInfoMessage>\n        )}\n\n        <div\n          ref={ref}\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={cx(classes.group, {\n            [classes.vertical]: orientation === \"vertical\",\n            [classes.horizontal]: orientation === \"horizontal\",\n            [classes.invalid]: validationState === \"invalid\",\n          })}\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={classes.selectAll}\n              onChange={handleSelectAll}\n            />\n          )}\n          {modifiedChildren}\n        </div>\n\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={classes.error}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["computeSelectAllState","selected","total","getValueFromSelectedChildren","children","selectedValues","Children","toArray","map","child","childIsControlled","props","checked","undefined","childIsSelected","defaultChecked","value","filter","v","HvCheckBoxGroup","forwardRef","ref","id","classes","classesProp","className","name","label","description","status","statusMessage","defaultValue","valueProp","required","readOnly","disabled","showSelectAll","orientation","selectAllLabel","selectAllConjunctionLabel","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaErrorMessage","onChange","others","useDefaultProps","cx","useClasses","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","canShowError","errorMessageId","setId","root","join","trim","group","vertical","horizontal","invalid","selectAll","error"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAMA,wBAAwBA,CAACC,UAAkBC,UAAkB;AACjE,MAAID,aAAa,GAAG;AACX,WAAA;AAAA,EACT;AAEA,MAAIA,aAAaC,OAAO;AACf,WAAA;AAAA,EACT;AAEO,SAAA;AACT;AAEA,MAAMC,+BAA+BA,CAACC,aAA8B;AAClE,QAAMC,iBAAiBC,SAASC,QAAQH,QAAQ,EAC7CI,IAAI,CAACC,UAAe;AACbC,UAAAA,oBAAoBD,OAAOE,OAAOC,YAAYC;AACpD,UAAMC,kBAAkBJ,oBACpBD,OAAOE,OAAOC,UACdH,OAAOE,OAAOI;AAEXD,WAAAA,kBAAkBL,OAAOE,OAAOK,QAAQH;AAAAA,EAAAA,CAChD,EACAI,OAAQC,CAAAA,MAAMA,MAAML,MAAS;AAEzBR,SAAAA;AACT;AA+FO,MAAMc,kBAAkBC,WAC7B,CAACT,OAAOU,QAAQ;AACR,QAAA;AAAA,IACJC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACArB;AAAAA,IACAsB;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAf,OAAOgB;AAAAA,IACPC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,WAAW;AAAA,IACXC,gBAAgB;AAAA,IAChBC,cAAc;AAAA,IACdC,iBAAiB;AAAA,IACjBC,4BAA4B;AAAA,IAC5B,cAAcC;AAAAA,IACd,mBAAmBC;AAAAA,IACnB,oBAAoBC;AAAAA,IACpB,qBAAqBC;AAAAA,IACrBC;AAAAA,IACA,GAAGC;AAAAA,EAAAA,IACDC,gBAAgB,mBAAmBnC,KAAK;AAEtC,QAAA;AAAA,IAAEY;AAAAA,IAASwB;AAAAA,EAAAA,IAAOC,WAAWxB,WAAW;AAE9C,QAAM,CAACR,OAAOiC,QAAQ,IAAIC,cACxBlB,WACAD,iBAAiBlB,SACbkB;AAAAA;AAAAA;AAAAA,IAGA,MAAM5B,6BAA6BC,QAAQ;AAAA,GACjD;AAEA,QAAM,CAAC+C,iBAAiBC,kBAAkB,IAAIF,cAC5CrB,QACA,SACF;AAEA,QAAM,CAACwB,iBAAiB,IAAIH,cAAcpB,eAAe,UAAU;AAE7DwB,QAAAA,YAAYC,YAAYjC,IAAI,iBAAiB;AAE7CkC,QAAAA,kBAAkBC,OAAO5C,MAAS;AAExC,QAAM,CAAC6C,WAAWC,eAAeC,aAAa,IAAIC,QAAQ,MAAM;AAC9D,UAAMC,cAAqB,CAAA;AAC3B,UAAMC,qBAAgC,CAAA;AACtC,QAAIC,uBAAuB;AAE3B1D,aAASC,QAAQH,QAAQ,EAAE6D,QAAQ,CAACxD,OAAYyD,MAAc;AACtDC,YAAAA,aAAa1D,OAAOE,OAAOK;AACjC,YAAMF,kBAAkBE,MAAMoD,QAAQD,UAAU,MAAM;AAEtDL,kBAAYI,CAAC,IAAIC;AACjBJ,yBAAmBG,CAAC,IAAIpD;AAExB,UAAIA,iBAAiB;AACK,gCAAA;AAAA,MAC1B;AAAA,IAAA,CACD;AAEM,WAAA,CAACgD,aAAaC,oBAAoBC,oBAAoB;AAAA,EAAA,GAC5D,CAAC5D,UAAUY,KAAK,CAAC;AAEpB,QAAMqD,iBAAiBrE,sBACrBgB,MAAMsD,QACNX,cAAcW,MAChB;AAEA,QAAMC,2BAA2BC,YAC/B,CACEC,OACAC,eAIAC,OACAC,cACG;AACH,UAAMC,WAAWC,2BACfH,OACAF,OACAjB,iBACAE,WACAC,eACAiB,SACF;AAEAF,oBAAgBC,OAAOC,SAAS;AAEhChC,eAAW+B,OAAOE,QAAQ;AAE1B5B,aAAS,MAAM;AAGThB,UAAAA,YAAY4C,SAASP,WAAW,GAAG;AACrClB,2BAAmB,SAAS;AAAA,MAAA,OACvB;AACLA,2BAAmB,OAAO;AAAA,MAC5B;AAEOyB,aAAAA;AAAAA,IAAAA,CACR;AAAA,EAAA,GAEH,CACEnB,WACAd,UACAX,UACA0B,eACAP,oBACAH,QAAQ,CAEZ;AAEM8B,QAAAA,mBAAmBlB,QAAQ,MAAM;AACrC,WAAOvD,SAASE,IAAIJ,UAAU,CAACK,OAAYyD,MAAc;AACjDpD,YAAAA,kBAAkB6C,cAAcO,CAAC;AAEvC,aAAOc,aAAavE,OAAO;AAAA,QACzBG,SAASE;AAAAA,QACTY,MAAMjB,OAAOE,OAAOe,QAAQA;AAAAA,QAC5BkB,UAAUA,CACR+B,OACAC,cAEAL,yBACEL,GACAzD,OAAOE,OAAOiC,UACd+B,OACAC,SACF;AAAA,QACFzC,UAAUA,YAAY1B,OAAOE,OAAOwB;AAAAA,QACpCD,UAAUA,YAAYzB,OAAOE,OAAOuB;AAAAA,MAAAA,CACrC;AAAA,IAAA,CACF;AAAA,EAAA,GACA,CACD9B,UACA+B,UACAT,MACA6C,0BACArC,UACAyB,aAAa,CACd;AAEKsB,QAAAA,kBAAkBA,CACtBN,OACAO,qBACG;AACCL,QAAAA;AACJ,QAAIK,kBAAkB;AACT,iBAAA,CAAC,GAAGxB,SAAS;AAAA,IAAA,OACnB;AACLmB,iBAAW,CAAA;AAAA,IACb;AAEAjC,eAAW+B,OAAOE,QAAQ;AAE1B5B,aAAS,MAAM;AAEThB,UAAAA,YAAY4C,SAASP,WAAW,GAAG;AACrClB,2BAAmB,SAAS;AAAA,MAAA,OACvB;AACLA,2BAAmB,OAAO;AAAA,MAC5B;AAEOyB,aAAAA;AAAAA,IAAAA,CACR;AAAA,EAAA;AAGGM,QAAAA,0BACJvB,kBAAkB,IAEd,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,oBAAC,OAAGtB,UAAe,eAAA,CAAA;AAAA,IACjB,KAAIhC,SAASC,QAAQH,QAAQ,EAAEkE,MAAO;AAAA,EAAA,EAAA,CAC1C,IAGE,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA,oBAAC,OAAGV,UAAc,cAAA,CAAA;AAAA,IAChB,IAAGrB,yBAA0B,IAAGjC,SAASC,QAAQH,QAAQ,EAAEkE,MAAO;AAAA,EACtE,EAAA,CAAA;AAOEc,QAAAA,eACJzC,oBAAoB,SAClBd,WAAWhB,UAAaiB,kBAAkBjB,UACzCgB,WAAWhB,UAAaoB;AAE7B,QAAMoD,iBAAiBD,eACnBE,MAAMhC,WAAW,OAAO,IACxBX;AAEJ,SACG,qBAAA,eAAA,EACC,IACA,MACA,QAAQQ,iBACR,UACA,UACA,UACA,WAAWJ,GAAGxB,QAAQgE,MAAM9D,SAAS,GAEpCE,UAAAA;AAAAA,IACC,SAAA,oBAAC,SACC,EAAA,IAAI2D,MAAMhC,WAAW,OAAO,GAC5B,OACA,WAAW/B,QAAQI,MAEtB,CAAA;AAAA,IAEAC,mCACE,eAAc,EAAA,IAAI0D,MAAMhC,WAAW,aAAa,GAC9C1B,UACH,aAAA;AAAA,IAGF,qBAAC,SACC,KACA,MAAK,SACL,cAAYY,WACZ,mBACEC,kBAAmBd,SAAS2D,MAAMhC,WAAW,OAAO,KAAMzC,QAE5D,iBAAesB,WAAW,OAAOtB,QACjC,gBAAcsC,oBAAoB,YAAY,OAAOtC,QACrD,qBACEsC,oBAAoB,YAAYkC,iBAAiBxE,QAEnD,oBACE,CAACe,eAAe0D,MAAMhC,WAAW,aAAa,GAAGZ,eAAe,EAC7D8C,KAAK,GAAG,EACRC,KAAAA,KAAU5E,QAEf,WAAWkC,GAAGxB,QAAQmE,OAAO;AAAA,MAC3B,CAACnE,QAAQoE,QAAQ,GAAGtD,gBAAgB;AAAA,MACpC,CAACd,QAAQqE,UAAU,GAAGvD,gBAAgB;AAAA,MACtC,CAACd,QAAQsE,OAAO,GAAG1C,oBAAoB;AAAA,IAAA,CACxC,GACD,GAAIN,QAEHT,UAAAA;AAAAA,MAAAA,qCACE,YACC,EAAA,SAASiC,mBAAmB,OAC5B,eAAeA,mBAAmB,QAClC,OAAOc,yBACP,UACA,UACA,WAAW5D,QAAQuE,WACnB,UAAUb,iBAEb;AAAA,MACAF;AAAAA,IAAAA,GACH;AAAA,IAECK,gBACC,oBAAC,eACC,EAAA,IAAIE,MAAMhC,WAAW,OAAO,GAC5B,eAAa,MACb,WAAW/B,QAAQwE,OAElB1C,UACH,mBAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ,CACF;"}

package/dist/esm/components/ColorPicker/ColorPicker.js

@@ -72,33 +72,33 @@ const HvColorPicker = forwardRef((props, ref) => {
     setIsOpen(open);
   };
   const handleSelect = (val) => {
-    onChange == null ? void 0 : onChange(val.hex);
-    onChangeComplete == null ? void 0 : onChangeComplete(val.hex);
+    onChange?.(val.hex);
+    onChangeComplete?.(val.hex);
     setColor(val.hex);
   };
   const handleOnChange = (val) => {
-    onChange == null ? void 0 : onChange(val.hex);
+    onChange?.(val.hex);
     setColor(val.hex);
   };
   const handleOnChangeComplete = (val) => {
-    onChangeComplete == null ? void 0 : onChangeComplete(val.hex);
+    onChangeComplete?.(val.hex);
     setColor(val.hex);
   };
   const handleAddColor = () => {
     const colorToAdd = color || "#000000";
-    onSavedColorAdded == null ? void 0 : onSavedColorAdded(colorToAdd);
+    onSavedColorAdded?.(colorToAdd);
     setSavedColors([...savedColors, colorToAdd]);
   };
   const handleRemoveColor = (val, position) => {
     if (savedColors[position] === val) {
       const sColors = [...savedColors];
       sColors.splice(position, 1);
-      onSavedColorRemoved == null ? void 0 : onSavedColorRemoved(val);
+      onSavedColorRemoved?.(val);
       setSavedColors(sColors);
     }
   };
   const setFocusToContent = (containerRef) => {
-    const inputs = containerRef == null ? void 0 : containerRef.getElementsByTagName("input");
+    const inputs = containerRef?.getElementsByTagName("input");
     if (inputs && inputs.length > 0) {
       inputs[0].focus();
     }
@@ -119,14 +119,14 @@ const HvColorPicker = forwardRef((props, ref) => {
       /* @__PURE__ */ jsx(Checkbox, { className: classes.headerColorIcon, color: [color, "transparent"] }),
       /* @__PURE__ */ jsx(HvTypography, { className: classes.headerColorValue, variant: "label", children: color })
     ] }) : placeholder, "aria-label": ariaLabel, "aria-labelledby": [label && setId(elementId, "label"), ariaLabelledBy].join(" ").trim() || void 0, "aria-describedby": [description && setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0, children: /* @__PURE__ */ jsx(HvPanel, { className: classes.panel, children: /* @__PURE__ */ jsxs("div", { className: classes.colorPicker, children: [
-      recommendedColorsPosition === "top" && /* @__PURE__ */ jsx(PresetColors, { className: classes.recommendedColorsRoot, colors: recommendedColors, onClick: handleSelect, title: showLabels ? labels == null ? void 0 : labels.recommendedColorsLabel : void 0 }),
+      recommendedColorsPosition === "top" && /* @__PURE__ */ jsx(PresetColors, { className: classes.recommendedColorsRoot, colors: recommendedColors, onClick: handleSelect, title: showLabels ? labels?.recommendedColorsLabel : void 0 }),
       showCustomColors && /* @__PURE__ */ jsx(Picker, { classes: {
         fields: cx({
           [classes.pickerFields]: recommendedColorsPosition === "bottom" || showSavedColors
         })
-      }, title: showLabels ? labels == null ? void 0 : labels.customColorsLabel : void 0, color, onChange: handleOnChange, onChangeComplete: handleOnChangeComplete }),
+      }, title: showLabels ? labels?.customColorsLabel : void 0, color, onChange: handleOnChange, onChangeComplete: handleOnChangeComplete }),
       showSavedColors && /* @__PURE__ */ jsx(SavedColors, { colors: savedColors, onAddColor: handleAddColor, onClickColor: handleSelect, onRemoveColor: handleRemoveColor, deleteButtonAriaLabel: deleteSavedColorButtonArialLabel, addButtonAriaLabel: addSavedColorButtonAriaLabel }),
-      recommendedColorsPosition === "bottom" && /* @__PURE__ */ jsx(PresetColors, { colors: recommendedColors, onClick: handleSelect, title: showLabels ? labels == null ? void 0 : labels.recommendedColorsLabel : void 0 })
+      recommendedColorsPosition === "bottom" && /* @__PURE__ */ jsx(PresetColors, { colors: recommendedColors, onClick: handleSelect, title: showLabels ? labels?.recommendedColorsLabel : void 0 })
     ] }) }) })
   ] });
 });

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

@@ -1 +1 @@
-{"version":3,"file":"ColorPicker.js","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { ColorState } from \"react-color\";\n\nimport { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useLabels } from \"@core/hooks/useLabels\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvPanel } from \"@core/components/Panel\";\nimport { HvFormElement, HvInfoMessage, HvLabel } from \"@core/components/Forms\";\nimport { HvBaseDropdown } from \"@core/components/BaseDropdown\";\nimport { HvDropdownProps } from \"@core/components/Dropdown\";\n\nimport { Picker } from \"./Picker\";\nimport { staticClasses, useClasses } from \"./ColorPicker.styles\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\n\nexport { staticClasses as colorPickerClasses };\n\nexport type HvColorPickerClasses = ExtractNames<typeof useClasses>;\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 function to be executed whenever the color change is complete. */\n  onChangeComplete?: (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; // TODO: fix typo \"ArialLabel\" in next version\n  /** Aria label to apply to add saved color button. */\n  addSavedColorButtonAriaLabel?: 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 = forwardRef<HTMLDivElement, HvColorPickerProps>(\n  (props, ref) => {\n    const {\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: classesProp,\n      value,\n      onChange,\n      onChangeComplete,\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      addSavedColorButtonAriaLabel = \"Add current color to saved colors\",\n    } = useDefaultProps(\"HvColorPicker\", props);\n\n    const { classes, css, cx } = useClasses(classesProp);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const [isOpen, setIsOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\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: HvDropdownProps[\"onToggle\"] = (_, open) => {\n      setIsOpen(open);\n    };\n\n    const handleSelect = (\n      val: ColorState | { hex: string; source: string }\n    ) => {\n      onChange?.(val.hex);\n      onChangeComplete?.(val.hex);\n      setColor(val.hex);\n    };\n\n    const handleOnChange = (\n      val: ColorState | { hex: string; source: string }\n    ) => {\n      onChange?.(val.hex);\n      setColor(val.hex);\n    };\n\n    const handleOnChangeComplete = (\n      val: ColorState | { hex: string; source: string }\n    ) => {\n      onChangeComplete?.(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      <HvFormElement\n        id={id}\n        name={name}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvBaseDropdown\n          ref={ref}\n          variableWidth\n          className={className}\n          expanded={isOpen}\n          onToggle={handleToggle}\n          onContainerCreation={setFocusToContent}\n          classes={{\n            root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),\n            selection: cx(iconOnly && css({ padding: 0 })),\n          }}\n          adornment={\n            iconOnly && color ? (\n              <Checkbox\n                className={classes.headerColorIconOnly}\n                color={[color, \"transparent\"]}\n              />\n            ) : dropdownIcon === \"colorPicker\" ? (\n              <ColorPicker className={classes.colorPickerIcon} />\n            ) : undefined\n          }\n          placeholder={\n            iconOnly ? undefined : color ? (\n              <>\n                <Checkbox\n                  className={classes.headerColorIcon}\n                  color={[color, \"transparent\"]}\n                />\n                <HvTypography\n                  className={classes.headerColorValue}\n                  variant=\"label\"\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 className={classes.panel}>\n            <div className={classes.colorPicker}>\n              {recommendedColorsPosition === \"top\" && (\n                <PresetColors\n                  className={classes.recommendedColorsRoot}\n                  colors={recommendedColors}\n                  onClick={handleSelect}\n                  title={\n                    showLabels ? labels?.recommendedColorsLabel : undefined\n                  }\n                />\n              )}\n              {showCustomColors && (\n                <Picker\n                  classes={{\n                    fields: cx({\n                      [classes.pickerFields]:\n                        recommendedColorsPosition === \"bottom\" ||\n                        showSavedColors,\n                    }),\n                  }}\n                  title={showLabels ? labels?.customColorsLabel : undefined}\n                  color={color}\n                  onChange={handleOnChange}\n                  onChangeComplete={handleOnChangeComplete}\n                />\n              )}\n              {showSavedColors && (\n                <SavedColors\n                  colors={savedColors}\n                  onAddColor={handleAddColor}\n                  onClickColor={handleSelect}\n                  onRemoveColor={handleRemoveColor}\n                  deleteButtonAriaLabel={deleteSavedColorButtonArialLabel}\n                  addButtonAriaLabel={addSavedColorButtonAriaLabel}\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  }\n);\n"],"names":["DEFAULT_LABELS","recommendedColorsLabel","customColorsLabel","HvColorPicker","forwardRef","props","ref","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","classesProp","value","onChange","onChangeComplete","defaultValue","expanded","defaultExpanded","recommendedColorsPosition","recommendedColors","showLabels","labels","labelsProp","dropdownIcon","placeholder","iconOnly","showSavedColors","showCustomColors","savedColorsValue","defaultSavedColorsValue","onSavedColorAdded","onSavedColorRemoved","deleteSavedColorButtonArialLabel","addSavedColorButtonAriaLabel","useDefaultProps","css","cx","useClasses","useLabels","isOpen","setIsOpen","useControlled","Boolean","color","setColor","savedColors","setSavedColors","elementId","useUniqueId","hasLabel","hasDescription","handleToggle","_","open","handleSelect","val","hex","handleOnChange","handleOnChangeComplete","handleAddColor","colorToAdd","handleRemoveColor","position","sColors","splice","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","root","labelContainer","setId","dropdownRootIconOnly","selection","padding","headerColorIconOnly","colorPickerIcon","undefined","headerColorIcon","headerColorValue","join","trim","panel","colorPicker","recommendedColorsRoot","fields","pickerFields"],"mappings":"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"}
+{"version":3,"file":"ColorPicker.js","sources":["../../../../src/components/ColorPicker/ColorPicker.tsx"],"sourcesContent":["import { forwardRef } from \"react\";\n\nimport { ColorState } from \"react-color\";\n\nimport { Checkbox, ColorPicker } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { useUniqueId } from \"@core/hooks/useUniqueId\";\nimport { useLabels } from \"@core/hooks/useLabels\";\nimport { ExtractNames } from \"@core/utils/classes\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvTypography } from \"@core/components/Typography\";\nimport { HvPanel } from \"@core/components/Panel\";\nimport { HvFormElement, HvInfoMessage, HvLabel } from \"@core/components/Forms\";\nimport { HvBaseDropdown } from \"@core/components/BaseDropdown\";\nimport { HvDropdownProps } from \"@core/components/Dropdown\";\n\nimport { Picker } from \"./Picker\";\nimport { staticClasses, useClasses } from \"./ColorPicker.styles\";\nimport { PresetColors } from \"./PresetColors\";\nimport { SavedColors } from \"./SavedColors\";\n\nexport { staticClasses as colorPickerClasses };\n\nexport type HvColorPickerClasses = ExtractNames<typeof useClasses>;\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 function to be executed whenever the color change is complete. */\n  onChangeComplete?: (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; // TODO: fix typo \"ArialLabel\" in next version\n  /** Aria label to apply to add saved color button. */\n  addSavedColorButtonAriaLabel?: 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 = forwardRef<HTMLDivElement, HvColorPickerProps>(\n  (props, ref) => {\n    const {\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: classesProp,\n      value,\n      onChange,\n      onChangeComplete,\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      addSavedColorButtonAriaLabel = \"Add current color to saved colors\",\n    } = useDefaultProps(\"HvColorPicker\", props);\n\n    const { classes, css, cx } = useClasses(classesProp);\n\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const [isOpen, setIsOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\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: HvDropdownProps[\"onToggle\"] = (_, open) => {\n      setIsOpen(open);\n    };\n\n    const handleSelect = (\n      val: ColorState | { hex: string; source: string }\n    ) => {\n      onChange?.(val.hex);\n      onChangeComplete?.(val.hex);\n      setColor(val.hex);\n    };\n\n    const handleOnChange = (\n      val: ColorState | { hex: string; source: string }\n    ) => {\n      onChange?.(val.hex);\n      setColor(val.hex);\n    };\n\n    const handleOnChangeComplete = (\n      val: ColorState | { hex: string; source: string }\n    ) => {\n      onChangeComplete?.(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      <HvFormElement\n        id={id}\n        name={name}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n      >\n        {(hasLabel || hasDescription) && (\n          <div className={classes.labelContainer}>\n            {hasLabel && (\n              <HvLabel\n                id={setId(elementId, \"label\")}\n                label={label}\n                className={classes.label}\n              />\n            )}\n\n            {hasDescription && (\n              <HvInfoMessage\n                id={setId(elementId, \"description\")}\n                className={classes.description}\n              >\n                {description}\n              </HvInfoMessage>\n            )}\n          </div>\n        )}\n        <HvBaseDropdown\n          ref={ref}\n          variableWidth\n          className={className}\n          expanded={isOpen}\n          onToggle={handleToggle}\n          onContainerCreation={setFocusToContent}\n          classes={{\n            root: cx({ [classes.dropdownRootIconOnly]: iconOnly }),\n            selection: cx(iconOnly && css({ padding: 0 })),\n          }}\n          adornment={\n            iconOnly && color ? (\n              <Checkbox\n                className={classes.headerColorIconOnly}\n                color={[color, \"transparent\"]}\n              />\n            ) : dropdownIcon === \"colorPicker\" ? (\n              <ColorPicker className={classes.colorPickerIcon} />\n            ) : undefined\n          }\n          placeholder={\n            iconOnly ? undefined : color ? (\n              <>\n                <Checkbox\n                  className={classes.headerColorIcon}\n                  color={[color, \"transparent\"]}\n                />\n                <HvTypography\n                  className={classes.headerColorValue}\n                  variant=\"label\"\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 className={classes.panel}>\n            <div className={classes.colorPicker}>\n              {recommendedColorsPosition === \"top\" && (\n                <PresetColors\n                  className={classes.recommendedColorsRoot}\n                  colors={recommendedColors}\n                  onClick={handleSelect}\n                  title={\n                    showLabels ? labels?.recommendedColorsLabel : undefined\n                  }\n                />\n              )}\n              {showCustomColors && (\n                <Picker\n                  classes={{\n                    fields: cx({\n                      [classes.pickerFields]:\n                        recommendedColorsPosition === \"bottom\" ||\n                        showSavedColors,\n                    }),\n                  }}\n                  title={showLabels ? labels?.customColorsLabel : undefined}\n                  color={color}\n                  onChange={handleOnChange}\n                  onChangeComplete={handleOnChangeComplete}\n                />\n              )}\n              {showSavedColors && (\n                <SavedColors\n                  colors={savedColors}\n                  onAddColor={handleAddColor}\n                  onClickColor={handleSelect}\n                  onRemoveColor={handleRemoveColor}\n                  deleteButtonAriaLabel={deleteSavedColorButtonArialLabel}\n                  addButtonAriaLabel={addSavedColorButtonAriaLabel}\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  }\n);\n"],"names":["DEFAULT_LABELS","recommendedColorsLabel","customColorsLabel","HvColorPicker","forwardRef","props","ref","id","name","required","disabled","label","ariaLabel","ariaLabelledBy","description","ariaDescribedBy","className","classes","classesProp","value","onChange","onChangeComplete","defaultValue","expanded","defaultExpanded","recommendedColorsPosition","recommendedColors","showLabels","labels","labelsProp","dropdownIcon","placeholder","iconOnly","showSavedColors","showCustomColors","savedColorsValue","defaultSavedColorsValue","onSavedColorAdded","onSavedColorRemoved","deleteSavedColorButtonArialLabel","addSavedColorButtonAriaLabel","useDefaultProps","css","cx","useClasses","useLabels","isOpen","setIsOpen","useControlled","Boolean","color","setColor","savedColors","setSavedColors","elementId","useUniqueId","hasLabel","hasDescription","handleToggle","_","open","handleSelect","val","hex","handleOnChange","handleOnChangeComplete","handleAddColor","colorToAdd","handleRemoveColor","position","sColors","splice","setFocusToContent","containerRef","inputs","getElementsByTagName","length","focus","root","labelContainer","setId","dropdownRootIconOnly","selection","padding","headerColorIconOnly","colorPickerIcon","undefined","headerColorIcon","headerColorValue","join","trim","panel","colorPicker","recommendedColorsRoot","fields","pickerFields"],"mappings":"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"}

package/dist/esm/components/ColorPicker/Fields/Fields.js

@@ -18,9 +18,9 @@ const Fields = (props) => {
     cx
   } = useClasses(classesProp);
   const [internalHex, setInternalHex] = useState(hex);
-  const [internalRed, setInternalRed] = useState(rgb == null ? void 0 : rgb.r);
-  const [internalGreen, setInternalGreen] = useState(rgb == null ? void 0 : rgb.g);
-  const [internalBlue, setInternalBlue] = useState(rgb == null ? void 0 : rgb.b);
+  const [internalRed, setInternalRed] = useState(rgb?.r);
+  const [internalGreen, setInternalGreen] = useState(rgb?.g);
+  const [internalBlue, setInternalBlue] = useState(rgb?.b);
   const hexInputRef = useRef(null);
   const redInputRef = useRef(null);
   const greenInputRef = useRef(null);
@@ -32,13 +32,13 @@ const Fields = (props) => {
   }, [hex]);
   useEffect(() => {
     if (document.activeElement !== redInputRef.current) {
-      setInternalRed(rgb == null ? void 0 : rgb.r);
+      setInternalRed(rgb?.r);
     }
     if (document.activeElement !== greenInputRef.current) {
-      setInternalGreen(rgb == null ? void 0 : rgb.g);
+      setInternalGreen(rgb?.g);
     }
     if (document.activeElement !== blueInputRef.current) {
-      setInternalBlue(rgb == null ? void 0 : rgb.b);
+      setInternalBlue(rgb?.b);
     }
   }, [rgb]);
   const handleChange = (data, event) => {
@@ -49,9 +49,9 @@ const Fields = (props) => {
       }, event);
     } else if (data.r || data.g || data.b) {
       onChange({
-        r: data.r || (rgb == null ? void 0 : rgb.r),
-        g: data.g || (rgb == null ? void 0 : rgb.g),
-        b: data.b || (rgb == null ? void 0 : rgb.b),
+        r: data.r || rgb?.r,
+        g: data.g || rgb?.g,
+        b: data.b || rgb?.b,
         source: "rgb"
       }, event);
     }
@@ -70,16 +70,16 @@ const Fields = (props) => {
     if (colorPart === "b")
       setInternalBlue(Number(value));
     handleChange({
-      r: colorPart === "r" ? Number(value) : rgb == null ? void 0 : rgb.r,
-      g: colorPart === "g" ? Number(value) : rgb == null ? void 0 : rgb.g,
-      b: colorPart === "b" ? Number(value) : rgb == null ? void 0 : rgb.b
+      r: colorPart === "r" ? Number(value) : rgb?.r,
+      g: colorPart === "g" ? Number(value) : rgb?.g,
+      b: colorPart === "b" ? Number(value) : rgb?.b
     }, event);
   };
   return /* @__PURE__ */ jsxs("div", { className: cx(classes.fields, className), children: [
-    /* @__PURE__ */ jsx(HvInput, { ref: hexInputRef, className: classes.double, label: "HEX", value: internalHex == null ? void 0 : internalHex.replace("#", ""), onChange: onChangeHex, onBlur: () => setInternalHex(hex), disableClear: true }),
-    /* @__PURE__ */ jsx(HvInput, { ref: redInputRef, className: classes.single, label: "R", value: `${internalRed}`, onChange: (event, value) => onChangeRbg(event, value, "r"), onBlur: () => setInternalRed(rgb == null ? void 0 : rgb.r), disableClear: true }),
-    /* @__PURE__ */ jsx(HvInput, { ref: greenInputRef, className: classes.single, label: "G", value: `${internalGreen}`, onChange: (event, value) => onChangeRbg(event, value, "g"), onBlur: () => setInternalGreen(rgb == null ? void 0 : rgb.g), disableClear: true }),
-    /* @__PURE__ */ jsx(HvInput, { ref: blueInputRef, className: classes.single, label: "B", value: `${internalBlue}`, onChange: (event, value) => onChangeRbg(event, value, "b"), onBlur: () => setInternalBlue(rgb == null ? void 0 : rgb.b), disableClear: true })
+    /* @__PURE__ */ jsx(HvInput, { ref: hexInputRef, className: classes.double, label: "HEX", value: internalHex?.replace("#", ""), onChange: onChangeHex, onBlur: () => setInternalHex(hex), disableClear: true }),
+    /* @__PURE__ */ jsx(HvInput, { ref: redInputRef, className: classes.single, label: "R", value: `${internalRed}`, onChange: (event, value) => onChangeRbg(event, value, "r"), onBlur: () => setInternalRed(rgb?.r), disableClear: true }),
+    /* @__PURE__ */ jsx(HvInput, { ref: greenInputRef, className: classes.single, label: "G", value: `${internalGreen}`, onChange: (event, value) => onChangeRbg(event, value, "g"), onBlur: () => setInternalGreen(rgb?.g), disableClear: true }),
+    /* @__PURE__ */ jsx(HvInput, { ref: blueInputRef, className: classes.single, label: "B", value: `${internalBlue}`, onChange: (event, value) => onChangeRbg(event, value, "b"), onBlur: () => setInternalBlue(rgb?.b), disableClear: true })
   ] });
 };
 export {

package/dist/esm/components/ColorPicker/Fields/Fields.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fields.js","sources":["../../../../../src/components/ColorPicker/Fields/Fields.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\n\nimport * as color from \"react-color/lib/helpers/color\";\n\nimport { HvInput } from \"@core/components/Input\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport { staticClasses, useClasses } from \"./Fields.styles\";\n\nexport { staticClasses as colorPickerFieldsClasses };\n\nexport type HvColorPickerFieldsClasses = ExtractNames<typeof useClasses>;\n\ninterface FieldsProps {\n  className?: string;\n  rgb?: RGBColor;\n  hex?: string;\n  onChange: (\n    data:\n      | HSLColor\n      | HSVColor\n      | RGBColor\n      | {\n          source?: string;\n          hex?: string;\n        },\n    event: React.ChangeEvent<HTMLInputElement>\n  ) => void;\n  classes?: HvColorPickerFieldsClasses;\n}\n\nexport const Fields = (props: FieldsProps) => {\n  const {\n    className,\n    onChange,\n    rgb,\n    hex,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerFields\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const [internalHex, setInternalHex] = useState(hex);\n  const [internalRed, setInternalRed] = useState(rgb?.r);\n  const [internalGreen, setInternalGreen] = useState(rgb?.g);\n  const [internalBlue, setInternalBlue] = useState(rgb?.b);\n\n  const hexInputRef = useRef<HTMLInputElement>(null);\n  const redInputRef = useRef<HTMLInputElement>(null);\n  const greenInputRef = useRef<HTMLInputElement>(null);\n  const blueInputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (document.activeElement !== hexInputRef.current) {\n      setInternalHex(hex);\n    }\n  }, [hex]);\n\n  useEffect(() => {\n    if (document.activeElement !== redInputRef.current) {\n      setInternalRed(rgb?.r);\n    }\n\n    if (document.activeElement !== greenInputRef.current) {\n      setInternalGreen(rgb?.g);\n    }\n\n    if (document.activeElement !== blueInputRef.current) {\n      setInternalBlue(rgb?.b);\n    }\n  }, [rgb]);\n\n  const handleChange = (\n    data: {\n      hex?: string;\n      r?: number;\n      g?: number;\n      b?: number;\n    },\n    event: React.ChangeEvent<HTMLInputElement>\n  ) => {\n    if (data.hex && color.isValidHex(data.hex)) {\n      onChange(\n        {\n          hex: data.hex,\n          source: \"hex\",\n        },\n        event\n      );\n    } else if (data.r || data.g || data.b) {\n      onChange(\n        {\n          r: data.r || rgb?.r,\n          g: data.g || rgb?.g,\n          b: data.b || rgb?.b,\n          source: \"rgb\",\n        },\n        event\n      );\n    }\n  };\n\n  const onChangeHex = (event: React.ChangeEvent<any>, value: string) => {\n    setInternalHex(value);\n    handleChange({ hex: value }, event);\n  };\n\n  const onChangeRbg = (\n    event: React.ChangeEvent<any>,\n    value: string,\n    colorPart: \"r\" | \"g\" | \"b\"\n  ) => {\n    if (colorPart === \"r\") setInternalRed(Number(value));\n    if (colorPart === \"g\") setInternalGreen(Number(value));\n    if (colorPart === \"b\") setInternalBlue(Number(value));\n\n    handleChange(\n      {\n        r: colorPart === \"r\" ? Number(value) : rgb?.r,\n        g: colorPart === \"g\" ? Number(value) : rgb?.g,\n        b: colorPart === \"b\" ? Number(value) : rgb?.b,\n      },\n      event\n    );\n  };\n\n  return (\n    <div className={cx(classes.fields, className)}>\n      <HvInput\n        ref={hexInputRef}\n        className={classes.double}\n        label=\"HEX\"\n        value={internalHex?.replace(\"#\", \"\")}\n        onChange={onChangeHex}\n        onBlur={() => setInternalHex(hex)}\n        disableClear\n      />\n      <HvInput\n        ref={redInputRef}\n        className={classes.single}\n        label=\"R\"\n        value={`${internalRed}`}\n        onChange={(event, value) => onChangeRbg(event, value, \"r\")}\n        onBlur={() => setInternalRed(rgb?.r)}\n        disableClear\n      />\n      <HvInput\n        ref={greenInputRef}\n        className={classes.single}\n        label=\"G\"\n        value={`${internalGreen}`}\n        onChange={(event, value) => onChangeRbg(event, value, \"g\")}\n        onBlur={() => setInternalGreen(rgb?.g)}\n        disableClear\n      />\n      <HvInput\n        ref={blueInputRef}\n        className={classes.single}\n        label=\"B\"\n        value={`${internalBlue}`}\n        onChange={(event, value) => onChangeRbg(event, value, \"b\")}\n        onBlur={() => setInternalBlue(rgb?.b)}\n        disableClear\n      />\n    </div>\n  );\n};\n"],"names":["Fields","props","className","onChange","rgb","hex","classes","classesProp","useDefaultProps","cx","useClasses","internalHex","setInternalHex","useState","internalRed","setInternalRed","r","internalGreen","setInternalGreen","g","internalBlue","setInternalBlue","b","hexInputRef","useRef","redInputRef","greenInputRef","blueInputRef","useEffect","document","activeElement","current","handleChange","data","event","color","isValidHex","source","onChangeHex","value","onChangeRbg","colorPart","Number","fields","double","replace","single"],"mappings":"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"}
+{"version":3,"file":"Fields.js","sources":["../../../../../src/components/ColorPicker/Fields/Fields.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { HSLColor, HSVColor, RGBColor } from \"react-color\";\n\nimport * as color from \"react-color/lib/helpers/color\";\n\nimport { HvInput } from \"@core/components/Input\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\n\nimport { staticClasses, useClasses } from \"./Fields.styles\";\n\nexport { staticClasses as colorPickerFieldsClasses };\n\nexport type HvColorPickerFieldsClasses = ExtractNames<typeof useClasses>;\n\ninterface FieldsProps {\n  className?: string;\n  rgb?: RGBColor;\n  hex?: string;\n  onChange: (\n    data:\n      | HSLColor\n      | HSVColor\n      | RGBColor\n      | {\n          source?: string;\n          hex?: string;\n        },\n    event: React.ChangeEvent<HTMLInputElement>\n  ) => void;\n  classes?: HvColorPickerFieldsClasses;\n}\n\nexport const Fields = (props: FieldsProps) => {\n  const {\n    className,\n    onChange,\n    rgb,\n    hex,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerFields\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const [internalHex, setInternalHex] = useState(hex);\n  const [internalRed, setInternalRed] = useState(rgb?.r);\n  const [internalGreen, setInternalGreen] = useState(rgb?.g);\n  const [internalBlue, setInternalBlue] = useState(rgb?.b);\n\n  const hexInputRef = useRef<HTMLInputElement>(null);\n  const redInputRef = useRef<HTMLInputElement>(null);\n  const greenInputRef = useRef<HTMLInputElement>(null);\n  const blueInputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (document.activeElement !== hexInputRef.current) {\n      setInternalHex(hex);\n    }\n  }, [hex]);\n\n  useEffect(() => {\n    if (document.activeElement !== redInputRef.current) {\n      setInternalRed(rgb?.r);\n    }\n\n    if (document.activeElement !== greenInputRef.current) {\n      setInternalGreen(rgb?.g);\n    }\n\n    if (document.activeElement !== blueInputRef.current) {\n      setInternalBlue(rgb?.b);\n    }\n  }, [rgb]);\n\n  const handleChange = (\n    data: {\n      hex?: string;\n      r?: number;\n      g?: number;\n      b?: number;\n    },\n    event: React.ChangeEvent<HTMLInputElement>\n  ) => {\n    if (data.hex && color.isValidHex(data.hex)) {\n      onChange(\n        {\n          hex: data.hex,\n          source: \"hex\",\n        },\n        event\n      );\n    } else if (data.r || data.g || data.b) {\n      onChange(\n        {\n          r: data.r || rgb?.r,\n          g: data.g || rgb?.g,\n          b: data.b || rgb?.b,\n          source: \"rgb\",\n        },\n        event\n      );\n    }\n  };\n\n  const onChangeHex = (event: React.ChangeEvent<any>, value: string) => {\n    setInternalHex(value);\n    handleChange({ hex: value }, event);\n  };\n\n  const onChangeRbg = (\n    event: React.ChangeEvent<any>,\n    value: string,\n    colorPart: \"r\" | \"g\" | \"b\"\n  ) => {\n    if (colorPart === \"r\") setInternalRed(Number(value));\n    if (colorPart === \"g\") setInternalGreen(Number(value));\n    if (colorPart === \"b\") setInternalBlue(Number(value));\n\n    handleChange(\n      {\n        r: colorPart === \"r\" ? Number(value) : rgb?.r,\n        g: colorPart === \"g\" ? Number(value) : rgb?.g,\n        b: colorPart === \"b\" ? Number(value) : rgb?.b,\n      },\n      event\n    );\n  };\n\n  return (\n    <div className={cx(classes.fields, className)}>\n      <HvInput\n        ref={hexInputRef}\n        className={classes.double}\n        label=\"HEX\"\n        value={internalHex?.replace(\"#\", \"\")}\n        onChange={onChangeHex}\n        onBlur={() => setInternalHex(hex)}\n        disableClear\n      />\n      <HvInput\n        ref={redInputRef}\n        className={classes.single}\n        label=\"R\"\n        value={`${internalRed}`}\n        onChange={(event, value) => onChangeRbg(event, value, \"r\")}\n        onBlur={() => setInternalRed(rgb?.r)}\n        disableClear\n      />\n      <HvInput\n        ref={greenInputRef}\n        className={classes.single}\n        label=\"G\"\n        value={`${internalGreen}`}\n        onChange={(event, value) => onChangeRbg(event, value, \"g\")}\n        onBlur={() => setInternalGreen(rgb?.g)}\n        disableClear\n      />\n      <HvInput\n        ref={blueInputRef}\n        className={classes.single}\n        label=\"B\"\n        value={`${internalBlue}`}\n        onChange={(event, value) => onChangeRbg(event, value, \"b\")}\n        onBlur={() => setInternalBlue(rgb?.b)}\n        disableClear\n      />\n    </div>\n  );\n};\n"],"names":["Fields","props","className","onChange","rgb","hex","classes","classesProp","useDefaultProps","cx","useClasses","internalHex","setInternalHex","useState","internalRed","setInternalRed","r","internalGreen","setInternalGreen","g","internalBlue","setInternalBlue","b","hexInputRef","useRef","redInputRef","greenInputRef","blueInputRef","useEffect","document","activeElement","current","handleChange","data","event","color","isValidHex","source","onChangeHex","value","onChangeRbg","colorPart","Number","fields","double","replace","single"],"mappings":"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"}

package/dist/esm/components/ColorPicker/Picker/Picker.js

@@ -24,13 +24,13 @@ const Component = (props) => {
   const {
     classes
   } = useClasses(classesProp);
-  const SaturationPointer = useCallback(() => /* @__PURE__ */ jsx("div", { className: classes == null ? void 0 : classes.saturationPointer }), [classes == null ? void 0 : classes.saturationPointer]);
-  const HueSlider = useCallback(() => /* @__PURE__ */ jsx("div", { className: classes == null ? void 0 : classes.hueSlider }), [classes == null ? void 0 : classes.hueSlider]);
+  const SaturationPointer = useCallback(() => /* @__PURE__ */ jsx("div", { className: classes?.saturationPointer }), [classes?.saturationPointer]);
+  const HueSlider = useCallback(() => /* @__PURE__ */ jsx("div", { className: classes?.hueSlider }), [classes?.hueSlider]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     title && /* @__PURE__ */ jsx(HvTypography, { className: classes.title, variant: "caption1", children: title }),
     /* @__PURE__ */ jsxs("div", { className: classes.pickers, children: [
       /* @__PURE__ */ jsx("div", { className: classes.saturation, children: /* @__PURE__ */ jsx(Saturation, { hsl, hsv, onChange, pointer: SaturationPointer }) }),
-      /* @__PURE__ */ jsx("div", { className: classes.hue, children: /* @__PURE__ */ jsx(Hue, { direction: activeTheme == null ? void 0 : activeTheme.colorPicker.hueDirection, hsl, onChange, pointer: HueSlider }) })
+      /* @__PURE__ */ jsx("div", { className: classes.hue, children: /* @__PURE__ */ jsx(Hue, { direction: activeTheme?.colorPicker.hueDirection, hsl, onChange, pointer: HueSlider }) })
     ] }),
     /* @__PURE__ */ jsx(Fields, { className: classes.fields, rgb, hex, onChange })
   ] });

package/dist/esm/components/ColorPicker/Picker/Picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"Picker.js","sources":["../../../../../src/components/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { useCallback } from \"react\";\n\nimport { Saturation, Hue } from \"react-color/lib/components/common\";\nimport {\n  CustomPicker,\n  CustomPickerInjectedProps,\n  HSLColor,\n  HSVColor,\n  RGBColor,\n} from \"react-color\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport { staticClasses, useClasses } from \"./Picker.styles\";\nimport { Fields } from \"../Fields\";\n\nexport { staticClasses as colorPickerPickerClasses };\n\nexport type HvColorPickerPickerClasses = ExtractNames<typeof useClasses>;\n\ninterface PickerProps\n  extends CustomPickerInjectedProps<\n    | HSLColor\n    | HSVColor\n    | RGBColor\n    | {\n        source?: string;\n        hex?: string;\n      }\n  > {\n  classes?: HvColorPickerPickerClasses;\n  title?: string;\n}\n\nconst Component = (props: PickerProps) => {\n  const {\n    onChange,\n    rgb,\n    hsl,\n    hsv,\n    hex,\n    title,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerPicker\", props);\n  const { activeTheme } = useTheme();\n  const { classes } = useClasses(classesProp);\n\n  const SaturationPointer = useCallback(\n    () => <div className={classes?.saturationPointer} />,\n    [classes?.saturationPointer]\n  );\n\n  const HueSlider = useCallback(\n    () => <div className={classes?.hueSlider} />,\n    [classes?.hueSlider]\n  );\n\n  return (\n    <>\n      {title && (\n        <HvTypography className={classes.title} variant=\"caption1\">\n          {title}\n        </HvTypography>\n      )}\n      <div className={classes.pickers}>\n        <div className={classes.saturation}>\n          <Saturation\n            hsl={hsl}\n            hsv={hsv}\n            onChange={onChange}\n            pointer={SaturationPointer}\n          />\n        </div>\n        <div className={classes.hue}>\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={classes.fields}\n        rgb={rgb}\n        hex={hex}\n        onChange={onChange}\n      />\n    </>\n  );\n};\n\nexport const Picker = CustomPicker(Component);\n"],"names":["Component","props","onChange","rgb","hsl","hsv","hex","title","classes","classesProp","useDefaultProps","activeTheme","useTheme","useClasses","SaturationPointer","useCallback","saturationPointer","HueSlider","hueSlider","pickers","saturation","hue","colorPicker","hueDirection","fields","Picker","CustomPicker"],"mappings":";;;;;;;;;;AAqCA,MAAMA,YAAYA,CAACC,UAAuB;AAClC,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,uBAAuBT,KAAK;AAC1C,QAAA;AAAA,IAAEU;AAAAA,MAAgBC,SAAS;AAC3B,QAAA;AAAA,IAAEJ;AAAAA,EAAAA,IAAYK,WAAWJ,WAAW;AAE1C,QAAMK,oBAAoBC,YACxB,MAAM,oBAAC,OAAI,EAAA,WAAWP,mCAASQ,kBAAAA,CAAqB,GACpD,CAACR,mCAASQ,iBAAiB,CAC7B;AAEA,QAAMC,YAAYF,YAChB,MAAM,oBAAC,OAAI,EAAA,WAAWP,mCAASU,UAAAA,CAAa,GAC5C,CAACV,mCAASU,SAAS,CACrB;AAEA,SAEKX,qBAAAA,UAAAA,EAAAA,UAAAA;AAAAA,IAAAA,6BACE,cAAa,EAAA,WAAWC,QAAQD,OAAO,SAAQ,YAC7CA,UACH,MAAA,CAAA;AAAA,IAED,qBAAA,OAAA,EAAI,WAAWC,QAAQW,SACtB,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAI,WAAWX,QAAQY,YACtB,UAAA,oBAAC,YACC,EAAA,KACA,KACA,UACA,SAASN,kBAAkB,CAAA,GAE/B;AAAA,MACC,oBAAA,OAAA,EAAI,WAAWN,QAAQa,KACtB,UAAC,oBAAA,KAAA,EACC,WAAWV,2CAAaW,YAAYC,cACpC,KACA,UACA,SAASN,UAAU,CAAA,GAEvB;AAAA,IAAA,GACF;AAAA,wBACC,QACC,EAAA,WAAWT,QAAQgB,QACnB,KACA,KACA,UAAmB;AAAA,EAEvB,EAAA,CAAA;AAEJ;AAEaC,MAAAA,SAASC,aAAa1B,SAAS;"}
+{"version":3,"file":"Picker.js","sources":["../../../../../src/components/ColorPicker/Picker/Picker.tsx"],"sourcesContent":["import { useCallback } from \"react\";\n\nimport { Saturation, Hue } from \"react-color/lib/components/common\";\nimport {\n  CustomPicker,\n  CustomPickerInjectedProps,\n  HSLColor,\n  HSVColor,\n  RGBColor,\n} from \"react-color\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { useTheme } from \"@core/hooks/useTheme\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\n\nimport { staticClasses, useClasses } from \"./Picker.styles\";\nimport { Fields } from \"../Fields\";\n\nexport { staticClasses as colorPickerPickerClasses };\n\nexport type HvColorPickerPickerClasses = ExtractNames<typeof useClasses>;\n\ninterface PickerProps\n  extends CustomPickerInjectedProps<\n    | HSLColor\n    | HSVColor\n    | RGBColor\n    | {\n        source?: string;\n        hex?: string;\n      }\n  > {\n  classes?: HvColorPickerPickerClasses;\n  title?: string;\n}\n\nconst Component = (props: PickerProps) => {\n  const {\n    onChange,\n    rgb,\n    hsl,\n    hsv,\n    hex,\n    title,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerPicker\", props);\n  const { activeTheme } = useTheme();\n  const { classes } = useClasses(classesProp);\n\n  const SaturationPointer = useCallback(\n    () => <div className={classes?.saturationPointer} />,\n    [classes?.saturationPointer]\n  );\n\n  const HueSlider = useCallback(\n    () => <div className={classes?.hueSlider} />,\n    [classes?.hueSlider]\n  );\n\n  return (\n    <>\n      {title && (\n        <HvTypography className={classes.title} variant=\"caption1\">\n          {title}\n        </HvTypography>\n      )}\n      <div className={classes.pickers}>\n        <div className={classes.saturation}>\n          <Saturation\n            hsl={hsl}\n            hsv={hsv}\n            onChange={onChange}\n            pointer={SaturationPointer}\n          />\n        </div>\n        <div className={classes.hue}>\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={classes.fields}\n        rgb={rgb}\n        hex={hex}\n        onChange={onChange}\n      />\n    </>\n  );\n};\n\nexport const Picker = CustomPicker(Component);\n"],"names":["Component","props","onChange","rgb","hsl","hsv","hex","title","classes","classesProp","useDefaultProps","activeTheme","useTheme","useClasses","SaturationPointer","useCallback","saturationPointer","HueSlider","hueSlider","pickers","saturation","hue","colorPicker","hueDirection","fields","Picker","CustomPicker"],"mappings":";;;;;;;;;;AAsCA,MAAMA,YAAYA,CAACC,UAAuB;AAClC,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,uBAAuBT,KAAK;AAC1C,QAAA;AAAA,IAAEU;AAAAA,MAAgBC,SAAS;AAC3B,QAAA;AAAA,IAAEJ;AAAAA,EAAAA,IAAYK,WAAWJ,WAAW;AAE1C,QAAMK,oBAAoBC,YACxB,MAAM,oBAAC,OAAI,EAAA,WAAWP,SAASQ,kBAAAA,CAAqB,GACpD,CAACR,SAASQ,iBAAiB,CAC7B;AAEA,QAAMC,YAAYF,YAChB,MAAM,oBAAC,OAAI,EAAA,WAAWP,SAASU,UAAAA,CAAa,GAC5C,CAACV,SAASU,SAAS,CACrB;AAEA,SAEKX,qBAAAA,UAAAA,EAAAA,UAAAA;AAAAA,IAAAA,6BACE,cAAa,EAAA,WAAWC,QAAQD,OAAO,SAAQ,YAC7CA,UACH,MAAA,CAAA;AAAA,IAED,qBAAA,OAAA,EAAI,WAAWC,QAAQW,SACtB,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAI,WAAWX,QAAQY,YACtB,UAAA,oBAAC,YACC,EAAA,KACA,KACA,UACA,SAASN,kBAAkB,CAAA,GAE/B;AAAA,MACC,oBAAA,OAAA,EAAI,WAAWN,QAAQa,KACtB,UAAC,oBAAA,KAAA,EACC,WAAWV,aAAaW,YAAYC,cACpC,KACA,UACA,SAASN,UAAU,CAAA,GAEvB;AAAA,IAAA,GACF;AAAA,wBACC,QACC,EAAA,WAAWT,QAAQgB,QACnB,KACA,KACA,UAAmB;AAAA,EAEvB,EAAA,CAAA;AAEJ;AAEaC,MAAAA,SAASC,aAAa1B,SAAS;"}

package/dist/esm/components/ColorPicker/PresetColors/PresetColors.js.map

@@ -1 +1 @@
-{"version":3,"file":"PresetColors.js","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport { staticClasses, useClasses } from \"./PresetColors.styles\";\n\nexport { staticClasses as colorPickerPresetColorsClasses };\n\nexport type HvColorPickerPresetColorsClasses = ExtractNames<typeof useClasses>;\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 = (props: PresetColorsProps) => {\n  const {\n    onClick,\n    colors,\n    title,\n    className,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerPresetColors\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleClick = (hex: string) => {\n    onClick({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {title && (\n        <HvTypography className={classes.title} variant=\"caption1\">\n          {title}\n        </HvTypography>\n      )}\n      <div className={classes.colors}>\n        {colors.map((color, index) => (\n          <div\n            key={`recommended-color-${color}-${index}`}\n            className={classes.swatchWrap}\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      </div>\n    </div>\n  );\n};\n"],"names":["PresetColors","props","onClick","colors","title","className","classes","classesProp","useDefaultProps","cx","useClasses","handleClick","hex","source","root","map","color","index","swatchWrap","boxShadow"],"mappings":";;;;;;AAsBaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,6BAA6BP,KAAK;AAChD,QAAA;AAAA,IAAEK;AAAAA,IAASG;AAAAA,EAAAA,IAAOC,WAAWH,WAAW;AAExCI,QAAAA,cAAcA,CAACC,QAAgB;AAC3B,YAAA;AAAA,MACNA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,8BACG,OAAI,EAAA,WAAWJ,GAAGH,QAAQQ,MAAMT,SAAS,GACvCD,UAAAA;AAAAA,IAAAA,6BACE,cAAa,EAAA,WAAWE,QAAQF,OAAO,SAAQ,YAC7CA,UACH,MAAA,CAAA;AAAA,IAEF,oBAAC,SAAI,WAAWE,QAAQH,QACrBA,UAAOY,OAAAA,IAAI,CAACC,OAAOC,8BACjB,OAEC,EAAA,WAAWX,QAAQY,YAEnB,UAAA,oBAAC,UACC,OACA,SAASP,aACT,YAAY;AAAA,MACVQ,WAAY,4CAA2CH,KAAM;AAAA,IAAA,GAC7D,KARE,qBAAoBA,KAAM,IAAGC,KAAM,EAU3C,CACD,GACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"PresetColors.js","sources":["../../../../../src/components/ColorPicker/PresetColors/PresetColors.tsx"],"sourcesContent":["// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { HvTypography } from \"@core/components/Typography\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\n\nimport { staticClasses, useClasses } from \"./PresetColors.styles\";\n\nexport { staticClasses as colorPickerPresetColorsClasses };\n\nexport type HvColorPickerPresetColorsClasses = ExtractNames<typeof useClasses>;\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 = (props: PresetColorsProps) => {\n  const {\n    onClick,\n    colors,\n    title,\n    className,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerPresetColors\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  const handleClick = (hex: string) => {\n    onClick({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <div className={cx(classes.root, className)}>\n      {title && (\n        <HvTypography className={classes.title} variant=\"caption1\">\n          {title}\n        </HvTypography>\n      )}\n      <div className={classes.colors}>\n        {colors.map((color, index) => (\n          <div\n            key={`recommended-color-${color}-${index}`}\n            className={classes.swatchWrap}\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      </div>\n    </div>\n  );\n};\n"],"names":["PresetColors","props","onClick","colors","title","className","classes","classesProp","useDefaultProps","cx","useClasses","handleClick","hex","source","root","map","color","index","swatchWrap","boxShadow"],"mappings":";;;;;;AAuBaA,MAAAA,eAAeA,CAACC,UAA6B;AAClD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,6BAA6BP,KAAK;AAChD,QAAA;AAAA,IAAEK;AAAAA,IAASG;AAAAA,EAAAA,IAAOC,WAAWH,WAAW;AAExCI,QAAAA,cAAcA,CAACC,QAAgB;AAC3B,YAAA;AAAA,MACNA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,8BACG,OAAI,EAAA,WAAWJ,GAAGH,QAAQQ,MAAMT,SAAS,GACvCD,UAAAA;AAAAA,IAAAA,6BACE,cAAa,EAAA,WAAWE,QAAQF,OAAO,SAAQ,YAC7CA,UACH,MAAA,CAAA;AAAA,IAEF,oBAAC,SAAI,WAAWE,QAAQH,QACrBA,UAAOY,OAAAA,IAAI,CAACC,OAAOC,8BACjB,OAEC,EAAA,WAAWX,QAAQY,YAEnB,UAAA,oBAAC,UACC,OACA,SAASP,aACT,YAAY;AAAA,MACVQ,WAAY,4CAA2CH,KAAM;AAAA,IAAA,GAC7D,KARE,qBAAoBA,KAAM,IAAGC,KAAM,EAU3C,CACD,GACH;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/ColorPicker/SavedColors/SavedColors.js.map

@@ -1 +1 @@
-{"version":3,"file":"SavedColors.js","sources":["../../../../../src/components/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["import { CloseXS, Add } from \"@hitachivantara/uikit-react-icons\";\n\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\nimport { staticClasses, useClasses } from \"./SavedColors.styles\";\n\nexport { staticClasses as colorPickerSavedColorsClasses };\n\nexport type HvColorPickerSavedColorsClasses = ExtractNames<typeof useClasses>;\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  deleteButtonAriaLabel?: string;\n  addButtonAriaLabel?: string;\n  classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = (props: SavedColorsProps) => {\n  const {\n    colors,\n    onClickColor,\n    onAddColor,\n    onRemoveColor,\n    deleteButtonAriaLabel,\n    addButtonAriaLabel,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerSavedColors\", props);\n  const { classes } = useClasses(classesProp);\n\n  const handleClick = (hex: string) => {\n    onClickColor({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <div className={classes.root}>\n      <HvButton\n        className={classes.addButton}\n        variant=\"secondarySubtle\"\n        icon\n        onClick={onAddColor}\n        aria-label={addButtonAriaLabel}\n      >\n        <Add aria-hidden />\n      </HvButton>\n      {colors.map((color, index) => (\n        <div\n          key={`saved-color-${color}-${index}`}\n          className={classes.swatchRoot}\n        >\n          <div className={classes.swatchWrap}>\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 className={classes.removeButtonRoot}>\n            <HvButton\n              className={classes.removeButton}\n              variant=\"secondarySubtle\"\n              onClick={() => onRemoveColor(color, index)}\n              tabIndex={0}\n              aria-label={deleteButtonAriaLabel}\n            >\n              <CloseXS aria-hidden iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["SavedColors","props","colors","onClickColor","onAddColor","onRemoveColor","deleteButtonAriaLabel","addButtonAriaLabel","classes","classesProp","useDefaultProps","useClasses","handleClick","hex","source","root","addButton","map","color","index","swatchRoot","swatchWrap","boxShadow","removeButtonRoot","removeButton"],"mappings":";;;;;;;AA0BaA,MAAAA,cAAcA,CAACC,UAA4B;AAChD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,4BAA4BT,KAAK;AAC/C,QAAA;AAAA,IAAEO;AAAAA,EAAAA,IAAYG,WAAWF,WAAW;AAEpCG,QAAAA,cAAcA,CAACC,QAAgB;AACtB,iBAAA;AAAA,MACXA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,SACG,qBAAA,OAAA,EAAI,WAAWN,QAAQO,MACtB,UAAA;AAAA,IAAA,oBAAC,YACC,WAAWP,QAAQQ,WACnB,SAAQ,mBACR,MAAI,MACJ,SAASZ,YACT,cAAYG,oBAEZ,UAAA,oBAAC,KAAI,EAAA,eAAW,KAAA,CAAA,GAClB;AAAA,IACCL,OAAOe,IAAI,CAACC,OAAOC,UACjB,qBAAA,OAAA,EAEC,WAAWX,QAAQY,YAEnB,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAI,WAAWZ,QAAQa,YACtB,8BAAC,QACC,EAAA,OACA,SAAST,aACT,YAAY;AAAA,QACVU,WAAY,4CAA2CJ,KAAM;AAAA,SAC7D,EAEN,CAAA;AAAA,MACC,oBAAA,OAAA,EAAI,WAAWV,QAAQe,kBACtB,UAAA,oBAAC,UACC,EAAA,WAAWf,QAAQgB,cACnB,SAAQ,mBACR,SAAS,MAAMnB,cAAca,OAAOC,KAAK,GACzC,UAAU,GACV,cAAYb,uBAEZ,UAAC,oBAAA,SAAA,EAAQ,eAAW,MAAC,UAAS,KAAI,CAAA,EACpC,CAAA,GACF;AAAA,IAAA,EAAA,GAtBM,eAAcY,KAAM,IAAGC,KAAM,EAuBrC,CACD;AAAA,EACH,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"SavedColors.js","sources":["../../../../../src/components/ColorPicker/SavedColors/SavedColors.tsx"],"sourcesContent":["import { CloseXS, Add } from \"@hitachivantara/uikit-react-icons\";\n\n// @types/react-color seems to be broken\n// @ts-ignore\nimport { Swatch } from \"react-color/lib/components/common\";\n\nimport { HvButton } from \"@core/components/Button\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useDefaultProps } from \"@core/hooks\";\n\nimport { staticClasses, useClasses } from \"./SavedColors.styles\";\n\nexport { staticClasses as colorPickerSavedColorsClasses };\n\nexport type HvColorPickerSavedColorsClasses = ExtractNames<typeof useClasses>;\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  deleteButtonAriaLabel?: string;\n  addButtonAriaLabel?: string;\n  classes?: HvColorPickerSavedColorsClasses;\n}\n\nexport const SavedColors = (props: SavedColorsProps) => {\n  const {\n    colors,\n    onClickColor,\n    onAddColor,\n    onRemoveColor,\n    deleteButtonAriaLabel,\n    addButtonAriaLabel,\n    classes: classesProp,\n  } = useDefaultProps(\"HvColorPickerSavedColors\", props);\n  const { classes } = useClasses(classesProp);\n\n  const handleClick = (hex: string) => {\n    onClickColor({\n      hex,\n      source: \"hex\",\n    });\n  };\n\n  return (\n    <div className={classes.root}>\n      <HvButton\n        className={classes.addButton}\n        variant=\"secondarySubtle\"\n        icon\n        onClick={onAddColor}\n        aria-label={addButtonAriaLabel}\n      >\n        <Add aria-hidden />\n      </HvButton>\n      {colors.map((color, index) => (\n        <div\n          key={`saved-color-${color}-${index}`}\n          className={classes.swatchRoot}\n        >\n          <div className={classes.swatchWrap}>\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 className={classes.removeButtonRoot}>\n            <HvButton\n              className={classes.removeButton}\n              variant=\"secondarySubtle\"\n              onClick={() => onRemoveColor(color, index)}\n              tabIndex={0}\n              aria-label={deleteButtonAriaLabel}\n            >\n              <CloseXS aria-hidden iconSize=\"XS\" />\n            </HvButton>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n};\n"],"names":["SavedColors","props","colors","onClickColor","onAddColor","onRemoveColor","deleteButtonAriaLabel","addButtonAriaLabel","classes","classesProp","useDefaultProps","useClasses","handleClick","hex","source","root","addButton","map","color","index","swatchRoot","swatchWrap","boxShadow","removeButtonRoot","removeButton"],"mappings":";;;;;;;AA2BaA,MAAAA,cAAcA,CAACC,UAA4B;AAChD,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,EAAAA,IACPC,gBAAgB,4BAA4BT,KAAK;AAC/C,QAAA;AAAA,IAAEO;AAAAA,EAAAA,IAAYG,WAAWF,WAAW;AAEpCG,QAAAA,cAAcA,CAACC,QAAgB;AACtB,iBAAA;AAAA,MACXA;AAAAA,MACAC,QAAQ;AAAA,IAAA,CACT;AAAA,EAAA;AAGH,SACG,qBAAA,OAAA,EAAI,WAAWN,QAAQO,MACtB,UAAA;AAAA,IAAA,oBAAC,YACC,WAAWP,QAAQQ,WACnB,SAAQ,mBACR,MAAI,MACJ,SAASZ,YACT,cAAYG,oBAEZ,UAAA,oBAAC,KAAI,EAAA,eAAW,KAAA,CAAA,GAClB;AAAA,IACCL,OAAOe,IAAI,CAACC,OAAOC,UACjB,qBAAA,OAAA,EAEC,WAAWX,QAAQY,YAEnB,UAAA;AAAA,MAAC,oBAAA,OAAA,EAAI,WAAWZ,QAAQa,YACtB,8BAAC,QACC,EAAA,OACA,SAAST,aACT,YAAY;AAAA,QACVU,WAAY,4CAA2CJ,KAAM;AAAA,SAC7D,EAEN,CAAA;AAAA,MACC,oBAAA,OAAA,EAAI,WAAWV,QAAQe,kBACtB,UAAA,oBAAC,UACC,EAAA,WAAWf,QAAQgB,cACnB,SAAQ,mBACR,SAAS,MAAMnB,cAAca,OAAOC,KAAK,GACzC,UAAU,GACV,cAAYb,uBAEZ,UAAC,oBAAA,SAAA,EAAQ,eAAW,MAAC,UAAS,KAAI,CAAA,EACpC,CAAA,GACF;AAAA,IAAA,EAAA,GAtBM,eAAcY,KAAM,IAAGC,KAAM,EAuBrC,CACD;AAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/Controls/Controls.js

@@ -28,19 +28,13 @@ const HvControls = (props) => {
   const [currentView, setCurrentView] = useControlled(selectedView, defaultView);
   const onViewChangeHandler = (evt, btnId) => {
     setCurrentView(btnId);
-    onViewChange == null ? void 0 : onViewChange(evt, btnId);
-  };
-  const onSearchHandler = (value) => {
-    var _a;
-    return (_a = callbacks == null ? void 0 : callbacks.setGlobalFilter) == null ? void 0 : _a.call(callbacks, value);
-  };
-  const onSortHandler = (value) => {
-    var _a;
-    return (_a = callbacks == null ? void 0 : callbacks.setSortBy) == null ? void 0 : _a.call(callbacks, [{
-      id: value == null ? void 0 : value.accessor,
-      desc: value == null ? void 0 : value.desc
-    }]);
+    onViewChange?.(evt, btnId);
   };
+  const onSearchHandler = (value) => callbacks?.setGlobalFilter?.(value);
+  const onSortHandler = (value) => callbacks?.setSortBy?.([{
+    id: value?.accessor,
+    desc: value?.desc
+  }]);
   const childrenCount = Children.count(children);
   const childrenArray = Children.toArray(children);
   const childrenIndexCut = childrenCount > 0 ? Math.round(childrenCount * 0.5) : 0;
@@ -53,7 +47,7 @@ const HvControls = (props) => {
     /* @__PURE__ */ jsx("div", { className: cx(classes.section, classes.leftSection), children: leftChildren }),
     /* @__PURE__ */ jsxs("div", { className: cx(classes.section, classes.rightSection), children: [
       rightChildren,
-      views && !hideViewSwitcher && (views == null ? void 0 : views.length) > 0 && /* @__PURE__ */ jsx(HvMultiButton, { id: setId(id, "view-multi-button"), children: views.map(({
+      views && !hideViewSwitcher && views?.length > 0 && /* @__PURE__ */ jsx(HvMultiButton, { id: setId(id, "view-multi-button"), children: views.map(({
         id: btnId,
         icon,
         ...others

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

@@ -1 +1 @@
-{"version":3,"file":"Controls.js","sources":["../../../../src/components/Controls/Controls.tsx"],"sourcesContent":["import { Children, MouseEvent } from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps, HvExtraProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvMultiButton } from \"@core/components/MultiButton\";\nimport { setId } from \"@core/utils/setId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvTableInstance } from \"@core/components/Table/hooks/useTable\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { HvControlsContextProvider } from \"./context/ControlsContext\";\nimport { staticClasses, useClasses } from \"./Controls.styles\";\n\nexport { staticClasses as controlsClasses };\n\nexport type HvControlsClasses = ExtractNames<typeof useClasses>;\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: MouseEvent<HTMLButtonElement>, 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 = (props: HvControlsProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    views,\n    callbacks,\n    selectedView,\n    defaultView,\n    children,\n    hideViewSwitcher = false,\n    onViewChange,\n  } = useDefaultProps(\"HvControls\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [currentView, setCurrentView] = useControlled(\n    selectedView,\n    defaultView\n  );\n\n  const onViewChangeHandler = (\n    evt: MouseEvent<HTMLButtonElement>,\n    btnId: any\n  ) => {\n    setCurrentView(btnId);\n    onViewChange?.(evt, btnId);\n  };\n\n  const onSearchHandler = (value: any) => callbacks?.setGlobalFilter?.(value);\n  const onSortHandler = (value: any) =>\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    <div id={id} className={cx(classes.root, className)}>\n      <HvControlsContextProvider\n        value={{\n          onSearch: onSearchHandler,\n          onSort: onSortHandler,\n        }}\n      >\n        <div className={cx(classes.section, classes.leftSection)}>\n          {leftChildren}\n        </div>\n        <div className={cx(classes.section, classes.rightSection)}>\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        </div>\n      </HvControlsContextProvider>\n    </div>\n  );\n};\n"],"names":["HvControls","props","id","className","classes","classesProp","views","callbacks","selectedView","defaultView","children","hideViewSwitcher","onViewChange","useDefaultProps","cx","useClasses","currentView","setCurrentView","useControlled","onViewChangeHandler","evt","btnId","onSearchHandler","value","setGlobalFilter","onSortHandler","setSortBy","accessor","desc","childrenCount","Children","count","childrenArray","toArray","childrenIndexCut","Math","round","leftChildren","slice","rightChildren","root","onSearch","onSort","section","leftSection","rightSection","length","setId","map","icon","others"],"mappings":";;;;;;;;;;AA2DaA,MAAAA,aAAaA,CAACC,UAA2B;AAC9C,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,mBAAmB;AAAA,IACnBC;AAAAA,EAAAA,IACEC,gBAAgB,cAAcZ,KAAK;AAEjC,QAAA;AAAA,IAAEG;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAE9C,QAAM,CAACW,aAAaC,cAAc,IAAIC,cACpCV,cACAC,WACF;AAEMU,QAAAA,sBAAsBA,CAC1BC,KACAC,UACG;AACHJ,mBAAeI,KAAK;AACpBT,iDAAeQ,KAAKC;AAAAA,EAAK;AAG3B,QAAMC,kBAAkBA,CAACC,UAAehB;;AAAAA,wDAAWiB,oBAAXjB,mCAA6BgB;AAAAA;AACrE,QAAME,gBAAgBA,CAACF;;AACrBhB,wDAAWmB,cAAXnB,mCAAuB,CACrB;AAAA,MACEL,IAAIqB,+BAAOI;AAAAA,MACXC,MAAML,+BAAOK;AAAAA,IACd,CAAA;AAAA;AAGCC,QAAAA,gBAAgBC,SAASC,MAAMrB,QAAQ;AACvCsB,QAAAA,gBAAgBF,SAASG,QAAQvB,QAAQ;AAE/C,QAAMwB,mBACJL,gBAAgB,IAAIM,KAAKC,MAAMP,gBAAgB,GAAG,IAAI;AACxD,QAAMQ,eAAeL,cAAcM,MAAM,GAAGJ,gBAAgB;AAC5D,QAAMK,gBAAgBP,cAAcM,MAClCJ,kBACAL,iBAAiB,CACnB;AAGE,SAAA,oBAAC,OAAI,EAAA,IAAQ,WAAWf,GAAGV,QAAQoC,MAAMrC,SAAS,GAChD,UAAC,qBAAA,2BAAA,EACC,OAAO;AAAA,IACLsC,UAAUnB;AAAAA,IACVoB,QAAQjB;AAAAA,EAGV,GAAA,UAAA;AAAA,IAAC,oBAAA,OAAA,EAAI,WAAWX,GAAGV,QAAQuC,SAASvC,QAAQwC,WAAW,GACpDP,UACH,aAAA,CAAA;AAAA,IACA,qBAAC,SAAI,WAAWvB,GAAGV,QAAQuC,SAASvC,QAAQyC,YAAY,GACrDN,UAAAA;AAAAA,MAAAA;AAAAA,MACAjC,SAAS,CAACK,qBAAoBL,+BAAOwC,UAAS,KAC7C,oBAAC,eAAc,EAAA,IAAIC,MAAM7C,IAAI,mBAAmB,GAC7CI,UAAAA,MAAM0C,IAAI,CAAC;AAAA,QAAE9C,IAAImB;AAAAA,QAAO4B;AAAAA,QAAM,GAAGC;AAAAA,MAAO,0BACtC,UACC,EAAA,IAAI7B,OAEJ,MAAI,MACJ,UAAUL,gBAAgBK,OAC1B,SAAUD,CAAQD,QAAAA,oBAAoBC,KAAKC,KAAK,GAChD,GAAI6B,QAEHD,UAAAA,KAAAA,GANI5B,KAOP,CACD,GACH;AAAA,IAAA,GAEJ;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}
+{"version":3,"file":"Controls.js","sources":["../../../../src/components/Controls/Controls.tsx"],"sourcesContent":["import { Children, MouseEvent } from \"react\";\n\nimport { useDefaultProps } from \"@core/hooks/useDefaultProps\";\nimport { HvBaseProps, HvExtraProps } from \"@core/types/generic\";\nimport { HvButton } from \"@core/components/Button\";\nimport { HvMultiButton } from \"@core/components/MultiButton\";\nimport { setId } from \"@core/utils/setId\";\nimport { useControlled } from \"@core/hooks/useControlled\";\nimport { HvTableInstance } from \"@core/components/Table/hooks/useTable\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { HvControlsContextProvider } from \"./context/ControlsContext\";\nimport { staticClasses, useClasses } from \"./Controls.styles\";\n\nexport { staticClasses as controlsClasses };\n\nexport type HvControlsClasses = ExtractNames<typeof useClasses>;\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: MouseEvent<HTMLButtonElement>, 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 = (props: HvControlsProps) => {\n  const {\n    id,\n    className,\n    classes: classesProp,\n    views,\n    callbacks,\n    selectedView,\n    defaultView,\n    children,\n    hideViewSwitcher = false,\n    onViewChange,\n  } = useDefaultProps(\"HvControls\", props);\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [currentView, setCurrentView] = useControlled(\n    selectedView,\n    defaultView\n  );\n\n  const onViewChangeHandler = (\n    evt: MouseEvent<HTMLButtonElement>,\n    btnId: any\n  ) => {\n    setCurrentView(btnId);\n    onViewChange?.(evt, btnId);\n  };\n\n  const onSearchHandler = (value: any) => callbacks?.setGlobalFilter?.(value);\n  const onSortHandler = (value: any) =>\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    <div id={id} className={cx(classes.root, className)}>\n      <HvControlsContextProvider\n        value={{\n          onSearch: onSearchHandler,\n          onSort: onSortHandler,\n        }}\n      >\n        <div className={cx(classes.section, classes.leftSection)}>\n          {leftChildren}\n        </div>\n        <div className={cx(classes.section, classes.rightSection)}>\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        </div>\n      </HvControlsContextProvider>\n    </div>\n  );\n};\n"],"names":["HvControls","props","id","className","classes","classesProp","views","callbacks","selectedView","defaultView","children","hideViewSwitcher","onViewChange","useDefaultProps","cx","useClasses","currentView","setCurrentView","useControlled","onViewChangeHandler","evt","btnId","onSearchHandler","value","setGlobalFilter","onSortHandler","setSortBy","accessor","desc","childrenCount","Children","count","childrenArray","toArray","childrenIndexCut","Math","round","leftChildren","slice","rightChildren","root","onSearch","onSort","section","leftSection","rightSection","length","setId","map","icon","others"],"mappings":";;;;;;;;;;AA2DaA,MAAAA,aAAaA,CAACC,UAA2B;AAC9C,QAAA;AAAA,IACJC;AAAAA,IACAC;AAAAA,IACAC,SAASC;AAAAA,IACTC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC;AAAAA,IACAC,mBAAmB;AAAA,IACnBC;AAAAA,EAAAA,IACEC,gBAAgB,cAAcZ,KAAK;AAEjC,QAAA;AAAA,IAAEG;AAAAA,IAASU;AAAAA,EAAAA,IAAOC,WAAWV,WAAW;AAE9C,QAAM,CAACW,aAAaC,cAAc,IAAIC,cACpCV,cACAC,WACF;AAEMU,QAAAA,sBAAsBA,CAC1BC,KACAC,UACG;AACHJ,mBAAeI,KAAK;AACpBT,mBAAeQ,KAAKC,KAAK;AAAA,EAAA;AAG3B,QAAMC,kBAAkBA,CAACC,UAAehB,WAAWiB,kBAAkBD,KAAK;AAC1E,QAAME,gBAAgBA,CAACF,UACrBhB,WAAWmB,YAAY,CACrB;AAAA,IACExB,IAAIqB,OAAOI;AAAAA,IACXC,MAAML,OAAOK;AAAAA,EACd,CAAA,CACF;AAEGC,QAAAA,gBAAgBC,SAASC,MAAMrB,QAAQ;AACvCsB,QAAAA,gBAAgBF,SAASG,QAAQvB,QAAQ;AAE/C,QAAMwB,mBACJL,gBAAgB,IAAIM,KAAKC,MAAMP,gBAAgB,GAAG,IAAI;AACxD,QAAMQ,eAAeL,cAAcM,MAAM,GAAGJ,gBAAgB;AAC5D,QAAMK,gBAAgBP,cAAcM,MAClCJ,kBACAL,iBAAiB,CACnB;AAGE,SAAA,oBAAC,OAAI,EAAA,IAAQ,WAAWf,GAAGV,QAAQoC,MAAMrC,SAAS,GAChD,UAAC,qBAAA,2BAAA,EACC,OAAO;AAAA,IACLsC,UAAUnB;AAAAA,IACVoB,QAAQjB;AAAAA,EAGV,GAAA,UAAA;AAAA,IAAC,oBAAA,OAAA,EAAI,WAAWX,GAAGV,QAAQuC,SAASvC,QAAQwC,WAAW,GACpDP,UACH,aAAA,CAAA;AAAA,IACA,qBAAC,SAAI,WAAWvB,GAAGV,QAAQuC,SAASvC,QAAQyC,YAAY,GACrDN,UAAAA;AAAAA,MAAAA;AAAAA,MACAjC,SAAS,CAACK,oBAAoBL,OAAOwC,SAAS,KAC7C,oBAAC,eAAc,EAAA,IAAIC,MAAM7C,IAAI,mBAAmB,GAC7CI,UAAAA,MAAM0C,IAAI,CAAC;AAAA,QAAE9C,IAAImB;AAAAA,QAAO4B;AAAAA,QAAM,GAAGC;AAAAA,MAAO,0BACtC,UACC,EAAA,IAAI7B,OAEJ,MAAI,MACJ,UAAUL,gBAAgBK,OAC1B,SAAUD,CAAQD,QAAAA,oBAAoBC,KAAKC,KAAK,GAChD,GAAI6B,QAEHD,UAAAA,KAAAA,GANI5B,KAOP,CACD,GACH;AAAA,IAAA,GAEJ;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ;"}

package/dist/esm/components/Controls/LeftControl/LeftControl.js

@@ -24,8 +24,8 @@ const HvLeftControl = ({
     onSearch: onSearchHandler
   } = useContext(HvControlsContext);
   const onChangeFilter = (e, value) => {
-    onSearch == null ? void 0 : onSearch(e, value);
-    onSearchHandler == null ? void 0 : onSearchHandler(value);
+    onSearch?.(e, value);
+    onSearchHandler?.(value);
   };
   return /* @__PURE__ */ jsxs("div", { id, className: cx(classes.root, className), ...others, children: [
     !hideSearch && /* @__PURE__ */ jsx(HvInput, { id: setId(id, "search-input"), type: "search", placeholder, onChange: onChangeFilter, ...searchProps }),

package/dist/esm/components/Controls/LeftControl/LeftControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"LeftControl.js","sources":["../../../../../src/components/Controls/LeftControl/LeftControl.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses, staticClasses } from \"./LeftControl.styles\";\nimport { HvControlsContext } from \"../context/ControlsContext\";\n\nexport { staticClasses as leftControlClasses };\n\nexport type HvLeftControlClasses = ExtractNames<typeof useClasses>;\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 | HTMLTextAreaElement>,\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: classesProp,\n  className,\n  children,\n  placeholder = \"Search\",\n  onSearch,\n  hideSearch = false,\n  searchProps,\n  ...others\n}: HvLeftControlProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { onSearch: onSearchHandler } = useContext(HvControlsContext);\n\n  const onChangeFilter: HvInputProps[\"onChange\"] = (e, value) => {\n    onSearch?.(e, value);\n    onSearchHandler?.(value);\n  };\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      {!hideSearch && (\n        <HvInput\n          id={setId(id, \"search-input\")}\n          type=\"search\"\n          placeholder={placeholder}\n          onChange={onChangeFilter}\n          {...searchProps}\n        />\n      )}\n      {children}\n    </div>\n  );\n};\n"],"names":["HvLeftControl","id","classes","classesProp","className","children","placeholder","onSearch","hideSearch","searchProps","others","cx","useClasses","onSearchHandler","useContext","HvControlsContext","onChangeFilter","e","value","root","setId"],"mappings":";;;;;;;AA8BO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC,cAAc;AAAA,EACdC;AAAAA,EACAC,aAAa;AAAA,EACbC;AAAAA,EACA,GAAGC;AACe,MAAM;AAClB,QAAA;AAAA,IAAER;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AAExC,QAAA;AAAA,IAAEI,UAAUM;AAAAA,EAAAA,IAAoBC,WAAWC,iBAAiB;AAE5DC,QAAAA,iBAA2CA,CAACC,GAAGC,UAAU;AAC7DX,yCAAWU,GAAGC;AACdL,uDAAkBK;AAAAA,EAAK;AAIvB,SAAA,qBAAC,OAAI,EAAA,IAAQ,WAAWP,GAAGT,QAAQiB,MAAMf,SAAS,GAAOM,GAAAA,QACtD,UAAA;AAAA,IAAA,CAACF,cACA,oBAAC,SACC,EAAA,IAAIY,MAAMnB,IAAI,cAAc,GAC5B,MAAK,UACL,aACA,UAAUe,gBACNP,GAAAA,aAEP;AAAA,IACAJ;AAAAA,EACH,EAAA,CAAA;AAEJ;"}
+{"version":3,"file":"LeftControl.js","sources":["../../../../../src/components/Controls/LeftControl/LeftControl.tsx"],"sourcesContent":["import { useContext } from \"react\";\n\nimport { HvBaseProps } from \"@core/types/generic\";\nimport { setId } from \"@core/utils/setId\";\nimport { HvInput, HvInputProps } from \"@core/components/Input\";\nimport { ExtractNames } from \"@core/utils/classes\";\n\nimport { useClasses, staticClasses } from \"./LeftControl.styles\";\nimport { HvControlsContext } from \"../context/ControlsContext\";\n\nexport { staticClasses as leftControlClasses };\n\nexport type HvLeftControlClasses = ExtractNames<typeof useClasses>;\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 | HTMLTextAreaElement>,\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: classesProp,\n  className,\n  children,\n  placeholder = \"Search\",\n  onSearch,\n  hideSearch = false,\n  searchProps,\n  ...others\n}: HvLeftControlProps) => {\n  const { classes, cx } = useClasses(classesProp);\n\n  const { onSearch: onSearchHandler } = useContext(HvControlsContext);\n\n  const onChangeFilter: HvInputProps[\"onChange\"] = (e, value) => {\n    onSearch?.(e, value);\n    onSearchHandler?.(value);\n  };\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      {!hideSearch && (\n        <HvInput\n          id={setId(id, \"search-input\")}\n          type=\"search\"\n          placeholder={placeholder}\n          onChange={onChangeFilter}\n          {...searchProps}\n        />\n      )}\n      {children}\n    </div>\n  );\n};\n"],"names":["HvLeftControl","id","classes","classesProp","className","children","placeholder","onSearch","hideSearch","searchProps","others","cx","useClasses","onSearchHandler","useContext","HvControlsContext","onChangeFilter","e","value","root","setId"],"mappings":";;;;;;;AA8BO,MAAMA,gBAAgBA,CAAC;AAAA,EAC5BC;AAAAA,EACAC,SAASC;AAAAA,EACTC;AAAAA,EACAC;AAAAA,EACAC,cAAc;AAAA,EACdC;AAAAA,EACAC,aAAa;AAAA,EACbC;AAAAA,EACA,GAAGC;AACe,MAAM;AAClB,QAAA;AAAA,IAAER;AAAAA,IAASS;AAAAA,EAAAA,IAAOC,WAAWT,WAAW;AAExC,QAAA;AAAA,IAAEI,UAAUM;AAAAA,EAAAA,IAAoBC,WAAWC,iBAAiB;AAE5DC,QAAAA,iBAA2CA,CAACC,GAAGC,UAAU;AAC7DX,eAAWU,GAAGC,KAAK;AACnBL,sBAAkBK,KAAK;AAAA,EAAA;AAIvB,SAAA,qBAAC,OAAI,EAAA,IAAQ,WAAWP,GAAGT,QAAQiB,MAAMf,SAAS,GAAOM,GAAAA,QACtD,UAAA;AAAA,IAAA,CAACF,cACA,oBAAC,SACC,EAAA,IAAIY,MAAMnB,IAAI,cAAc,GAC5B,MAAK,UACL,aACA,UAAUe,gBACNP,GAAAA,aAEP;AAAA,IACAJ;AAAAA,EACH,EAAA,CAAA;AAEJ;"}

package/dist/esm/components/Controls/RightControl/RightControl.js

@@ -25,9 +25,9 @@ const HvRightControl = ({
     onSort: onSortHandler
   } = useContext(HvControlsContext);
   const handleChangeSort = (value) => {
-    onSort == null ? void 0 : onSort(value);
-    onSortHandler == null ? void 0 : onSortHandler(value);
-    setDropdownValues((prevValues) => prevValues == null ? void 0 : prevValues.map((prevValue) => ({
+    onSort?.(value);
+    onSortHandler?.(value);
+    setDropdownValues((prevValues) => prevValues?.map((prevValue) => ({
       ...prevValue,
       selected: prevValue.id === value.id
     })));