@hitachivantara/uikit-react-core 5.44.0 → 5.44.2

package/dist/cjs/DatePicker/DatePicker.cjs

@@ -142,10 +142,7 @@ const HvDatePicker = React.forwardRef(
       onClear?.();
     };
     const handleCalendarClose = () => {
-      const shouldSave = !(rangeMode || showActions);
-      if (shouldSave) {
-        handleApply();
-      } else {
+      if (rangeMode || showActions) {
         handleCancel();
       }
     };

package/dist/cjs/DatePicker/DatePicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.cjs","sources":["../../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\n\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { Calendar } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { useSavedState } from \"../utils/useSavedState\";\nimport {\n  isInvalid,\n  HvLabel,\n  HvFormStatus,\n  HvWarningText,\n  HvFormElement,\n  HvInfoMessage,\n  HvFormElementProps,\n} from \"../Forms\";\nimport { isDate } from \"../Calendar/utils\";\nimport { HvCalendar, HvCalendarProps } from \"../Calendar\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvTypography } from \"../Typography\";\nimport { HvActionBar } from \"../ActionBar\";\nimport { HvButton } from \"../Button\";\n\nimport { getDateLabel } from \"./utils\";\nimport useVisibleDate from \"./useVisibleDate\";\nimport { staticClasses, useClasses } from \"./DatePicker.styles\";\n\nexport { staticClasses as datePickerClasses };\n\nexport type HvDatePickerClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  applyLabel: \"Apply\",\n  cancelLabel: \"Cancel\",\n  clearLabel: \"Clear\",\n  invalidLabel: \"Invalid date\",\n};\n\n/** @deprecated use `HvFormStatus` instead */\nexport type HvDatePickerStatus = HvFormStatus;\n\nexport interface HvDatePickerProps\n  extends Omit<HvFormElementProps, \"onChange\">,\n    Pick<\n      HvBaseDropdownProps,\n      | \"disablePortal\"\n      | \"expanded\"\n      | \"defaultExpanded\"\n      | \"onToggle\"\n      | \"placeholder\"\n    > {\n  /**\n   * Identifies the element that provides an error message for the date picker.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (date?: Date, endDate?: Date) => void;\n  /**\n   * The callback fired when user clicks on cancel.\n   */\n  onCancel?: () => void;\n  /**\n   * The callback fired when user clicks on clear.\n   */\n  onClear?: () => void;\n  /**\n   * An object containing all the labels for the datepicker.\n   */\n  labels?: {\n    /**\n     * Apply button label.\n     */\n    applyLabel?: string;\n    /**\n     * Cancel button label.\n     */\n    cancelLabel?: string;\n    /**\n     * Clear button label.\n     */\n    clearLabel?: string;\n    /**\n     * Invalid Date label.\n     */\n    invalidDateLabel?: string;\n  };\n  /**\n   * The initial value of the input when in single calendar mode.\n   */\n  value?: Date;\n  /**\n   * The initial value for the start date when in range mode.\n   */\n  startValue?: Date;\n  /**\n   * The initial value for the end date when in range mode.\n   */\n  endValue?: Date;\n  /**\n   * Flag informing if the the component should be in range mode or in single mode.\n   */\n  // TODO: remove this in favour of discriminated union\n  rangeMode?: boolean;\n  /**\n   * The placement where the calendar should be placed according to the input. Options are `left` or `right`.\n   * Note this prop only affects the calendar when in `rangeMode`.\n   */\n  horizontalPlacement?: \"left\" | \"right\";\n  /**\n   * The calendar locale. If undefined, it uses calendar default\n   */\n  locale?: string;\n  /**\n   * Controls if actions buttons are visible at the calendar.\n   */\n  showActions?: boolean;\n  /**\n   * Controls if clear button is visible at the calendar,\n   * only works if showing actions or in range mode.\n   */\n  showClear?: boolean;\n  /**\n   * Sets if the calendar container should follow the date picker input out of the screen or stay visible.\n   */\n  escapeWithReference?: boolean;\n  /**\n   * An element placed before the Calendar\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * An object containing props to be passed onto the baseDropdown.\n   */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * Additional props passed to the HvCalendar component.\n   */\n  calendarProps?: Partial<HvCalendarProps>;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDatePickerClasses;\n}\n\n/**\n * A date picker, popup calendar or date range picker is a graphical user\n * interface widget which allows the user to select a date from a calendar.\n */\nexport const HvDatePicker = forwardRef<HTMLDivElement, HvDatePickerProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n\n      required = false,\n      disabled = false,\n      readOnly,\n\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n\n      onChange,\n      onCancel,\n      onClear,\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      placeholder,\n\n      labels: labelsProp,\n\n      value,\n      startValue,\n      endValue,\n\n      expanded,\n      defaultExpanded,\n      onToggle,\n      rangeMode = false,\n      startAdornment,\n      horizontalPlacement = \"right\",\n      locale: localeProp,\n      showActions = false,\n      showClear = false,\n      disablePortal = true,\n      escapeWithReference = true,\n      dropdownProps = {},\n      calendarProps,\n      ...others\n    } = useDefaultProps(\"HvDatePicker\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const elementId = useUniqueId(id, \"hvdatepicker\");\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      \"standBy\"\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const locale = localeProp || \"en-US\";\n\n    const [calendarOpen, setCalendarOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\n\n    const [startDate, setStartDate, rollbackStartDate] = useSavedState(\n      rangeMode ? startValue : value\n    );\n    const [endDate, setEndDate, rollbackEndDate] = useSavedState(endValue);\n\n    const [visibleDate, dispatchAction] = useVisibleDate(startDate, endDate);\n\n    const focusTarget = useRef<HTMLDivElement>(null);\n\n    const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    useEffect(() => {\n      setStartDate(rangeMode ? startValue : value, true);\n      setEndDate(endValue, true);\n    }, [value, startValue, endValue, rangeMode, setStartDate, setEndDate]);\n\n    const endDateIsSet = useRef(false);\n    endDateIsSet.current = endDate != null;\n\n    useEffect(() => {\n      if (startDate != null) {\n        dispatchAction({\n          type: \"month_year\",\n          target: endDateIsSet.current ? \"left\" : \"best\",\n          year: startDate.getFullYear(),\n          month: startDate.getMonth() + 1,\n        });\n      }\n    }, [dispatchAction, startDate]);\n\n    useEffect(() => {\n      if (endDate != null) {\n        dispatchAction({\n          type: \"month_year\",\n          target: \"right\",\n          year: endDate.getFullYear(),\n          month: endDate.getMonth() + 1,\n        });\n      }\n    }, [dispatchAction, endDate]);\n\n    /**\n     * Handles the `Apply` action. Both single and ranged modes are handled here.\n     */\n    const handleApply = () => {\n      setStartDate(startDate, true);\n      setEndDate(endDate ?? startDate, true);\n\n      onChange?.(startDate, endDate);\n\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (\n          required &&\n          (!isDate(startDate) || (rangeMode && !isDate(endDate)))\n        ) {\n          return \"invalid\";\n        }\n\n        return \"valid\";\n      });\n\n      setCalendarOpen(false);\n    };\n\n    /**\n     * Handles the `Cancel` action. Both single and ranged modes are handled here.\n     */\n    const handleCancel = () => {\n      rollbackStartDate();\n      rollbackEndDate();\n\n      onCancel?.();\n\n      setCalendarOpen(false);\n    };\n\n    /**\n     * Handles the `Cancel` action. Both single and ranged modes are handled here.\n     */\n    const handleClear = () => {\n      setStartDate(undefined, false);\n      setEndDate(undefined, false);\n      onClear?.();\n    };\n\n    const handleCalendarClose = () => {\n      const shouldSave = !(rangeMode || showActions);\n      if (shouldSave) {\n        handleApply();\n      } else {\n        handleCancel();\n      }\n    };\n\n    const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (evt, open) => {\n      /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n      if (evt === null) return;\n      onToggle?.(evt, open);\n      setCalendarOpen(open);\n      if (!open) handleCalendarClose();\n    };\n\n    const focusOnContainer = () => {\n      focusTarget.current?.focus();\n    };\n\n    const handleDateChange: HvCalendarProps[\"onChange\"] = (event, newDate) => {\n      if (!isDate(newDate)) return;\n\n      const autoSave = !showActions && !rangeMode;\n\n      if (rangeMode) {\n        if (!startDate || (startDate && endDate) || newDate < startDate) {\n          setStartDate(newDate);\n          setEndDate(undefined);\n        } else {\n          setEndDate(newDate);\n        }\n      } else {\n        setStartDate(newDate, autoSave);\n      }\n\n      if (autoSave) {\n        onChange?.(newDate);\n\n        setValidationState(() => {\n          // this will only run if status is uncontrolled\n          if (required && !isDate(newDate)) {\n            return \"invalid\";\n          }\n\n          return \"valid\";\n        });\n\n        setCalendarOpen(false);\n      }\n    };\n\n    const handleInputDateChange: HvCalendarProps[\"onInputChange\"] = (\n      event,\n      newDate,\n      position\n    ) => {\n      if (!isDate(newDate)) return;\n\n      if (!rangeMode) {\n        handleDateChange(event as any, newDate);\n        return;\n      }\n\n      if (position === \"left\") {\n        if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n      } else if (position === \"right\") {\n        if (!startDate) {\n          if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n          return;\n        }\n        setEndDate(newDate < startDate ? startDate : newDate);\n      }\n    };\n\n    /**\n     * Renders the container for the action elements.\n     */\n    const renderActions = () => (\n      <HvActionBar className={cx({ [classes.actionContainer]: showClear })}>\n        {showClear && (\n          <div className={classes.leftContainer}>\n            <HvButton\n              id={setId(id, \"action\", \"clear\")}\n              className={classes.action}\n              variant=\"primaryGhost\"\n              onClick={handleClear}\n            >\n              {labels?.clearLabel}\n            </HvButton>\n          </div>\n        )}\n        <div className={classes.rightContainer}>\n          <HvButton\n            id={setId(id, \"action\", \"apply\")}\n            className={classes.action}\n            variant=\"primaryGhost\"\n            onClick={handleApply}\n          >\n            {labels?.applyLabel}\n          </HvButton>\n          <HvButton\n            id={setId(id, \"action\", \"cancel\")}\n            className={classes.action}\n            variant=\"primaryGhost\"\n            onClick={handleCancel}\n          >\n            {labels?.cancelLabel}\n          </HvButton>\n        </div>\n      </HvActionBar>\n    );\n\n    const renderInput = (dateString: string) => {\n      return (\n        <HvTypography\n          className={cx(classes.inputText, { [classes.dateText]: dateString })}\n          variant=\"label\"\n        >\n          {dateString || placeholder || \"\"}\n        </HvTypography>\n      );\n    };\n    const dateValue = rangeMode ? { startDate, endDate } : startDate;\n\n    const hasLabel = label != null;\n    const hasDescription = description != null;\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 isStateInvalid = isInvalid(validationState);\n\n    let errorMessageId;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        value={dateValue}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n        readOnly={readOnly}\n        {...others}\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={dropdownForkedRef}\n          role=\"combobox\"\n          classes={{\n            root: classes.dropdown,\n            panel: classes.panel,\n            header: cx({ [classes.dropdownHeaderInvalid]: isStateInvalid }),\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          readOnly={readOnly}\n          disabled={disabled}\n          disablePortal={disablePortal}\n          variableWidth\n          placement={horizontalPlacement}\n          expanded={calendarOpen}\n          onToggle={handleToggle}\n          onClickOutside={handleCalendarClose}\n          onContainerCreation={focusOnContainer}\n          placeholder={renderInput(getDateLabel(dateValue, rangeMode, locale))}\n          adornment={\n            <Calendar\n              className={classes.icon}\n              color={disabled ? \"secondary_80\" : undefined}\n            />\n          }\n          popperProps={{\n            modifiers: [\n              { name: \"preventOverflow\", enabled: escapeWithReference },\n            ],\n          }}\n          aria-haspopup=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={\n            [label && setId(elementId, \"label\"), ariaLabelledBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          aria-invalid={isStateInvalid ? true : undefined}\n          aria-errormessage={errorMessageId}\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          {...otherDropdownProps}\n        >\n          <div ref={focusTarget} tabIndex={-1} />\n          <HvCalendar\n            id={setId(id, \"calendar\")}\n            startAdornment={startAdornment}\n            onChange={handleDateChange}\n            onInputChange={handleInputDateChange}\n            onVisibleDateChange={(_event, type, month, target) => {\n              dispatchAction({ type, target, month });\n            }}\n            locale={locale}\n            {...visibleDate}\n            {...calendarProps}\n            invalidDateLabel={labels?.invalidDateLabel}\n          />\n          {(rangeMode || showActions) && renderActions()}\n        </HvBaseDropdown>\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={cx(classes.error)}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["forwardRef","useDefaultProps","useClasses","useLabels","useUniqueId","useControlled","useSavedState","useVisibleDate","useRef","useForkRef","useEffect","isDate","jsxs","HvActionBar","jsx","HvButton","setId","HvTypography","isInvalid","HvFormElement","HvLabel","HvInfoMessage","HvBaseDropdown","getDateLabel","Calendar","HvCalendar","HvWarningText"],"mappings":"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"}
+{"version":3,"file":"DatePicker.cjs","sources":["../../../src/DatePicker/DatePicker.tsx"],"sourcesContent":["import { forwardRef, useEffect, useRef } from \"react\";\n\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport { Calendar } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useLabels } from \"../hooks/useLabels\";\nimport { ExtractNames } from \"../utils/classes\";\nimport { setId } from \"../utils/setId\";\nimport { useSavedState } from \"../utils/useSavedState\";\nimport {\n  isInvalid,\n  HvLabel,\n  HvFormStatus,\n  HvWarningText,\n  HvFormElement,\n  HvInfoMessage,\n  HvFormElementProps,\n} from \"../Forms\";\nimport { isDate } from \"../Calendar/utils\";\nimport { HvCalendar, HvCalendarProps } from \"../Calendar\";\nimport { HvBaseDropdown, HvBaseDropdownProps } from \"../BaseDropdown\";\nimport { HvTypography } from \"../Typography\";\nimport { HvActionBar } from \"../ActionBar\";\nimport { HvButton } from \"../Button\";\n\nimport { getDateLabel } from \"./utils\";\nimport useVisibleDate from \"./useVisibleDate\";\nimport { staticClasses, useClasses } from \"./DatePicker.styles\";\n\nexport { staticClasses as datePickerClasses };\n\nexport type HvDatePickerClasses = ExtractNames<typeof useClasses>;\n\nconst DEFAULT_LABELS = {\n  applyLabel: \"Apply\",\n  cancelLabel: \"Cancel\",\n  clearLabel: \"Clear\",\n  invalidLabel: \"Invalid date\",\n};\n\n/** @deprecated use `HvFormStatus` instead */\nexport type HvDatePickerStatus = HvFormStatus;\n\nexport interface HvDatePickerProps\n  extends Omit<HvFormElementProps, \"onChange\">,\n    Pick<\n      HvBaseDropdownProps,\n      | \"disablePortal\"\n      | \"expanded\"\n      | \"defaultExpanded\"\n      | \"onToggle\"\n      | \"placeholder\"\n    > {\n  /**\n   * Identifies the element that provides an error message for the date picker.\n   *\n   * Will only be used when the validation status is invalid.\n   */\n  \"aria-errormessage\"?: string;\n  /**\n   * The callback fired when the value changes.\n   */\n  onChange?: (date?: Date, endDate?: Date) => void;\n  /**\n   * The callback fired when user clicks on cancel.\n   */\n  onCancel?: () => void;\n  /**\n   * The callback fired when user clicks on clear.\n   */\n  onClear?: () => void;\n  /**\n   * An object containing all the labels for the datepicker.\n   */\n  labels?: {\n    /**\n     * Apply button label.\n     */\n    applyLabel?: string;\n    /**\n     * Cancel button label.\n     */\n    cancelLabel?: string;\n    /**\n     * Clear button label.\n     */\n    clearLabel?: string;\n    /**\n     * Invalid Date label.\n     */\n    invalidDateLabel?: string;\n  };\n  /**\n   * The initial value of the input when in single calendar mode.\n   */\n  value?: Date;\n  /**\n   * The initial value for the start date when in range mode.\n   */\n  startValue?: Date;\n  /**\n   * The initial value for the end date when in range mode.\n   */\n  endValue?: Date;\n  /**\n   * Flag informing if the the component should be in range mode or in single mode.\n   */\n  // TODO: remove this in favour of discriminated union\n  rangeMode?: boolean;\n  /**\n   * The placement where the calendar should be placed according to the input. Options are `left` or `right`.\n   * Note this prop only affects the calendar when in `rangeMode`.\n   */\n  horizontalPlacement?: \"left\" | \"right\";\n  /**\n   * The calendar locale. If undefined, it uses calendar default\n   */\n  locale?: string;\n  /**\n   * Controls if actions buttons are visible at the calendar.\n   */\n  showActions?: boolean;\n  /**\n   * Controls if clear button is visible at the calendar,\n   * only works if showing actions or in range mode.\n   */\n  showClear?: boolean;\n  /**\n   * Sets if the calendar container should follow the date picker input out of the screen or stay visible.\n   */\n  escapeWithReference?: boolean;\n  /**\n   * An element placed before the Calendar\n   */\n  startAdornment?: React.ReactNode;\n  /**\n   * An object containing props to be passed onto the baseDropdown.\n   */\n  dropdownProps?: Partial<HvBaseDropdownProps>;\n  /**\n   * Additional props passed to the HvCalendar component.\n   */\n  calendarProps?: Partial<HvCalendarProps>;\n  /**\n   * A Jss Object used to override or extend the component styles applied.\n   */\n  classes?: HvDatePickerClasses;\n}\n\n/**\n * A date picker, popup calendar or date range picker is a graphical user\n * interface widget which allows the user to select a date from a calendar.\n */\nexport const HvDatePicker = forwardRef<HTMLDivElement, HvDatePickerProps>(\n  (props, ref) => {\n    const {\n      classes: classesProp,\n      className,\n\n      id,\n      name,\n\n      required = false,\n      disabled = false,\n      readOnly,\n\n      label,\n      \"aria-label\": ariaLabel,\n      \"aria-labelledby\": ariaLabelledBy,\n      description,\n      \"aria-describedby\": ariaDescribedBy,\n\n      onChange,\n      onCancel,\n      onClear,\n      status,\n      statusMessage,\n      \"aria-errormessage\": ariaErrorMessage,\n\n      placeholder,\n\n      labels: labelsProp,\n\n      value,\n      startValue,\n      endValue,\n\n      expanded,\n      defaultExpanded,\n      onToggle,\n      rangeMode = false,\n      startAdornment,\n      horizontalPlacement = \"right\",\n      locale: localeProp,\n      showActions = false,\n      showClear = false,\n      disablePortal = true,\n      escapeWithReference = true,\n      dropdownProps = {},\n      calendarProps,\n      ...others\n    } = useDefaultProps(\"HvDatePicker\", props);\n\n    const { classes, cx } = useClasses(classesProp);\n    const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n    const elementId = useUniqueId(id, \"hvdatepicker\");\n\n    const [validationState, setValidationState] = useControlled(\n      status,\n      \"standBy\"\n    );\n\n    const [validationMessage] = useControlled(statusMessage, \"Required\");\n\n    const locale = localeProp || \"en-US\";\n\n    const [calendarOpen, setCalendarOpen] = useControlled(\n      expanded,\n      Boolean(defaultExpanded)\n    );\n\n    const [startDate, setStartDate, rollbackStartDate] = useSavedState(\n      rangeMode ? startValue : value\n    );\n    const [endDate, setEndDate, rollbackEndDate] = useSavedState(endValue);\n\n    const [visibleDate, dispatchAction] = useVisibleDate(startDate, endDate);\n\n    const focusTarget = useRef<HTMLDivElement>(null);\n\n    const { ref: refProp, ...otherDropdownProps } = dropdownProps;\n    const dropdownForkedRef = useForkRef(ref, refProp);\n\n    useEffect(() => {\n      setStartDate(rangeMode ? startValue : value, true);\n      setEndDate(endValue, true);\n    }, [value, startValue, endValue, rangeMode, setStartDate, setEndDate]);\n\n    const endDateIsSet = useRef(false);\n    endDateIsSet.current = endDate != null;\n\n    useEffect(() => {\n      if (startDate != null) {\n        dispatchAction({\n          type: \"month_year\",\n          target: endDateIsSet.current ? \"left\" : \"best\",\n          year: startDate.getFullYear(),\n          month: startDate.getMonth() + 1,\n        });\n      }\n    }, [dispatchAction, startDate]);\n\n    useEffect(() => {\n      if (endDate != null) {\n        dispatchAction({\n          type: \"month_year\",\n          target: \"right\",\n          year: endDate.getFullYear(),\n          month: endDate.getMonth() + 1,\n        });\n      }\n    }, [dispatchAction, endDate]);\n\n    /**\n     * Handles the `Apply` action. Both single and ranged modes are handled here.\n     */\n    const handleApply = () => {\n      setStartDate(startDate, true);\n      setEndDate(endDate ?? startDate, true);\n\n      onChange?.(startDate, endDate);\n\n      setValidationState(() => {\n        // this will only run if status is uncontrolled\n        if (\n          required &&\n          (!isDate(startDate) || (rangeMode && !isDate(endDate)))\n        ) {\n          return \"invalid\";\n        }\n\n        return \"valid\";\n      });\n\n      setCalendarOpen(false);\n    };\n\n    /**\n     * Handles the `Cancel` action. Both single and ranged modes are handled here.\n     */\n    const handleCancel = () => {\n      rollbackStartDate();\n      rollbackEndDate();\n\n      onCancel?.();\n\n      setCalendarOpen(false);\n    };\n\n    /**\n     * Handles the `Cancel` action. Both single and ranged modes are handled here.\n     */\n    const handleClear = () => {\n      setStartDate(undefined, false);\n      setEndDate(undefined, false);\n      onClear?.();\n    };\n\n    const handleCalendarClose = () => {\n      if (rangeMode || showActions) {\n        handleCancel();\n      }\n    };\n\n    const handleToggle: HvBaseDropdownProps[\"onToggle\"] = (evt, open) => {\n      /* \n     If evt is null this toggle wasn't triggered by the user.\n     instead it was triggered by the baseDropdown useEffect after\n     the datepicker changed the expanded value this baseDropdown behavior needs a review\n    */\n      if (evt === null) return;\n      onToggle?.(evt, open);\n      setCalendarOpen(open);\n      if (!open) handleCalendarClose();\n    };\n\n    const focusOnContainer = () => {\n      focusTarget.current?.focus();\n    };\n\n    const handleDateChange: HvCalendarProps[\"onChange\"] = (event, newDate) => {\n      if (!isDate(newDate)) return;\n\n      const autoSave = !showActions && !rangeMode;\n\n      if (rangeMode) {\n        if (!startDate || (startDate && endDate) || newDate < startDate) {\n          setStartDate(newDate);\n          setEndDate(undefined);\n        } else {\n          setEndDate(newDate);\n        }\n      } else {\n        setStartDate(newDate, autoSave);\n      }\n\n      if (autoSave) {\n        onChange?.(newDate);\n\n        setValidationState(() => {\n          // this will only run if status is uncontrolled\n          if (required && !isDate(newDate)) {\n            return \"invalid\";\n          }\n\n          return \"valid\";\n        });\n\n        setCalendarOpen(false);\n      }\n    };\n\n    const handleInputDateChange: HvCalendarProps[\"onInputChange\"] = (\n      event,\n      newDate,\n      position\n    ) => {\n      if (!isDate(newDate)) return;\n\n      if (!rangeMode) {\n        handleDateChange(event as any, newDate);\n        return;\n      }\n\n      if (position === \"left\") {\n        if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n      } else if (position === \"right\") {\n        if (!startDate) {\n          if (endDate) setStartDate(newDate > endDate ? endDate : newDate);\n          return;\n        }\n        setEndDate(newDate < startDate ? startDate : newDate);\n      }\n    };\n\n    /**\n     * Renders the container for the action elements.\n     */\n    const renderActions = () => (\n      <HvActionBar className={cx({ [classes.actionContainer]: showClear })}>\n        {showClear && (\n          <div className={classes.leftContainer}>\n            <HvButton\n              id={setId(id, \"action\", \"clear\")}\n              className={classes.action}\n              variant=\"primaryGhost\"\n              onClick={handleClear}\n            >\n              {labels?.clearLabel}\n            </HvButton>\n          </div>\n        )}\n        <div className={classes.rightContainer}>\n          <HvButton\n            id={setId(id, \"action\", \"apply\")}\n            className={classes.action}\n            variant=\"primaryGhost\"\n            onClick={handleApply}\n          >\n            {labels?.applyLabel}\n          </HvButton>\n          <HvButton\n            id={setId(id, \"action\", \"cancel\")}\n            className={classes.action}\n            variant=\"primaryGhost\"\n            onClick={handleCancel}\n          >\n            {labels?.cancelLabel}\n          </HvButton>\n        </div>\n      </HvActionBar>\n    );\n\n    const renderInput = (dateString: string) => {\n      return (\n        <HvTypography\n          className={cx(classes.inputText, { [classes.dateText]: dateString })}\n          variant=\"label\"\n        >\n          {dateString || placeholder || \"\"}\n        </HvTypography>\n      );\n    };\n    const dateValue = rangeMode ? { startDate, endDate } : startDate;\n\n    const hasLabel = label != null;\n    const hasDescription = description != null;\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 isStateInvalid = isInvalid(validationState);\n\n    let errorMessageId;\n    if (isStateInvalid) {\n      errorMessageId = canShowError\n        ? setId(elementId, \"error\")\n        : ariaErrorMessage;\n    }\n\n    return (\n      <HvFormElement\n        id={id}\n        name={name}\n        value={dateValue}\n        status={validationState}\n        disabled={disabled}\n        required={required}\n        className={cx(classes.root, className)}\n        readOnly={readOnly}\n        {...others}\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={dropdownForkedRef}\n          role=\"combobox\"\n          classes={{\n            root: classes.dropdown,\n            panel: classes.panel,\n            header: cx({ [classes.dropdownHeaderInvalid]: isStateInvalid }),\n            headerOpen: classes.dropdownHeaderOpen,\n          }}\n          readOnly={readOnly}\n          disabled={disabled}\n          disablePortal={disablePortal}\n          variableWidth\n          placement={horizontalPlacement}\n          expanded={calendarOpen}\n          onToggle={handleToggle}\n          onClickOutside={handleCalendarClose}\n          onContainerCreation={focusOnContainer}\n          placeholder={renderInput(getDateLabel(dateValue, rangeMode, locale))}\n          adornment={\n            <Calendar\n              className={classes.icon}\n              color={disabled ? \"secondary_80\" : undefined}\n            />\n          }\n          popperProps={{\n            modifiers: [\n              { name: \"preventOverflow\", enabled: escapeWithReference },\n            ],\n          }}\n          aria-haspopup=\"dialog\"\n          aria-label={ariaLabel}\n          aria-labelledby={\n            [label && setId(elementId, \"label\"), ariaLabelledBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          aria-invalid={isStateInvalid ? true : undefined}\n          aria-errormessage={errorMessageId}\n          aria-describedby={\n            [description && setId(elementId, \"description\"), ariaDescribedBy]\n              .join(\" \")\n              .trim() || undefined\n          }\n          {...otherDropdownProps}\n        >\n          <div ref={focusTarget} tabIndex={-1} />\n          <HvCalendar\n            id={setId(id, \"calendar\")}\n            startAdornment={startAdornment}\n            onChange={handleDateChange}\n            onInputChange={handleInputDateChange}\n            onVisibleDateChange={(_event, type, month, target) => {\n              dispatchAction({ type, target, month });\n            }}\n            locale={locale}\n            {...visibleDate}\n            {...calendarProps}\n            invalidDateLabel={labels?.invalidDateLabel}\n          />\n          {(rangeMode || showActions) && renderActions()}\n        </HvBaseDropdown>\n        {canShowError && (\n          <HvWarningText\n            id={setId(elementId, \"error\")}\n            disableBorder\n            className={cx(classes.error)}\n          >\n            {validationMessage}\n          </HvWarningText>\n        )}\n      </HvFormElement>\n    );\n  }\n);\n"],"names":["forwardRef","useDefaultProps","useClasses","useLabels","useUniqueId","useControlled","useSavedState","useVisibleDate","useRef","useForkRef","useEffect","isDate","jsxs","HvActionBar","jsx","HvButton","setId","HvTypography","isInvalid","HvFormElement","HvLabel","HvInfoMessage","HvBaseDropdown","getDateLabel","Calendar","HvCalendar","HvWarningText"],"mappings":"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"}

package/dist/cjs/FileUploader/DropZone/DropZone.cjs

@@ -3,7 +3,6 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("@emotion/react/jsx-runtime");
 const React = require("react");
 const uniqueId = require("lodash/uniqueId");
-const accept = require("attr-accept");
 const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
 const setId = require("../../utils/setId.cjs");
 const useUniqueId = require("../../hooks/useUniqueId.cjs");
@@ -15,13 +14,30 @@ const InfoMessage = require("../../Forms/InfoMessage/InfoMessage.cjs");
 const Typography = require("../../Typography/Typography.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const uniqueId__default = /* @__PURE__ */ _interopDefault(uniqueId);
-const accept__default = /* @__PURE__ */ _interopDefault(accept);
+function validateAccept(file, acceptAttr) {
+  if (!file || !acceptAttr)
+    return true;
+  const acceptEntries = acceptAttr.split(",");
+  const fileName = file.name || "";
+  const mimeType = (file.type || "").toLowerCase();
+  const baseMimeType = mimeType.replace(/\/.*$/, "");
+  return acceptEntries.some((type) => {
+    const validType = type.trim().toLowerCase();
+    if (validType.charAt(0) === ".") {
+      return fileName.toLowerCase().endsWith(validType);
+    }
+    if (validType.endsWith("/*")) {
+      return baseMimeType === validType.replace(/\/.*$/, "");
+    }
+    return mimeType === validType;
+  });
+}
 const HvDropZone = (props) => {
   const {
     id: idProp,
     classes: classesProp,
     labels,
-    acceptedFiles,
+    accept,
     maxFileSize,
     inputProps,
     hideLabels,
@@ -31,22 +47,29 @@ const HvDropZone = (props) => {
   } = useDefaultProps.useDefaultProps("HvDropZone", props);
   const id = useUniqueId.useUniqueId(idProp, "dropzone");
   const { classes, cx } = DropZone_styles.useClasses(classesProp);
-  const [dragState, setDrag] = React.useState(false);
+  const [dragState, setDragState] = React.useState(false);
   const inputRef = React.useRef(null);
-  const leaveDropArea = () => {
-    setDrag(false);
+  const handleDragLeave = () => {
+    setDragState(false);
   };
-  const enterDropArea = () => {
-    setDrag(true);
+  const handleDragEnter = (event) => {
+    if (disabled)
+      return;
+    event.stopPropagation();
+    event.preventDefault();
+    setDragState(true);
   };
   const onChangeHandler = (filesList) => {
     const filesToProcess = Object.values(filesList);
     const newFiles = filesToProcess.map((file) => {
-      const newFile = file;
+      const newFile = new File([file], file.name, {
+        type: file.type,
+        lastModified: file.lastModified
+      });
+      newFile.id = uniqueId__default.default("uploaded-file-data-");
       const isSizeAllowed = file.size <= maxFileSize;
-      const isFileAccepted = !acceptedFiles.length || acceptedFiles.indexOf(file.type.split("/")[1]) > -1 || acceptedFiles.some(
-        (acceptExtension) => accept__default.default({ name: file.name, type: file.type }, acceptExtension)
-      );
+      const isFileAccepted = !accept || accept.includes(file.type?.split("/")[1]) || // TODO: remove in v6
+      validateAccept(file, accept);
       if (!isFileAccepted) {
         newFile.errorMessage = labels?.fileTypeError;
         newFile.status = "fail";
@@ -54,7 +77,6 @@ const HvDropZone = (props) => {
         newFile.errorMessage = labels?.fileSizeError;
         newFile.status = "fail";
       }
-      newFile.id = uniqueId__default.default("uploaded-file-data-");
       return newFile;
     });
     onFilesAdded?.(newFiles);
@@ -72,8 +94,7 @@ const HvDropZone = (props) => {
       ),
       /* @__PURE__ */ jsxRuntime.jsxs(InfoMessage.HvInfoMessage, { id: setId.setId(id, "description"), children: [
         Number.isInteger(maxFileSize) && `${labels?.sizeWarning} ${utils.convertUnits(maxFileSize)}`,
-        labels?.acceptedFiles && labels.acceptedFiles,
-        !labels?.acceptedFiles && acceptedFiles.length > 0 && ` (${acceptedFiles.join(", ")})`
+        labels?.acceptedFiles ? labels.acceptedFiles : accept && ` (${accept?.replaceAll(",", ", ")})`
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -104,34 +125,22 @@ const HvDropZone = (props) => {
                   onChangeHandler(inputRef.current.files);
                 }
               },
-              onDragEnter: (event) => {
-                if (!disabled) {
-                  enterDropArea();
-                  event.stopPropagation();
-                  event.preventDefault();
-                }
-              },
-              onDragLeave: leaveDropArea,
-              onDropCapture: leaveDropArea,
-              onDragOver: (event) => {
-                if (!disabled) {
-                  enterDropArea();
+              onDragEnter: handleDragEnter,
+              onDragOver: handleDragEnter,
+              onDragLeave: handleDragLeave,
+              onDropCapture: handleDragLeave,
+              onDrop: (event) => {
+                if (disabled)
+                  return;
+                const { files } = event.dataTransfer;
+                if (multiple === true || files.length === 1) {
                   event.stopPropagation();
                   event.preventDefault();
-                }
-              },
-              onDrop: (event) => {
-                if (!disabled) {
-                  const { files } = event.dataTransfer;
-                  if (multiple === true || files.length === 1) {
-                    event.stopPropagation();
-                    event.preventDefault();
-                    onChangeHandler(files);
-                  }
+                  onChangeHandler(files);
                 }
               },
               ref: inputRef,
-              accept: acceptedFiles.join(","),
+              accept,
               ...inputProps
             }
           ),

package/dist/cjs/FileUploader/DropZone/DropZone.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropZone.cjs","sources":["../../../../src/FileUploader/DropZone/DropZone.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\n\nimport uniqueId from \"lodash/uniqueId\";\n\nimport accept from \"attr-accept\";\n\nimport { Doc } from \"@hitachivantara/uikit-react-icons\";\n\nimport { setId } from \"../../utils/setId\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\n\nimport { HvTypography } from \"../../Typography\";\nimport { HvInfoMessage, HvLabel } from \"../../Forms\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { convertUnits } from \"../utils\";\nimport { HvFileData, HvFilesAddedEvent } from \"../File\";\n\nimport { staticClasses, useClasses } from \"./DropZone.styles\";\n\nexport { staticClasses as dropZoneClasses };\n\nexport type HvDropZoneClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropZoneLabels {\n  /**\n   * Extensions of the accepted file types\n   */\n  acceptedFiles?: string;\n  /**\n   * Dropzone area label.\n   */\n  dropzone?: string;\n  /**\n   * Size file warning label.\n   */\n  sizeWarning?: string;\n  /**\n   * Size file warning label.\n   */\n  drag?: string;\n  /**\n   * Size file warning label.\n   */\n  selectFiles?: string;\n  /**\n   * Theming sheet used to style components\n   * */\n  dropFiles?: string;\n  /**\n   * Message to display when file size is greater than allowed\n   * */\n  fileSizeError?: string;\n  /**\n   * Message to display when file type is greater than allowed\n   * */\n  fileTypeError?: string;\n}\n\nexport interface HvDropZoneProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * Labels to present in FileUploader.\n   */\n  labels?: HvDropZoneLabels;\n  /**\n   * Whether the Dropzone should accept multiple files at once.\n   */\n  multiple?: boolean;\n  /**\n   * If the input is disabled or not\n   */\n  disabled?: boolean;\n  /**\n   * Files extensions accepted for upload.\n   */\n  acceptedFiles: string[];\n  /**\n   * Max upload size\n   * */\n  maxFileSize: number;\n  /**\n   * Function responsible for processing files added to the drop zone.\n   */\n  onFilesAdded?: HvFilesAddedEvent;\n  /**\n   * Whether the DropZone should hide labels or not.\n   */\n  hideLabels?: boolean;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvDropZoneClasses;\n}\n\nexport const HvDropZone = (props: HvDropZoneProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    labels,\n    acceptedFiles,\n    maxFileSize,\n    inputProps,\n    hideLabels,\n    multiple = true,\n    disabled = false,\n    onFilesAdded,\n  } = useDefaultProps(\"HvDropZone\", props);\n  const id = useUniqueId(idProp, \"dropzone\");\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [dragState, setDrag] = useState<boolean>(false);\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const leaveDropArea = () => {\n    setDrag(false);\n  };\n\n  const enterDropArea = () => {\n    setDrag(true);\n  };\n\n  const onChangeHandler = (filesList: FileList) => {\n    const filesToProcess = Object.values(filesList);\n\n    const newFiles = filesToProcess.map((file) => {\n      const newFile: HvFileData = file;\n\n      const isSizeAllowed = file.size <= maxFileSize;\n      const isFileAccepted =\n        !acceptedFiles.length ||\n        acceptedFiles.indexOf(file.type.split(\"/\")[1]) > -1 ||\n        acceptedFiles.some((acceptExtension) =>\n          accept({ name: file.name, type: file.type }, acceptExtension)\n        );\n\n      if (!isFileAccepted) {\n        newFile.errorMessage = labels?.fileTypeError;\n        newFile.status = \"fail\";\n      } else if (!isSizeAllowed) {\n        newFile.errorMessage = labels?.fileSizeError;\n        newFile.status = \"fail\";\n      }\n\n      newFile.id = uniqueId(\"uploaded-file-data-\");\n      return newFile;\n    });\n\n    onFilesAdded?.(newFiles);\n  };\n\n  return (\n    <>\n      {!hideLabels && (\n        <div id={id} className={classes.dropZoneLabelsGroup}>\n          <HvLabel\n            id={setId(id, \"input-file-label\")}\n            htmlFor={setId(id, \"input-file\")}\n            label={labels?.dropzone}\n            className={classes.dropZoneLabel}\n          />\n          <HvInfoMessage id={setId(id, \"description\")}>\n            {Number.isInteger(maxFileSize) &&\n              `${labels?.sizeWarning} ${convertUnits(maxFileSize)}`}\n            {labels?.acceptedFiles && labels.acceptedFiles}\n            {!labels?.acceptedFiles &&\n              acceptedFiles.length > 0 &&\n              `\\u00A0(${acceptedFiles.join(\", \")})`}\n          </HvInfoMessage>\n        </div>\n      )}\n      <div\n        id={setId(id, \"input-file-container\")}\n        className={cx(classes.dropZoneContainer, {\n          [classes.dragAction]: dragState,\n          [classes.dropZoneContainerDisabled]: disabled,\n        })}\n      >\n        <input\n          id={setId(id, \"input-file\")}\n          className={classes.inputArea}\n          type=\"file\"\n          multiple={multiple}\n          disabled={disabled}\n          title={!disabled ? `${labels?.drag}\\xa0${labels?.selectFiles}` : \"\"}\n          onClick={() => {\n            if (inputRef.current) {\n              inputRef.current.value = \"\";\n            }\n          }}\n          onChange={() => {\n            if (!disabled && inputRef.current?.files) {\n              onChangeHandler(inputRef.current.files);\n            }\n          }}\n          onDragEnter={(event) => {\n            if (!disabled) {\n              enterDropArea();\n              event.stopPropagation();\n              event.preventDefault();\n            }\n          }}\n          onDragLeave={leaveDropArea}\n          onDropCapture={leaveDropArea}\n          onDragOver={(event) => {\n            if (!disabled) {\n              enterDropArea();\n              event.stopPropagation();\n              event.preventDefault();\n            }\n          }}\n          onDrop={(event) => {\n            if (!disabled) {\n              const { files } = event.dataTransfer;\n              if (multiple === true || files.length === 1) {\n                event.stopPropagation();\n                event.preventDefault();\n                onChangeHandler(files);\n              }\n            }\n          }}\n          ref={inputRef}\n          accept={acceptedFiles.join(\",\")}\n          {...inputProps}\n        />\n        <div className={classes?.dropArea}>\n          {dragState ? (\n            <div className={classes.dropZoneAreaLabels}>\n              <HvTypography className={classes.dragText}>\n                {labels?.dropFiles}\n              </HvTypography>\n            </div>\n          ) : (\n            <>\n              <Doc\n                iconSize=\"M\"\n                className={classes.dropZoneAreaIcon}\n                color={disabled ? \"secondary_60\" : \"secondary\"}\n              />\n              <div className={classes.dropZoneAreaLabels}>\n                <HvTypography className={classes.dragText}>\n                  {labels?.drag}\n                  <span\n                    className={classes.selectFilesText}\n                  >{`\\xa0${labels?.selectFiles}`}</span>\n                </HvTypography>\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":["useDefaultProps","useUniqueId","useClasses","useState","useRef","accept","uniqueId","jsxs","Fragment","jsx","HvLabel","setId","HvInfoMessage","convertUnits","HvTypography","Doc"],"mappings":"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"}
+{"version":3,"file":"DropZone.cjs","sources":["../../../../src/FileUploader/DropZone/DropZone.tsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\n\nimport uniqueId from \"lodash/uniqueId\";\n\nimport { Doc } from \"@hitachivantara/uikit-react-icons\";\n\nimport { setId } from \"../../utils/setId\";\nimport { useUniqueId } from \"../../hooks/useUniqueId\";\n\nimport { HvTypography } from \"../../Typography\";\nimport { HvInfoMessage, HvLabel } from \"../../Forms\";\nimport { ExtractNames } from \"../../utils/classes\";\nimport { useDefaultProps } from \"../../hooks/useDefaultProps\";\n\nimport { convertUnits } from \"../utils\";\nimport { HvFileData, HvFilesAddedEvent } from \"../File\";\n\nimport { staticClasses, useClasses } from \"./DropZone.styles\";\n\nexport { staticClasses as dropZoneClasses };\n\nexport type HvDropZoneClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvDropZoneLabels {\n  /**\n   * Extensions of the accepted file types\n   */\n  acceptedFiles?: string;\n  /**\n   * Dropzone area label.\n   */\n  dropzone?: string;\n  /**\n   * Size file warning label.\n   */\n  sizeWarning?: string;\n  /**\n   * Size file warning label.\n   */\n  drag?: string;\n  /**\n   * Size file warning label.\n   */\n  selectFiles?: string;\n  /**\n   * Theming sheet used to style components\n   * */\n  dropFiles?: string;\n  /**\n   * Message to display when file size is greater than allowed\n   * */\n  fileSizeError?: string;\n  /**\n   * Message to display when file type is greater than allowed\n   * */\n  fileTypeError?: string;\n}\n\nexport interface HvDropZoneProps {\n  /**\n   * Id to be applied to the root node.\n   */\n  id?: string;\n  /**\n   * Labels to present in FileUploader.\n   */\n  labels?: HvDropZoneLabels;\n  /**\n   * Whether the Dropzone should accept multiple files at once.\n   */\n  multiple?: boolean;\n  /**\n   * If the input is disabled or not\n   */\n  disabled?: boolean;\n  /**\n   * Files extensions accepted for upload.\n   */\n  accept?: React.InputHTMLAttributes<HTMLInputElement>[\"accept\"];\n  /**\n   * Max upload size\n   * */\n  maxFileSize: number;\n  /**\n   * Function responsible for processing files added to the drop zone.\n   */\n  onFilesAdded?: HvFilesAddedEvent;\n  /**\n   * Whether the DropZone should hide labels or not.\n   */\n  hideLabels?: boolean;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * A Jss Object used to override or extend the styles applied to the component.\n   */\n  classes?: HvDropZoneClasses;\n}\n\n// TODO: remove/review in `v6`: delegate to HTML `accept` and/or add custom validation\nfunction validateAccept(file?: File, acceptAttr?: string) {\n  if (!file || !acceptAttr) return true;\n\n  const acceptEntries = acceptAttr.split(\",\");\n  const fileName = file.name || \"\";\n  const mimeType = (file.type || \"\").toLowerCase();\n  const baseMimeType = mimeType.replace(/\\/.*$/, \"\");\n\n  return acceptEntries.some((type) => {\n    const validType = type.trim().toLowerCase();\n    if (validType.charAt(0) === \".\") {\n      return fileName.toLowerCase().endsWith(validType);\n    }\n    // This is something like a image/* mime type\n    if (validType.endsWith(\"/*\")) {\n      return baseMimeType === validType.replace(/\\/.*$/, \"\");\n    }\n    return mimeType === validType;\n  });\n}\n\nexport const HvDropZone = (props: HvDropZoneProps) => {\n  const {\n    id: idProp,\n    classes: classesProp,\n    labels,\n    accept,\n    maxFileSize,\n    inputProps,\n    hideLabels,\n    multiple = true,\n    disabled = false,\n    onFilesAdded,\n  } = useDefaultProps(\"HvDropZone\", props);\n  const id = useUniqueId(idProp, \"dropzone\");\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [dragState, setDragState] = useState(false);\n\n  const inputRef = useRef<HTMLInputElement | null>(null);\n\n  const handleDragLeave = () => {\n    setDragState(false);\n  };\n\n  const handleDragEnter: React.DragEventHandler = (event) => {\n    if (disabled) return;\n    event.stopPropagation();\n    event.preventDefault();\n    setDragState(true);\n  };\n\n  const onChangeHandler = (filesList: FileList) => {\n    const filesToProcess = Object.values(filesList);\n\n    const newFiles = filesToProcess.map((file) => {\n      const newFile: HvFileData = new File([file], file.name, {\n        type: file.type,\n        lastModified: file.lastModified,\n      });\n      newFile.id = uniqueId(\"uploaded-file-data-\");\n\n      const isSizeAllowed = file.size <= maxFileSize;\n      const isFileAccepted =\n        !accept ||\n        accept.includes(file.type?.split(\"/\")[1]) || // TODO: remove in v6\n        validateAccept(file, accept);\n\n      if (!isFileAccepted) {\n        newFile.errorMessage = labels?.fileTypeError;\n        newFile.status = \"fail\";\n      } else if (!isSizeAllowed) {\n        newFile.errorMessage = labels?.fileSizeError;\n        newFile.status = \"fail\";\n      }\n\n      return newFile;\n    });\n\n    onFilesAdded?.(newFiles);\n  };\n\n  return (\n    <>\n      {!hideLabels && (\n        <div id={id} className={classes.dropZoneLabelsGroup}>\n          <HvLabel\n            id={setId(id, \"input-file-label\")}\n            htmlFor={setId(id, \"input-file\")}\n            label={labels?.dropzone}\n            className={classes.dropZoneLabel}\n          />\n          <HvInfoMessage id={setId(id, \"description\")}>\n            {Number.isInteger(maxFileSize) &&\n              `${labels?.sizeWarning} ${convertUnits(maxFileSize)}`}\n            {labels?.acceptedFiles\n              ? labels.acceptedFiles\n              : accept && `\\u00A0(${accept?.replaceAll(\",\", \", \")})`}\n          </HvInfoMessage>\n        </div>\n      )}\n      <div\n        id={setId(id, \"input-file-container\")}\n        className={cx(classes.dropZoneContainer, {\n          [classes.dragAction]: dragState,\n          [classes.dropZoneContainerDisabled]: disabled,\n        })}\n      >\n        <input\n          id={setId(id, \"input-file\")}\n          className={classes.inputArea}\n          type=\"file\"\n          multiple={multiple}\n          disabled={disabled}\n          title={!disabled ? `${labels?.drag}\\xa0${labels?.selectFiles}` : \"\"}\n          onClick={() => {\n            if (inputRef.current) {\n              inputRef.current.value = \"\";\n            }\n          }}\n          onChange={() => {\n            if (!disabled && inputRef.current?.files) {\n              onChangeHandler(inputRef.current.files);\n            }\n          }}\n          onDragEnter={handleDragEnter}\n          onDragOver={handleDragEnter}\n          onDragLeave={handleDragLeave}\n          onDropCapture={handleDragLeave}\n          onDrop={(event) => {\n            if (disabled) return;\n\n            const { files } = event.dataTransfer;\n            if (multiple === true || files.length === 1) {\n              event.stopPropagation();\n              event.preventDefault();\n              onChangeHandler(files);\n            }\n          }}\n          ref={inputRef}\n          accept={accept}\n          {...inputProps}\n        />\n        <div className={classes?.dropArea}>\n          {dragState ? (\n            <div className={classes.dropZoneAreaLabels}>\n              <HvTypography className={classes.dragText}>\n                {labels?.dropFiles}\n              </HvTypography>\n            </div>\n          ) : (\n            <>\n              <Doc\n                iconSize=\"M\"\n                className={classes.dropZoneAreaIcon}\n                color={disabled ? \"secondary_60\" : \"secondary\"}\n              />\n              <div className={classes.dropZoneAreaLabels}>\n                <HvTypography className={classes.dragText}>\n                  {labels?.drag}\n                  <span\n                    className={classes.selectFilesText}\n                  >{`\\xa0${labels?.selectFiles}`}</span>\n                </HvTypography>\n              </div>\n            </>\n          )}\n        </div>\n      </div>\n    </>\n  );\n};\n"],"names":["useDefaultProps","useUniqueId","useClasses","useState","useRef","uniqueId","jsxs","Fragment","jsx","HvLabel","setId","HvInfoMessage","convertUnits","HvTypography","Doc"],"mappings":"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"}

package/dist/cjs/FileUploader/FileUploader.cjs

@@ -41,7 +41,7 @@ const HvFileUploader = (props) => {
         labels,
         multiple,
         disabled,
-        acceptedFiles,
+        accept: acceptedFiles.join(","),
         maxFileSize,
         onFilesAdded,
         inputProps,

package/dist/cjs/FileUploader/FileUploader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploader.cjs","sources":["../../../src/FileUploader/FileUploader.tsx"],"sourcesContent":["import { useLabels } from \"../hooks/useLabels\";\nimport { setId } from \"../utils/setId\";\nimport { HvBaseProps } from \"../types/generic\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvDropZone, HvDropZoneLabels } from \"./DropZone\";\nimport { HvFileData, HvFileRemovedEvent, HvFilesAddedEvent } from \"./File\";\nimport { HvFileList } from \"./FileList\";\n\nexport interface HvFileUploaderLabels extends HvDropZoneLabels {\n  /**\n   * Value of aria-label to apply to remove file button in FileList\n   * */\n  removeFileButtonLabel?: string;\n}\n\nexport interface HvFileUploaderProps extends HvBaseProps {\n  /**\n   * An object containing all the labels.\n   */\n  labels?: HvFileUploaderLabels;\n  /**\n   * The files to upload.\n   */\n  fileList?: HvFileData[];\n  /**\n   * Whether the Dropzone should accept multiple files at once.\n   */\n  multiple?: boolean;\n  /**\n   * If the input is disabled or not\n   */\n  disabled?: boolean;\n  /**\n   * Max upload size\n   * */\n  maxFileSize?: number;\n  /**\n   * Files extensions accepted for upload.\n   */\n  acceptedFiles?: string[];\n  /**\n   * Callback fired when files are added.\n   */\n  onFilesAdded?: HvFilesAddedEvent;\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Whether the DropZone should hide labels or not.\n   */\n  hideLabels?: boolean;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n}\n\n// TODO: This component needs to adopt the Form element shape and deprecate its way of composing labels\n\nconst DEFAULT_LABELS: HvFileUploaderLabels = {\n  dropzone: \"Label\",\n  sizeWarning: \"Max. file size:\",\n  drag: \"Drop files here or\",\n  selectFiles: \"click to upload\",\n  dropFiles: \"Drop files here\",\n  fileSizeError: \"The file exceeds the maximum upload size\",\n  fileTypeError: \"File type not allowed for upload\",\n  removeFileButtonLabel: \"Remove File\",\n};\n\n/**\n * Lets the user choose one or more files from their device storage. Once chosen,\n * the files can be uploaded to a server or manipulated on the client side.\n *\n * Accepted file types follow the format of the html input accept attribute. Please check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file for more details.\n */\nexport const HvFileUploader = (props: HvFileUploaderProps) => {\n  const {\n    id,\n    className,\n    labels: labelsProp,\n    fileList,\n    multiple = true,\n    disabled = false,\n    hideLabels = false,\n    maxFileSize = Infinity,\n    inputProps = {},\n    acceptedFiles = [],\n    onFilesAdded,\n    onFileRemoved,\n    ...others\n  } = useDefaultProps(\"HvFileUploader\", props);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  return (\n    <div id={id} className={className} {...others}>\n      <HvDropZone\n        id={setId(id, \"dropzone\")}\n        labels={labels}\n        multiple={multiple}\n        disabled={disabled}\n        acceptedFiles={acceptedFiles}\n        maxFileSize={maxFileSize}\n        onFilesAdded={onFilesAdded}\n        inputProps={inputProps}\n        hideLabels={hideLabels}\n      />\n      <HvFileList\n        id={setId(id, \"filelist\")}\n        list={fileList}\n        onFileRemoved={onFileRemoved}\n        removeFileButtonLabel={labels?.removeFileButtonLabel}\n      />\n    </div>\n  );\n};\n"],"names":["useDefaultProps","useLabels","jsxs","jsx","HvDropZone","setId","HvFileList"],"mappings":";;;;;;;;AA8DA,MAAM,iBAAuC;AAAA,EAC3C,UAAU;AAAA,EACV,aAAa;AAAA,EACb,MAAM;AAAA,EACN,aAAa;AAAA,EACb,WAAW;AAAA,EACX,eAAe;AAAA,EACf,eAAe;AAAA,EACf,uBAAuB;AACzB;AAQa,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,cAAc;AAAA,IACd,aAAa,CAAC;AAAA,IACd,gBAAgB,CAAC;AAAA,IACjB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,kBAAkB,KAAK;AACrC,QAAA,SAASC,UAAAA,UAAU,gBAAgB,UAAU;AAEnD,SACGC,2BAAAA,KAAA,OAAA,EAAI,IAAQ,WAAuB,GAAG,QACrC,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,IAAIC,MAAAA,MAAM,IAAI,UAAU;AAAA,QACxB;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,IACAF,2BAAA;AAAA,MAACG,SAAA;AAAA,MAAA;AAAA,QACC,IAAID,MAAAA,MAAM,IAAI,UAAU;AAAA,QACxB,MAAM;AAAA,QACN;AAAA,QACA,uBAAuB,QAAQ;AAAA,MAAA;AAAA,IACjC;AAAA,EACF,EAAA,CAAA;AAEJ;;"}
+{"version":3,"file":"FileUploader.cjs","sources":["../../../src/FileUploader/FileUploader.tsx"],"sourcesContent":["import { useLabels } from \"../hooks/useLabels\";\nimport { setId } from \"../utils/setId\";\nimport { HvBaseProps } from \"../types/generic\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { HvDropZone, HvDropZoneLabels } from \"./DropZone\";\nimport { HvFileData, HvFileRemovedEvent, HvFilesAddedEvent } from \"./File\";\nimport { HvFileList } from \"./FileList\";\n\nexport interface HvFileUploaderLabels extends HvDropZoneLabels {\n  /**\n   * Value of aria-label to apply to remove file button in FileList\n   * */\n  removeFileButtonLabel?: string;\n}\n\nexport interface HvFileUploaderProps extends HvBaseProps {\n  /**\n   * An object containing all the labels.\n   */\n  labels?: HvFileUploaderLabels;\n  /**\n   * The files to upload.\n   */\n  fileList?: HvFileData[];\n  /**\n   * Whether the Dropzone should accept multiple files at once.\n   */\n  multiple?: boolean;\n  /**\n   * If the input is disabled or not\n   */\n  disabled?: boolean;\n  /**\n   * Max upload size\n   * */\n  maxFileSize?: number;\n  /**\n   * Files extensions accepted for upload.\n   */\n  acceptedFiles?: string[];\n  /**\n   * Callback fired when files are added.\n   */\n  onFilesAdded?: HvFilesAddedEvent;\n  /**\n   * Callback fired when file is removed from list.\n   */\n  onFileRemoved?: HvFileRemovedEvent;\n  /**\n   * Whether the DropZone should hide labels or not.\n   */\n  hideLabels?: boolean;\n  /**\n   * Attributes applied to the input element.\n   */\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n}\n\n// TODO: This component needs to adopt the Form element shape and deprecate its way of composing labels\n\nconst DEFAULT_LABELS: HvFileUploaderLabels = {\n  dropzone: \"Label\",\n  sizeWarning: \"Max. file size:\",\n  drag: \"Drop files here or\",\n  selectFiles: \"click to upload\",\n  dropFiles: \"Drop files here\",\n  fileSizeError: \"The file exceeds the maximum upload size\",\n  fileTypeError: \"File type not allowed for upload\",\n  removeFileButtonLabel: \"Remove File\",\n};\n\n/**\n * Lets the user choose one or more files from their device storage. Once chosen,\n * the files can be uploaded to a server or manipulated on the client side.\n *\n * Accepted file types follow the format of the html input accept attribute. Please check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file for more details.\n */\nexport const HvFileUploader = (props: HvFileUploaderProps) => {\n  const {\n    id,\n    className,\n    labels: labelsProp,\n    fileList,\n    multiple = true,\n    disabled = false,\n    hideLabels = false,\n    maxFileSize = Infinity,\n    inputProps = {},\n    acceptedFiles = [],\n    onFilesAdded,\n    onFileRemoved,\n    ...others\n  } = useDefaultProps(\"HvFileUploader\", props);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n\n  return (\n    <div id={id} className={className} {...others}>\n      <HvDropZone\n        id={setId(id, \"dropzone\")}\n        labels={labels}\n        multiple={multiple}\n        disabled={disabled}\n        accept={acceptedFiles.join(\",\")}\n        maxFileSize={maxFileSize}\n        onFilesAdded={onFilesAdded}\n        inputProps={inputProps}\n        hideLabels={hideLabels}\n      />\n      <HvFileList\n        id={setId(id, \"filelist\")}\n        list={fileList}\n        onFileRemoved={onFileRemoved}\n        removeFileButtonLabel={labels?.removeFileButtonLabel}\n      />\n    </div>\n  );\n};\n"],"names":["useDefaultProps","useLabels","jsxs","jsx","HvDropZone","setId","HvFileList"],"mappings":";;;;;;;;AA8DA,MAAM,iBAAuC;AAAA,EAC3C,UAAU;AAAA,EACV,aAAa;AAAA,EACb,MAAM;AAAA,EACN,aAAa;AAAA,EACb,WAAW;AAAA,EACX,eAAe;AAAA,EACf,eAAe;AAAA,EACf,uBAAuB;AACzB;AAQa,MAAA,iBAAiB,CAAC,UAA+B;AACtD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,WAAW;AAAA,IACX,WAAW;AAAA,IACX,aAAa;AAAA,IACb,cAAc;AAAA,IACd,aAAa,CAAC;AAAA,IACd,gBAAgB,CAAC;AAAA,IACjB;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACDA,gBAAgB,gBAAA,kBAAkB,KAAK;AACrC,QAAA,SAASC,UAAAA,UAAU,gBAAgB,UAAU;AAEnD,SACGC,2BAAAA,KAAA,OAAA,EAAI,IAAQ,WAAuB,GAAG,QACrC,UAAA;AAAA,IAAAC,2BAAA;AAAA,MAACC,SAAA;AAAA,MAAA;AAAA,QACC,IAAIC,MAAAA,MAAM,IAAI,UAAU;AAAA,QACxB;AAAA,QACA;AAAA,QACA;AAAA,QACA,QAAQ,cAAc,KAAK,GAAG;AAAA,QAC9B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IACF;AAAA,IACAF,2BAAA;AAAA,MAACG,SAAA;AAAA,MAAA;AAAA,QACC,IAAID,MAAAA,MAAM,IAAI,UAAU;AAAA,QACxB,MAAM;AAAA,QACN;AAAA,QACA,uBAAuB,QAAQ;AAAA,MAAA;AAAA,IACjC;AAAA,EACF,EAAA,CAAA;AAEJ;;"}

package/dist/esm/Accordion/Accordion.js

@@ -0,0 +1,128 @@
+import { jsxs, jsx } from "@emotion/react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { DropUpXS, DropDownXS } from "@hitachivantara/uikit-react-icons";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useControlled } from "../hooks/useControlled.js";
+import { useUniqueId } from "../hooks/useUniqueId.js";
+import { setId } from "../utils/setId.js";
+import { useClasses } from "./Accordion.styles.js";
+import { staticClasses } from "./Accordion.styles.js";
+import { HvTypography } from "../Typography/Typography.js";
+const HvAccordion = (props) => {
+  const {
+    id: idProp,
+    className,
+    classes: classesProp,
+    disabled = false,
+    label,
+    onChange,
+    children,
+    expanded,
+    headingLevel,
+    defaultExpanded = false,
+    containerProps,
+    labelVariant = "label",
+    ...others
+  } = useDefaultProps("HvAccordion", props);
+  const id = useUniqueId(idProp, "hvaccordion");
+  const { classes, cx } = useClasses(classesProp);
+  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));
+  const handleAction = useCallback(
+    (event) => {
+      if (!disabled) {
+        onChange?.(event, isOpen);
+        setIsOpen(!isOpen);
+        return true;
+      }
+      return false;
+    },
+    [disabled, onChange, isOpen, setIsOpen]
+  );
+  const handleClick = useCallback(
+    (event) => {
+      handleAction(event);
+      event.preventDefault();
+      event.stopPropagation();
+    },
+    [handleAction]
+  );
+  const handleKeyDown = useCallback(
+    (event) => {
+      let isEventHandled = false;
+      const { key } = event;
+      if (event.altKey || event.ctrlKey || event.metaKey || event.currentTarget !== event.target) {
+        return;
+      }
+      switch (key) {
+        case "Enter":
+        case " ":
+          isEventHandled = handleAction(event);
+          break;
+        default:
+          return;
+      }
+      if (isEventHandled) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [handleAction]
+  );
+  const accordionHeaderId = setId(id, "button");
+  const accordionContainer = setId(id, "container");
+  const accordionHeader = useMemo(() => {
+    const color = disabled ? "secondary_60" : void 0;
+    const accordionButton = /* @__PURE__ */ jsxs(
+      HvTypography,
+      {
+        id: accordionHeaderId,
+        component: "div",
+        role: "button",
+        className: cx(classes.label, { [classes.disabled]: disabled }),
+        disabled,
+        tabIndex: 0,
+        onKeyDown: handleKeyDown,
+        onClick: handleClick,
+        variant: labelVariant,
+        "aria-expanded": isOpen,
+        "aria-disabled": disabled,
+        children: [
+          isOpen ? /* @__PURE__ */ jsx(DropUpXS, { color }) : /* @__PURE__ */ jsx(DropDownXS, { color }),
+          label
+        ]
+      }
+    );
+    return headingLevel === void 0 ? accordionButton : /* @__PURE__ */ jsx(HvTypography, { component: `h${headingLevel}`, variant: labelVariant, children: accordionButton });
+  }, [
+    cx,
+    classes,
+    handleClick,
+    handleKeyDown,
+    label,
+    accordionHeaderId,
+    disabled,
+    headingLevel,
+    isOpen,
+    labelVariant
+  ]);
+  return /* @__PURE__ */ jsxs("div", { id, className: cx(classes.root, className), ...others, children: [
+    accordionHeader,
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        id: accordionContainer,
+        role: "region",
+        "aria-labelledby": accordionHeaderId,
+        className: cx(classes.container, { [classes.hidden]: !isOpen }),
+        hidden: !isOpen,
+        ...containerProps,
+        children
+      }
+    )
+  ] });
+};
+export {
+  HvAccordion,
+  staticClasses as accordionClasses
+};
+//# sourceMappingURL=Accordion.js.map

package/dist/esm/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sources":["../../../src/Accordion/Accordion.tsx"],"sourcesContent":["import React, {\n  SyntheticEvent,\n  useCallback,\n  useMemo,\n  HTMLAttributes,\n} from \"react\";\n\nimport { DropDownXS, DropUpXS } from \"@hitachivantara/uikit-react-icons\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\n\nimport { HvBaseProps } from \"../types/generic\";\nimport { setId } from \"../utils/setId\";\nimport { HvTypographyVariants, HvTypography } from \"../Typography\";\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./Accordion.styles\";\n\nexport { staticClasses as accordionClasses };\n\nexport type HvAccordionClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvAccordionProps\n  extends HvBaseProps<HTMLDivElement, \"onChange\" | \"children\"> {\n  /**\n   * Content to be rendered\n   */\n  children: React.ReactNode;\n  /**\n   * The accordion label button.\n   */\n  label?: string;\n  /**\n   * The function that will be executed whenever the accordion toggles it will receive the state of the accordion\n   */\n  onChange?: (event: React.SyntheticEvent, value: boolean) => void;\n  /**\n   * Whether the accordion is open or not, if this property is defined the accordion must be fully controlled.\n   */\n  expanded?: boolean;\n  /**\n   * When uncontrolled, defines the initial expanded state.\n   */\n  defaultExpanded?: boolean;\n  /**\n   * An object containing props to be passed onto container holding the accordion children.\n   */\n  containerProps?: HTMLAttributes<HTMLDivElement>;\n  /**\n   * Heading Level to apply to accordion button if ´undefined´ the button won't have a header wrapper.\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n  /**\n   * Is the accordion disabled.\n   */\n  disabled?: boolean;\n  /**\n   * Typography variant for the label.\n   */\n  labelVariant?: HvTypographyVariants;\n  /**\n   * A Jss Object used to override or extend the styles applied.\n   */\n  classes?: HvAccordionClasses;\n}\n\n/**\n * A accordion is a design element that expands in place to expose hidden information.\n */\nexport const HvAccordion = (props: HvAccordionProps) => {\n  const {\n    id: idProp,\n    className,\n    classes: classesProp,\n    disabled = false,\n    label,\n    onChange,\n    children,\n    expanded,\n    headingLevel,\n    defaultExpanded = false,\n    containerProps,\n    labelVariant = \"label\",\n    ...others\n  } = useDefaultProps(\"HvAccordion\", props);\n\n  const id = useUniqueId(idProp, \"hvaccordion\");\n\n  const { classes, cx } = useClasses(classesProp);\n\n  const [isOpen, setIsOpen] = useControlled(expanded, Boolean(defaultExpanded));\n\n  const handleAction = useCallback(\n    (event: SyntheticEvent) => {\n      if (!disabled) {\n        onChange?.(event, isOpen);\n        setIsOpen(!isOpen);\n        return true;\n      }\n      return false;\n    },\n    [disabled, onChange, isOpen, setIsOpen]\n  );\n\n  const handleClick = useCallback(\n    (event: SyntheticEvent) => {\n      handleAction(event);\n      event.preventDefault();\n      event.stopPropagation();\n    },\n    [handleAction]\n  );\n\n  const handleKeyDown = useCallback(\n    (event: React.KeyboardEvent<HTMLDivElement>) => {\n      let isEventHandled = false;\n      const { key } = event;\n\n      if (\n        event.altKey ||\n        event.ctrlKey ||\n        event.metaKey ||\n        event.currentTarget !== event.target\n      ) {\n        return;\n      }\n      switch (key) {\n        case \"Enter\":\n        case \" \":\n          isEventHandled = handleAction(event);\n          break;\n        default:\n          return;\n      }\n\n      if (isEventHandled) {\n        event.preventDefault();\n        event.stopPropagation();\n      }\n    },\n    [handleAction]\n  );\n\n  const accordionHeaderId = setId(id, \"button\");\n  const accordionContainer = setId(id, \"container\");\n  const accordionHeader = useMemo(() => {\n    const color = disabled ? \"secondary_60\" : undefined;\n\n    const accordionButton = (\n      <HvTypography\n        id={accordionHeaderId}\n        component=\"div\"\n        role=\"button\"\n        className={cx(classes.label, { [classes.disabled]: disabled })}\n        disabled={disabled}\n        tabIndex={0}\n        onKeyDown={handleKeyDown}\n        onClick={handleClick}\n        variant={labelVariant}\n        aria-expanded={isOpen}\n        aria-disabled={disabled}\n      >\n        {isOpen ? <DropUpXS color={color} /> : <DropDownXS color={color} />}\n        {label}\n      </HvTypography>\n    );\n\n    return headingLevel === undefined ? (\n      accordionButton\n    ) : (\n      <HvTypography component={`h${headingLevel}`} variant={labelVariant}>\n        {accordionButton}\n      </HvTypography>\n    );\n  }, [\n    cx,\n    classes,\n    handleClick,\n    handleKeyDown,\n    label,\n    accordionHeaderId,\n    disabled,\n    headingLevel,\n    isOpen,\n    labelVariant,\n  ]);\n\n  return (\n    <div id={id} className={cx(classes.root, className)} {...others}>\n      {accordionHeader}\n      <div\n        id={accordionContainer}\n        role=\"region\"\n        aria-labelledby={accordionHeaderId}\n        className={cx(classes.container, { [classes.hidden]: !isOpen })}\n        hidden={!isOpen}\n        {...containerProps}\n      >\n        {children}\n      </div>\n    </div>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/Accordion/Accordion.styles.js

@@ -0,0 +1,48 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { outlineStyles } from "../utils/focusUtils.js";
+import { createClasses } from "../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvAccordion", {
+  root: {
+    "& + root": {
+      paddingTop: 8
+    }
+  },
+  hidden: { height: 0, display: "none" },
+  container: { paddingTop: 8, height: "auto" },
+  label: {
+    width: "100%",
+    display: "flex",
+    justifyContent: "flex-start",
+    alignItems: "center",
+    height: "32px",
+    "&[disabled], &:active": {
+      outline: "none"
+    },
+    "&:focus": {
+      outline: "none",
+      background: theme.colors.atmo3
+    },
+    "&:hover": {
+      background: theme.colors.atmo3
+    },
+    "&:focus-visible": {
+      ...outlineStyles
+    },
+    cursor: "pointer"
+  },
+  disabled: {
+    cursor: "not-allowed",
+    color: theme.colors.secondary_60,
+    "&:focus": {
+      background: "none"
+    },
+    "&:hover": {
+      background: "none"
+    }
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Accordion.styles.js.map

package/dist/esm/Accordion/Accordion.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.styles.js","sources":["../../../src/Accordion/Accordion.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { outlineStyles } from \"../utils/focusUtils\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvAccordion\", {\n  root: {\n    \"& + root\": {\n      paddingTop: 8,\n    },\n  },\n  hidden: { height: 0, display: \"none\" },\n  container: { paddingTop: 8, height: \"auto\" },\n  label: {\n    width: \"100%\",\n    display: \"flex\",\n    justifyContent: \"flex-start\",\n    alignItems: \"center\",\n    height: \"32px\",\n\n    \"&[disabled], &:active\": {\n      outline: \"none\",\n    },\n\n    \"&:focus\": {\n      outline: \"none\",\n      background: theme.colors.atmo3,\n    },\n\n    \"&:hover\": {\n      background: theme.colors.atmo3,\n    },\n\n    \"&:focus-visible\": {\n      ...outlineStyles,\n    },\n\n    cursor: \"pointer\",\n  },\n  disabled: {\n    cursor: \"not-allowed\",\n    color: theme.colors.secondary_60,\n\n    \"&:focus\": {\n      background: \"none\",\n    },\n\n    \"&:hover\": {\n      background: \"none\",\n    },\n  },\n});\n"],"names":[],"mappings":";;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,YAAY;AAAA,MACV,YAAY;AAAA,IACd;AAAA,EACF;AAAA,EACA,QAAQ,EAAE,QAAQ,GAAG,SAAS,OAAO;AAAA,EACrC,WAAW,EAAE,YAAY,GAAG,QAAQ,OAAO;AAAA,EAC3C,OAAO;AAAA,IACL,OAAO;AAAA,IACP,SAAS;AAAA,IACT,gBAAgB;AAAA,IAChB,YAAY;AAAA,IACZ,QAAQ;AAAA,IAER,yBAAyB;AAAA,MACvB,SAAS;AAAA,IACX;AAAA,IAEA,WAAW;AAAA,MACT,SAAS;AAAA,MACT,YAAY,MAAM,OAAO;AAAA,IAC3B;AAAA,IAEA,WAAW;AAAA,MACT,YAAY,MAAM,OAAO;AAAA,IAC3B;AAAA,IAEA,mBAAmB;AAAA,MACjB,GAAG;AAAA,IACL;AAAA,IAEA,QAAQ;AAAA,EACV;AAAA,EACA,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,OAAO,MAAM,OAAO;AAAA,IAEpB,WAAW;AAAA,MACT,YAAY;AAAA,IACd;AAAA,IAEA,WAAW;AAAA,MACT,YAAY;AAAA,IACd;AAAA,EACF;AACF,CAAC;"}

package/dist/esm/ActionBar/ActionBar.js

@@ -0,0 +1,19 @@
+import { jsx } from "@emotion/react/jsx-runtime";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useClasses } from "./ActionBar.styles.js";
+import { staticClasses } from "./ActionBar.styles.js";
+const HvActionBar = (props) => {
+  const {
+    classes: classesProp,
+    className,
+    children,
+    ...others
+  } = useDefaultProps("HvActionBar", props);
+  const { classes, cx } = useClasses(classesProp);
+  return /* @__PURE__ */ jsx("div", { className: cx(classes.root, className), ...others, children });
+};
+export {
+  HvActionBar,
+  staticClasses as actionBarClasses
+};
+//# sourceMappingURL=ActionBar.js.map

package/dist/esm/ActionBar/ActionBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBar.js","sources":["../../../src/ActionBar/ActionBar.tsx"],"sourcesContent":["import { HvBaseProps } from \"../types/generic\";\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { ExtractNames } from \"../utils/classes\";\n\nimport { staticClasses, useClasses } from \"./ActionBar.styles\";\n\nexport { staticClasses as actionBarClasses };\n\nexport type HvActionBarClasses = ExtractNames<typeof useClasses>;\n\nexport interface HvActionBarProps extends HvBaseProps {\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvActionBarClasses;\n}\n\nexport const HvActionBar = (props: HvActionBarProps) => {\n  const {\n    classes: classesProp,\n    className,\n    children,\n    ...others\n  } = useDefaultProps(\"HvActionBar\", props);\n  const { classes, cx } = useClasses(classesProp);\n\n  return (\n    <div className={cx(classes.root, className)} {...others}>\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AAgBa,MAAA,cAAc,CAAC,UAA4B;AAChD,QAAA;AAAA,IACJ,SAAS;AAAA,IACT;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,IACD,gBAAgB,eAAe,KAAK;AACxC,QAAM,EAAE,SAAS,GAAG,IAAI,WAAW,WAAW;AAG5C,SAAA,oBAAC,OAAI,EAAA,WAAW,GAAG,QAAQ,MAAM,SAAS,GAAI,GAAG,QAC9C,SACH,CAAA;AAEJ;"}

package/dist/esm/ActionBar/ActionBar.styles.js

@@ -0,0 +1,17 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.js";
+const { staticClasses, useClasses } = createClasses("HvActionBar", {
+  root: {
+    width: "100%",
+    padding: theme.space.sm,
+    borderTop: `1px solid ${theme.colors.atmo4}`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end"
+  }
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=ActionBar.styles.js.map

package/dist/esm/ActionBar/ActionBar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionBar.styles.js","sources":["../../../src/ActionBar/ActionBar.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvActionBar\", {\n  root: {\n    width: \"100%\",\n    padding: theme.space.sm,\n    borderTop: `1px solid ${theme.colors.atmo4}`,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"flex-end\",\n  },\n});\n"],"names":[],"mappings":";;AAIO,MAAM,EAAE,eAAe,eAAe,cAAc,eAAe;AAAA,EACxE,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,SAAS,MAAM,MAAM;AAAA,IACrB,WAAW,aAAa,MAAM,OAAO,KAAK;AAAA,IAC1C,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB;AAAA,EAClB;AACF,CAAC;"}