@neo4j-ndl/react 4.0.16 → 4.0.18

package/lib/cjs/date-picker/DatePicker.js

@@ -160,7 +160,22 @@ const DatePicker = (_a) => {
         }
         setPreSelectedDate(date);
     }, [picker, preSelectedDate, reactDatePickerProps]);
-    const datePickerProps = Object.assign(Object.assign({}, reactDatePickerProps), { onCalendarClose: interceptedOnCalendarClose, onChange: interceptedChange, onMonthChange: handleMonthChange });
+    /**
+     * Intercept onChangeRaw to handle clearing the input
+     * When the user clears the text input, set the date to null
+     */
+    const interceptedOnChangeRaw = (0, react_1.useCallback)((event) => {
+        var _a;
+        const target = event === null || event === void 0 ? void 0 : event.target;
+        if ((target === null || target === void 0 ? void 0 : target.value) === '') {
+            setPreSelectedDate(null);
+            if (reactDatePickerProps.onChange) {
+                reactDatePickerProps.onChange(null, event);
+            }
+        }
+        (_a = reactDatePickerProps === null || reactDatePickerProps === void 0 ? void 0 : reactDatePickerProps.onChangeRaw) === null || _a === void 0 ? void 0 : _a.call(reactDatePickerProps, event);
+    }, [reactDatePickerProps]);
+    const datePickerProps = Object.assign(Object.assign({}, reactDatePickerProps), { onCalendarClose: interceptedOnCalendarClose, onChange: interceptedChange, onChangeRaw: interceptedOnChangeRaw, onMonthChange: handleMonthChange });
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: classes, ref: ref, style: style }, restProps, htmlAttributes, { children: (0, jsx_runtime_1.jsx)(react_datepicker_1.default, Object.assign({ ref: datetimeRef, customInput: (0, jsx_runtime_1.jsx)(DatePickerTextInputWrapper, { isDisabled: isDisabled, textInputProps: textInputProps }), customTimeInput: (0, jsx_runtime_1.jsxs)("span", { children: [(0, jsx_runtime_1.jsx)(divider_1.Divider, { className: "n-my-4" }), (0, jsx_runtime_1.jsx)(time_picker_1.TimePicker, Object.assign({ isFluid: true, value: preSelectedDate
                             ? new time_picker_1.NeedleTime(preSelectedDate.getHours(), preSelectedDate.getMinutes())
                             : undefined, onChange: handleTimeChange }, timePickerProps, { floatingStrategy: "absolute", isPortaled: false }))] }), disabled: isDisabled, showPopperArrow: false, showMonthYearPicker: picker === 'month', showYearPicker: picker === 'year', shouldCloseOnSelect: picker === 'day' && !((_b = reactDatePickerProps.showTimeInput) !== null && _b !== void 0 ? _b : false), dayClassName: () => 'ndl-datepicker-day', renderCustomHeader: CustomHeader }, datePickerProps, { popperClassName: (0, classnames_1.default)('ndl-datepicker-popper', reactDatePickerProps.popperClassName), popperProps: Object.assign({ strategy: isInsideDialog ? 'fixed' : 'absolute' }, reactDatePickerProps.popperProps) })) })));

package/lib/cjs/date-picker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/date-picker/DatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["// TODO: try to fix as some point\n/* eslint-disable @typescript-eslint/naming-convention */\n\n/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport { format } from 'date-fns';\nimport { useCallback, useRef, useState } from 'react';\nimport ReactDatePicker, {\n  type ReactDatePickerCustomHeaderProps,\n} from 'react-datepicker';\n\nimport type { CommonProps } from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { useIsInsideDialog } from '../dialog/dialog-context';\nimport { Divider } from '../divider';\nimport {\n  ArrowLeftIconOutline,\n  ArrowRightIconOutline,\n  CalendarDaysIconOutline,\n  ChevronDownIconOutline,\n} from '../icons';\nimport { TextInput } from '../text-input';\nimport { NeedleTime, TimePicker, type TimePickerProps } from '../time-picker';\nimport { Typography } from '../typography';\nimport { daysInMonth, getYearsPeriodString } from './utils';\n\ntype DatePickerTextInputWrapperProps = React.ComponentProps<'input'> & {\n  textInputProps?: React.ComponentProps<typeof TextInput>;\n  isDisabled?: boolean;\n  value?: string;\n};\n\n// This wrapper is needed due to react-datepicker injecting html attributes\n// into the custom input component on root level, since we use htmlAttributes\n// we need to help spread them there instead of the root level\nconst DatePickerTextInputWrapper = ({\n  textInputProps,\n  isDisabled,\n  value,\n  placeholder,\n  ...restProps\n}: DatePickerTextInputWrapperProps) => {\n  // deconstruct textInputProps to avoid bugs with react-datepicker injecting props\n  const {\n    placeholder: textInputPlaceholder,\n    htmlAttributes: textInputHtmlAttributes,\n    ref,\n    ...restTextInputProps\n  } = textInputProps ?? {};\n\n  return (\n    <TextInput\n      ref={ref}\n      aria-label=\"Date picker input\"\n      trailingElement={\n        <CalendarDaysIconOutline className=\"ndl-datepicker-icon\" />\n      }\n      value={value}\n      placeholder={placeholder ?? textInputPlaceholder}\n      isDisabled={isDisabled}\n      // react-datepicker injects html attributes into the custom input\n      htmlAttributes={{\n        ...textInputHtmlAttributes,\n        ...restProps,\n      }}\n      {...restTextInputProps}\n    />\n  );\n};\n\n/**\n *\n *\n * Types\n *\n *\n */\n\ntype PickerType = 'day' | 'month' | 'year';\n\n// Define a more flexible type for onChange\ntype DatePickerChangeHandler = (\n  date: Date | null | [Date | null, Date | null] | Date[],\n  event?: React.SyntheticEvent | undefined,\n) => void;\n\ninterface DatePickerProps {\n  /** Props for the embedded `TextInput` component. */\n  textInputProps?: React.ComponentProps<typeof TextInput>;\n  /** Whether the date picker is disabled. */\n  isDisabled?: boolean;\n  /** Props for the embedded `TimePicker` component. */\n  timePickerProps?: TimePickerProps;\n  /** Props forwarded to underlying `react-datepicker` component. */\n  reactDatePickerProps: React.ComponentProps<typeof ReactDatePicker>;\n}\n\nexport const DatePicker = ({\n  reactDatePickerProps,\n  textInputProps,\n  timePickerProps,\n  isDisabled,\n  ref,\n  className,\n  style,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', DatePickerProps>) => {\n  const classes = classNames(`ndl-datepicker`, className, {});\n  const datetimeRef = useRef<ReactDatePicker>(null);\n  const [picker, setPicker] = useState<PickerType>('day');\n  const [preSelectedDate, setPreSelectedDate] = useState<Date | null>(\n    (reactDatePickerProps.selected as Date | null) ||\n      (reactDatePickerProps.startDate as Date | null),\n  );\n\n  const isInsideDialog = useIsInsideDialog();\n\n  const headerAction = useCallback(\n    (action: PickerType) => {\n      setPicker(picker === action ? 'day' : action);\n    },\n    [picker],\n  );\n\n  const CustomHeader = useCallback(\n    (props: ReactDatePickerCustomHeaderProps) => {\n      const {\n        decreaseMonth,\n        increaseMonth,\n        increaseYear,\n        decreaseYear,\n        nextMonthButtonDisabled,\n        nextYearButtonDisabled,\n        prevMonthButtonDisabled,\n        prevYearButtonDisabled,\n      } = props;\n\n      const prevCallback = picker === 'year' ? decreaseYear : decreaseMonth;\n      const nextCallback = picker === 'year' ? increaseYear : increaseMonth;\n      const prevDisabled =\n        picker === 'year' ? prevYearButtonDisabled : prevMonthButtonDisabled;\n      const nextDisabled =\n        picker === 'year' ? nextYearButtonDisabled : nextMonthButtonDisabled;\n\n      return (\n        <div className=\"ndl-datepicker-header\">\n          <div className=\"ndl-datepicker-selects\">\n            {picker !== 'year' && (\n              <button\n                aria-label={`${picker === 'month' ? 'Close' : 'Open'} month picker`}\n                aria-pressed={picker === 'month'}\n                onClick={() => headerAction('month')}\n              >\n                <div className=\"n-flex n-items-center n-gap-token-4\">\n                  <Typography variant=\"subheading-small\">\n                    {format(props.date, 'MMM')}\n                  </Typography>\n                  <ChevronDownIconOutline\n                    className={classNames('ndl-datepicker-chevron', {\n                      'n-rotate-180': picker === 'month',\n                    })}\n                    aria-label=\"Chevron icon\"\n                  />\n                </div>\n              </button>\n            )}\n            {picker !== 'month' && (\n              <button\n                aria-label={`${picker === 'year' ? 'Close' : 'Open'} year picker`}\n                onClick={() => headerAction('year')}\n              >\n                <div className=\"n-flex n-items-center n-gap-token-4\">\n                  <Typography variant=\"subheading-small\">\n                    {picker === 'year'\n                      ? getYearsPeriodString(\n                          props.date,\n                          reactDatePickerProps?.yearItemNumber,\n                        )\n                      : format(props.date, 'yyyy')}\n                  </Typography>\n                  <ChevronDownIconOutline\n                    className={classNames('ndl-datepicker-chevron', {\n                      'n-rotate-180': picker === 'year',\n                    })}\n                    aria-label=\"Chevron icon\"\n                  />\n                </div>\n              </button>\n            )}\n          </div>\n          {picker !== 'month' && (\n            <div className=\"n-flex n-justify-center n-gap-token-16\">\n              <CleanIconButton\n                description={\n                  picker === 'year' ? 'Previous period' : 'Previous month'\n                }\n                onClick={prevCallback}\n                isDisabled={prevDisabled}\n                className=\"n-text-neutral-text-weak\"\n                size=\"small\"\n              >\n                <ArrowLeftIconOutline />\n              </CleanIconButton>\n              <CleanIconButton\n                description={picker === 'year' ? 'Next period' : 'Next month'}\n                onClick={nextCallback}\n                isDisabled={nextDisabled}\n                className=\"n-text-neutral-text-weak\"\n                size=\"small\"\n              >\n                <ArrowRightIconOutline />\n              </CleanIconButton>\n            </div>\n          )}\n        </div>\n      );\n    },\n    [picker, headerAction, reactDatePickerProps?.yearItemNumber],\n  );\n\n  const handleTimeChange = (newTime: NeedleTime) => {\n    if (\n      reactDatePickerProps.selectsRange ||\n      reactDatePickerProps.selectsMultiple\n    ) {\n      // this is consistent with the behavior of react-datepicker\n      return;\n    }\n\n    if (!preSelectedDate) return;\n\n    const newDate = new Date(preSelectedDate);\n    newDate.setHours(newTime.hour, newTime.minute, 0, 0);\n    setPreSelectedDate(newDate);\n\n    if (reactDatePickerProps.onChange) {\n      // For single date selection\n      reactDatePickerProps.onChange(newDate, undefined);\n    }\n  };\n\n  /**\n   * Intercept onChange so we can work with\n   * Month and Year pickers\n   */\n  const interceptedChange: DatePickerChangeHandler = useCallback(\n    (\n      date: Date | null | [Date | null, Date | null] | Date[],\n      event?: React.SyntheticEvent,\n    ) => {\n      if (picker !== 'day') {\n        // setTimeout to prevent picker change before the handleMonthChange logic\n        setTimeout(() => {\n          setPicker('day');\n        });\n      } else if (picker === 'day') {\n        if (date instanceof Date) {\n          setPreSelectedDate(date);\n        } else if (\n          Array.isArray(date) &&\n          date.length > 0 &&\n          date[0] instanceof Date\n        ) {\n          setPreSelectedDate(date[0]);\n        } else if (date === null) {\n          setPreSelectedDate(null);\n        }\n\n        if (reactDatePickerProps.onChange && date !== null) {\n          (reactDatePickerProps.onChange as DatePickerChangeHandler)(\n            date,\n            event,\n          );\n        }\n      }\n    },\n    [picker, reactDatePickerProps],\n  );\n\n  /**\n   * Intercept onCalendarClose so we can\n   * switch to \"day\" picker if we close on \"month\" or \"year\"\n   * view\n   */\n  const interceptedOnCalendarClose = useCallback(() => {\n    if (picker !== 'day') {\n      setPicker('day');\n    }\n    reactDatePickerProps?.onCalendarClose?.();\n  }, [picker, reactDatePickerProps]);\n\n  const handleMonthChange = useCallback(\n    (date: Date) => {\n      if (picker === 'month') {\n        const selectedDay = preSelectedDate?.getDate() ?? 1;\n        const daysInNewMonth = daysInMonth(date.getMonth(), date.getFullYear());\n        date.setDate(Math.min(selectedDay, daysInNewMonth));\n        reactDatePickerProps?.onMonthChange?.(date);\n      } else if (picker === 'year') {\n        const selectedDay = preSelectedDate?.getDate() ?? 1;\n        const selectedMonth = preSelectedDate?.getMonth() ?? 0;\n        const daysInNewMonth = daysInMonth(selectedMonth, date.getFullYear());\n        date.setMonth(selectedMonth, Math.min(selectedDay, daysInNewMonth));\n        reactDatePickerProps?.onMonthChange?.(date);\n      }\n      setPreSelectedDate(date);\n    },\n    [picker, preSelectedDate, reactDatePickerProps],\n  );\n\n  const datePickerProps = {\n    ...reactDatePickerProps,\n    onCalendarClose: interceptedOnCalendarClose,\n    onChange: interceptedChange,\n    onMonthChange: handleMonthChange,\n  };\n\n  return (\n    <div\n      className={classes}\n      ref={ref}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <ReactDatePicker\n        ref={datetimeRef}\n        customInput={\n          <DatePickerTextInputWrapper\n            isDisabled={isDisabled}\n            textInputProps={textInputProps}\n          />\n        }\n        customTimeInput={\n          <span>\n            <Divider className=\"n-my-4\" />\n            <TimePicker\n              isFluid\n              value={\n                preSelectedDate\n                  ? new NeedleTime(\n                      preSelectedDate.getHours(),\n                      preSelectedDate.getMinutes(),\n                    )\n                  : undefined\n              }\n              onChange={handleTimeChange}\n              {...timePickerProps}\n              floatingStrategy=\"absolute\"\n              isPortaled={false}\n            />\n          </span>\n        }\n        disabled={isDisabled}\n        showPopperArrow={false}\n        showMonthYearPicker={picker === 'month'}\n        showYearPicker={picker === 'year'}\n        shouldCloseOnSelect={\n          picker === 'day' && !(reactDatePickerProps.showTimeInput ?? false)\n        }\n        dayClassName={() => 'ndl-datepicker-day'}\n        renderCustomHeader={CustomHeader}\n        {...datePickerProps}\n        popperClassName={classNames(\n          'ndl-datepicker-popper',\n          reactDatePickerProps.popperClassName,\n        )}\n        popperProps={{\n          strategy: isInsideDialog ? 'fixed' : 'absolute',\n          ...reactDatePickerProps.popperProps,\n        }}\n      />\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/date-picker/DatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["// TODO: try to fix as some point\n/* eslint-disable @typescript-eslint/naming-convention */\n\n/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport { format } from 'date-fns';\nimport { useCallback, useRef, useState } from 'react';\nimport ReactDatePicker, {\n  type ReactDatePickerCustomHeaderProps,\n} from 'react-datepicker';\n\nimport type { CommonProps } from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { useIsInsideDialog } from '../dialog/dialog-context';\nimport { Divider } from '../divider';\nimport {\n  ArrowLeftIconOutline,\n  ArrowRightIconOutline,\n  CalendarDaysIconOutline,\n  ChevronDownIconOutline,\n} from '../icons';\nimport { TextInput } from '../text-input';\nimport { NeedleTime, TimePicker, type TimePickerProps } from '../time-picker';\nimport { Typography } from '../typography';\nimport { daysInMonth, getYearsPeriodString } from './utils';\n\ntype DatePickerTextInputWrapperProps = React.ComponentProps<'input'> & {\n  textInputProps?: React.ComponentProps<typeof TextInput>;\n  isDisabled?: boolean;\n  value?: string;\n};\n\n// This wrapper is needed due to react-datepicker injecting html attributes\n// into the custom input component on root level, since we use htmlAttributes\n// we need to help spread them there instead of the root level\nconst DatePickerTextInputWrapper = ({\n  textInputProps,\n  isDisabled,\n  value,\n  placeholder,\n  ...restProps\n}: DatePickerTextInputWrapperProps) => {\n  // deconstruct textInputProps to avoid bugs with react-datepicker injecting props\n  const {\n    placeholder: textInputPlaceholder,\n    htmlAttributes: textInputHtmlAttributes,\n    ref,\n    ...restTextInputProps\n  } = textInputProps ?? {};\n\n  return (\n    <TextInput\n      ref={ref}\n      aria-label=\"Date picker input\"\n      trailingElement={\n        <CalendarDaysIconOutline className=\"ndl-datepicker-icon\" />\n      }\n      value={value}\n      placeholder={placeholder ?? textInputPlaceholder}\n      isDisabled={isDisabled}\n      // react-datepicker injects html attributes into the custom input\n      htmlAttributes={{\n        ...textInputHtmlAttributes,\n        ...restProps,\n      }}\n      {...restTextInputProps}\n    />\n  );\n};\n\n/**\n *\n *\n * Types\n *\n *\n */\n\ntype PickerType = 'day' | 'month' | 'year';\n\n// Define a more flexible type for onChange\ntype DatePickerChangeHandler = (\n  date: Date | null | [Date | null, Date | null] | Date[],\n  event?: React.SyntheticEvent | undefined,\n) => void;\n\ninterface DatePickerProps {\n  /** Props for the embedded `TextInput` component. */\n  textInputProps?: React.ComponentProps<typeof TextInput>;\n  /** Whether the date picker is disabled. */\n  isDisabled?: boolean;\n  /** Props for the embedded `TimePicker` component. */\n  timePickerProps?: TimePickerProps;\n  /** Props forwarded to underlying `react-datepicker` component. */\n  reactDatePickerProps: React.ComponentProps<typeof ReactDatePicker>;\n}\n\nexport const DatePicker = ({\n  reactDatePickerProps,\n  textInputProps,\n  timePickerProps,\n  isDisabled,\n  ref,\n  className,\n  style,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', DatePickerProps>) => {\n  const classes = classNames(`ndl-datepicker`, className, {});\n  const datetimeRef = useRef<ReactDatePicker>(null);\n  const [picker, setPicker] = useState<PickerType>('day');\n  const [preSelectedDate, setPreSelectedDate] = useState<Date | null>(\n    (reactDatePickerProps.selected as Date | null) ||\n      (reactDatePickerProps.startDate as Date | null),\n  );\n\n  const isInsideDialog = useIsInsideDialog();\n\n  const headerAction = useCallback(\n    (action: PickerType) => {\n      setPicker(picker === action ? 'day' : action);\n    },\n    [picker],\n  );\n\n  const CustomHeader = useCallback(\n    (props: ReactDatePickerCustomHeaderProps) => {\n      const {\n        decreaseMonth,\n        increaseMonth,\n        increaseYear,\n        decreaseYear,\n        nextMonthButtonDisabled,\n        nextYearButtonDisabled,\n        prevMonthButtonDisabled,\n        prevYearButtonDisabled,\n      } = props;\n\n      const prevCallback = picker === 'year' ? decreaseYear : decreaseMonth;\n      const nextCallback = picker === 'year' ? increaseYear : increaseMonth;\n      const prevDisabled =\n        picker === 'year' ? prevYearButtonDisabled : prevMonthButtonDisabled;\n      const nextDisabled =\n        picker === 'year' ? nextYearButtonDisabled : nextMonthButtonDisabled;\n\n      return (\n        <div className=\"ndl-datepicker-header\">\n          <div className=\"ndl-datepicker-selects\">\n            {picker !== 'year' && (\n              <button\n                aria-label={`${picker === 'month' ? 'Close' : 'Open'} month picker`}\n                aria-pressed={picker === 'month'}\n                onClick={() => headerAction('month')}\n              >\n                <div className=\"n-flex n-items-center n-gap-token-4\">\n                  <Typography variant=\"subheading-small\">\n                    {format(props.date, 'MMM')}\n                  </Typography>\n                  <ChevronDownIconOutline\n                    className={classNames('ndl-datepicker-chevron', {\n                      'n-rotate-180': picker === 'month',\n                    })}\n                    aria-label=\"Chevron icon\"\n                  />\n                </div>\n              </button>\n            )}\n            {picker !== 'month' && (\n              <button\n                aria-label={`${picker === 'year' ? 'Close' : 'Open'} year picker`}\n                onClick={() => headerAction('year')}\n              >\n                <div className=\"n-flex n-items-center n-gap-token-4\">\n                  <Typography variant=\"subheading-small\">\n                    {picker === 'year'\n                      ? getYearsPeriodString(\n                          props.date,\n                          reactDatePickerProps?.yearItemNumber,\n                        )\n                      : format(props.date, 'yyyy')}\n                  </Typography>\n                  <ChevronDownIconOutline\n                    className={classNames('ndl-datepicker-chevron', {\n                      'n-rotate-180': picker === 'year',\n                    })}\n                    aria-label=\"Chevron icon\"\n                  />\n                </div>\n              </button>\n            )}\n          </div>\n          {picker !== 'month' && (\n            <div className=\"n-flex n-justify-center n-gap-token-16\">\n              <CleanIconButton\n                description={\n                  picker === 'year' ? 'Previous period' : 'Previous month'\n                }\n                onClick={prevCallback}\n                isDisabled={prevDisabled}\n                className=\"n-text-neutral-text-weak\"\n                size=\"small\"\n              >\n                <ArrowLeftIconOutline />\n              </CleanIconButton>\n              <CleanIconButton\n                description={picker === 'year' ? 'Next period' : 'Next month'}\n                onClick={nextCallback}\n                isDisabled={nextDisabled}\n                className=\"n-text-neutral-text-weak\"\n                size=\"small\"\n              >\n                <ArrowRightIconOutline />\n              </CleanIconButton>\n            </div>\n          )}\n        </div>\n      );\n    },\n    [picker, headerAction, reactDatePickerProps?.yearItemNumber],\n  );\n\n  const handleTimeChange = (newTime: NeedleTime) => {\n    if (\n      reactDatePickerProps.selectsRange ||\n      reactDatePickerProps.selectsMultiple\n    ) {\n      // this is consistent with the behavior of react-datepicker\n      return;\n    }\n\n    if (!preSelectedDate) return;\n\n    const newDate = new Date(preSelectedDate);\n    newDate.setHours(newTime.hour, newTime.minute, 0, 0);\n    setPreSelectedDate(newDate);\n\n    if (reactDatePickerProps.onChange) {\n      // For single date selection\n      reactDatePickerProps.onChange(newDate, undefined);\n    }\n  };\n\n  /**\n   * Intercept onChange so we can work with\n   * Month and Year pickers\n   */\n  const interceptedChange: DatePickerChangeHandler = useCallback(\n    (\n      date: Date | null | [Date | null, Date | null] | Date[],\n      event?: React.SyntheticEvent,\n    ) => {\n      if (picker !== 'day') {\n        // setTimeout to prevent picker change before the handleMonthChange logic\n        setTimeout(() => {\n          setPicker('day');\n        });\n      } else if (picker === 'day') {\n        if (date instanceof Date) {\n          setPreSelectedDate(date);\n        } else if (\n          Array.isArray(date) &&\n          date.length > 0 &&\n          date[0] instanceof Date\n        ) {\n          setPreSelectedDate(date[0]);\n        } else if (date === null) {\n          setPreSelectedDate(null);\n        }\n\n        if (reactDatePickerProps.onChange && date !== null) {\n          (reactDatePickerProps.onChange as DatePickerChangeHandler)(\n            date,\n            event,\n          );\n        }\n      }\n    },\n    [picker, reactDatePickerProps],\n  );\n\n  /**\n   * Intercept onCalendarClose so we can\n   * switch to \"day\" picker if we close on \"month\" or \"year\"\n   * view\n   */\n  const interceptedOnCalendarClose = useCallback(() => {\n    if (picker !== 'day') {\n      setPicker('day');\n    }\n    reactDatePickerProps?.onCalendarClose?.();\n  }, [picker, reactDatePickerProps]);\n\n  const handleMonthChange = useCallback(\n    (date: Date) => {\n      if (picker === 'month') {\n        const selectedDay = preSelectedDate?.getDate() ?? 1;\n        const daysInNewMonth = daysInMonth(date.getMonth(), date.getFullYear());\n        date.setDate(Math.min(selectedDay, daysInNewMonth));\n        reactDatePickerProps?.onMonthChange?.(date);\n      } else if (picker === 'year') {\n        const selectedDay = preSelectedDate?.getDate() ?? 1;\n        const selectedMonth = preSelectedDate?.getMonth() ?? 0;\n        const daysInNewMonth = daysInMonth(selectedMonth, date.getFullYear());\n        date.setMonth(selectedMonth, Math.min(selectedDay, daysInNewMonth));\n        reactDatePickerProps?.onMonthChange?.(date);\n      }\n      setPreSelectedDate(date);\n    },\n    [picker, preSelectedDate, reactDatePickerProps],\n  );\n\n  /**\n   * Intercept onChangeRaw to handle clearing the input\n   * When the user clears the text input, set the date to null\n   */\n  const interceptedOnChangeRaw = useCallback(\n    (\n      event?:\n        | React.KeyboardEvent<HTMLElement>\n        | React.MouseEvent<HTMLElement, MouseEvent>,\n    ) => {\n      const target = event?.target as HTMLInputElement | undefined;\n      if (target?.value === '') {\n        setPreSelectedDate(null);\n        if (reactDatePickerProps.onChange) {\n          (reactDatePickerProps.onChange as DatePickerChangeHandler)(\n            null,\n            event,\n          );\n        }\n      }\n      reactDatePickerProps?.onChangeRaw?.(event);\n    },\n    [reactDatePickerProps],\n  );\n\n  const datePickerProps = {\n    ...reactDatePickerProps,\n    onCalendarClose: interceptedOnCalendarClose,\n    onChange: interceptedChange,\n    onChangeRaw: interceptedOnChangeRaw,\n    onMonthChange: handleMonthChange,\n  };\n\n  return (\n    <div\n      className={classes}\n      ref={ref}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <ReactDatePicker\n        ref={datetimeRef}\n        customInput={\n          <DatePickerTextInputWrapper\n            isDisabled={isDisabled}\n            textInputProps={textInputProps}\n          />\n        }\n        customTimeInput={\n          <span>\n            <Divider className=\"n-my-4\" />\n            <TimePicker\n              isFluid\n              value={\n                preSelectedDate\n                  ? new NeedleTime(\n                      preSelectedDate.getHours(),\n                      preSelectedDate.getMinutes(),\n                    )\n                  : undefined\n              }\n              onChange={handleTimeChange}\n              {...timePickerProps}\n              floatingStrategy=\"absolute\"\n              isPortaled={false}\n            />\n          </span>\n        }\n        disabled={isDisabled}\n        showPopperArrow={false}\n        showMonthYearPicker={picker === 'month'}\n        showYearPicker={picker === 'year'}\n        shouldCloseOnSelect={\n          picker === 'day' && !(reactDatePickerProps.showTimeInput ?? false)\n        }\n        dayClassName={() => 'ndl-datepicker-day'}\n        renderCustomHeader={CustomHeader}\n        {...datePickerProps}\n        popperClassName={classNames(\n          'ndl-datepicker-popper',\n          reactDatePickerProps.popperClassName,\n        )}\n        popperProps={{\n          strategy: isInsideDialog ? 'fixed' : 'absolute',\n          ...reactDatePickerProps.popperProps,\n        }}\n      />\n    </div>\n  );\n};\n"]}

package/lib/cjs/drawer/Drawer.js

@@ -44,7 +44,8 @@ const clean_icon_button_1 = require("../clean-icon-button");
 const conditional_wrap_1 = require("../conditional-wrap");
 const icons_1 = require("../icons");
 const typography_1 = require("../typography");
-const DrawerComponent = function DrawerComponent({ children, className = '', isExpanded, onExpandedChange, position = 'left', type = 'overlay', isResizeable = false, resizeableProps, isCloseable = true, isPortaled = false, portalProps = {}, htmlAttributes, ref, }) {
+const DrawerComponent = function DrawerComponent(_a) {
+    var { children, className = '', isExpanded, onExpandedChange, position = 'left', type = 'overlay', isResizeable = false, resizeableProps, isCloseable = true, isPortaled = false, portalProps = {}, htmlAttributes, style, ref, as } = _a, restProps = __rest(_a, ["children", "className", "isExpanded", "onExpandedChange", "position", "type", "isResizeable", "resizeableProps", "isCloseable", "isPortaled", "portalProps", "htmlAttributes", "style", "ref", "as"]);
     const setOnExpandedChange = (0, react_2.useCallback)(() => {
         if (onExpandedChange)
             onExpandedChange(!isExpanded);
@@ -58,14 +59,15 @@ const DrawerComponent = function DrawerComponent({ children, className = '', isE
     });
     const resizableStylePosition = type === 'overlay' ? 'absolute' : 'relative';
     const shouldRenderInPortal = isPortaled && type === 'overlay';
+    const Component = as !== null && as !== void 0 ? as : 'div';
     const Close = () => ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isCloseable && ((0, jsx_runtime_1.jsx)(clean_icon_button_1.CleanIconButton, { className: "ndl-drawer-close-button", onClick: setOnExpandedChange, description: "Close", size: "medium", htmlAttributes: {
                 title: 'Close drawer',
             }, children: (0, jsx_runtime_1.jsx)(icons_1.XMarkIconOutline, {}) })) }));
     if (isResizeable) {
-        return ((0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: shouldRenderInPortal, wrap: (wrapChildren) => ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: (0, jsx_runtime_1.jsxs)(re_resizable_1.Resizable, Object.assign({ defaultSize: {
+        return ((0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: shouldRenderInPortal, wrap: (wrapChildren) => ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: (0, jsx_runtime_1.jsxs)(re_resizable_1.Resizable, Object.assign({ as: Component, defaultSize: {
                     height: '100%',
                     width: 'auto',
-                } }, resizeableProps, { className: classes, style: Object.assign({ position: resizableStylePosition }, resizeableProps === null || resizeableProps === void 0 ? void 0 : resizeableProps.style), boundsByDirection: true, bounds: "parent", handleStyles: {
+                } }, resizeableProps, { className: classes, style: Object.assign(Object.assign({ position: resizableStylePosition }, style), resizeableProps === null || resizeableProps === void 0 ? void 0 : resizeableProps.style), boundsByDirection: true, bounds: "parent", handleStyles: {
                     /*
                      * adding a small offset to the handle to make it easier to click
                      * if the content of the drawer is scrollable, most noticeable if not using
@@ -83,9 +85,9 @@ const DrawerComponent = function DrawerComponent({ children, className = '', isE
                     top: false,
                     topLeft: false,
                     topRight: false,
-                }, ref: ref, children: [children, (0, jsx_runtime_1.jsx)(Close, {})] })) }));
+                }, ref: ref }, restProps, htmlAttributes, { children: [children, (0, jsx_runtime_1.jsx)(Close, {})] })) }));
     }
-    return ((0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: shouldRenderInPortal, wrap: (wrapChildren) => ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: classes, ref: ref }, htmlAttributes, { children: [children, (0, jsx_runtime_1.jsx)(Close, {})] })) }));
+    return ((0, jsx_runtime_1.jsx)(conditional_wrap_1.ConditionalWrap, { shouldWrap: shouldRenderInPortal, wrap: (wrapChildren) => ((0, jsx_runtime_1.jsx)(react_1.FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: (0, jsx_runtime_1.jsxs)(Component, Object.assign({ className: classes, style: style, ref: ref }, restProps, htmlAttributes, { children: [children, (0, jsx_runtime_1.jsx)(Close, {})] })) }));
 };
 DrawerComponent.displayName = 'Drawer';
 const DrawerHeader = (_a) => {

package/lib/cjs/drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { FloatingPortal } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { Resizable, type ResizableProps } from 're-resizable';\nimport type React from 'react';\nimport { type ComponentProps, useCallback } from 'react';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { XMarkIconOutline } from '../icons';\nimport { Typography } from '../typography';\n\ntype DrawerPosition = 'left' | 'right';\n\ntype DrawerType = 'overlay' | 'push';\n\ntype DrawerProps = {\n  /** Controls whether the drawer is open (expanded) or closed (collapsed). */\n  isExpanded: boolean;\n\n  /** Callback functions fired when the drawer's expanded state changes. */\n  onExpandedChange?: (expanded: boolean) => void;\n\n  /** Position where the drawer appears on screen. By default, it appears from the left. */\n  position?: DrawerPosition;\n\n  /** How the drawer affects the layout of sibling content. By default, it overlays content. */\n  type?: DrawerType;\n\n  /** Enables horizontal resizing of the drawer, by default it is not resizable. */\n  isResizeable?: boolean;\n\n  /** To use this prop the isResizeable prop must be set to true. For overriding the third party library props: https://github.com/bokuweb/re-resizable */\n  resizeableProps?: ResizableProps;\n\n  /** Whether a close button (X) is displayed in the drawer. */\n  isCloseable?: boolean;\n\n  /** Whether to portal the content */\n  isPortaled?: boolean;\n\n  /** The content to display within the drawer. */\n  children: React.ReactNode;\n\n  /** Additional CSS classes to apply to the drawer container. */\n  className?: string;\n\n  /**\n   * Props to pass to the portal from @floating-ui/react FloatingPortal\n   * @see https://floating-ui.com/docs/floatingportal\n   */\n  portalProps?: ComponentProps<typeof FloatingPortal>;\n};\n\nconst DrawerComponent = function DrawerComponent<\n  T extends React.ElementType = 'div',\n>({\n  children,\n  className = '',\n  isExpanded,\n  onExpandedChange,\n  position = 'left',\n  type = 'overlay',\n  isResizeable = false,\n  resizeableProps,\n  isCloseable = true,\n  isPortaled = false,\n  portalProps = {},\n  htmlAttributes,\n  ref,\n}: PolymorphicCommonProps<T, DrawerProps>) {\n  const setOnExpandedChange = useCallback(() => {\n    if (onExpandedChange) onExpandedChange(!isExpanded);\n  }, [isExpanded, onExpandedChange]);\n\n  const classes = classNames('ndl-drawer', className, {\n    'ndl-drawer-expanded': isExpanded,\n    'ndl-drawer-left': position === 'left',\n    'ndl-drawer-overlay': type === 'overlay',\n    'ndl-drawer-push': type === 'push',\n    'ndl-drawer-right': position === 'right',\n  });\n\n  const resizableStylePosition = type === 'overlay' ? 'absolute' : 'relative';\n  const shouldRenderInPortal = isPortaled && type === 'overlay';\n\n  const Close = () => (\n    <>\n      {isCloseable && (\n        <CleanIconButton\n          className=\"ndl-drawer-close-button\"\n          onClick={setOnExpandedChange}\n          description=\"Close\"\n          size=\"medium\"\n          htmlAttributes={{\n            title: 'Close drawer',\n          }}\n        >\n          <XMarkIconOutline />\n        </CleanIconButton>\n      )}\n    </>\n  );\n\n  if (isResizeable) {\n    return (\n      <ConditionalWrap\n        shouldWrap={shouldRenderInPortal}\n        wrap={(wrapChildren) => (\n          <FloatingPortal preserveTabOrder={true} {...portalProps}>\n            {wrapChildren}\n          </FloatingPortal>\n        )}\n      >\n        <Resizable\n          defaultSize={{\n            height: '100%',\n            width: 'auto',\n          }}\n          {...resizeableProps}\n          className={classes}\n          style={{\n            position: resizableStylePosition,\n            ...resizeableProps?.style,\n          }}\n          boundsByDirection={true}\n          bounds=\"parent\"\n          handleStyles={{\n            /*\n             * adding a small offset to the handle to make it easier to click\n             * if the content of the drawer is scrollable, most noticeable if not using\n             * a mouse on mac or chrome on windows with the fluent scrollbars\n             */\n            right: {\n              right: '-8px',\n            },\n          }}\n          enable={{\n            bottom: false,\n            bottomLeft: false,\n            bottomRight: false,\n            left: position === 'right',\n            right: position === 'left',\n            top: false,\n            topLeft: false,\n            topRight: false,\n          }}\n          ref={ref}\n        >\n          {children}\n          <Close />\n        </Resizable>\n      </ConditionalWrap>\n    );\n  }\n\n  return (\n    <ConditionalWrap\n      shouldWrap={shouldRenderInPortal}\n      wrap={(wrapChildren) => (\n        <FloatingPortal preserveTabOrder={true} {...portalProps}>\n          {wrapChildren}\n        </FloatingPortal>\n      )}\n    >\n      <div className={classes} ref={ref} {...htmlAttributes}>\n        {children}\n        <Close />\n      </div>\n    </ConditionalWrap>\n  );\n};\n\nDrawerComponent.displayName = 'Drawer';\n\ntype DrawerHeaderProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'h5'>;\n};\n\nconst DrawerHeader = ({\n  children,\n  className = '',\n  ...restProps\n}: DrawerHeaderProps) => {\n  const classes = classNames('ndl-drawer-header', className);\n\n  if (typeof children === 'string' || typeof children === 'number') {\n    return (\n      <Typography variant=\"title-3\" {...restProps} className={classes}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return (\n    <div {...restProps} className={classes}>\n      {children}\n    </div>\n  );\n};\n\ntype DrawerActionsProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerActions = ({\n  children,\n  className = '',\n  ...restProps\n}: DrawerActionsProps) => {\n  const classes = classNames('ndl-drawer-actions', className);\n\n  return (\n    <div {...restProps} className={classes}>\n      {children}\n    </div>\n  );\n};\n\ntype DrawerBodyProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerBody = ({\n  children,\n  className = '',\n  ...restProps\n}: DrawerBodyProps) => {\n  const classes = classNames('ndl-drawer-body', className);\n\n  return (\n    <div className=\"ndl-drawer-body-wrapper\">\n      <div {...restProps} className={classes}>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nconst Drawer = Object.assign(DrawerComponent, {\n  Actions: DrawerActions,\n  Body: DrawerBody,\n  Header: DrawerHeader,\n});\n\nexport { Drawer };\n"]}
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { FloatingPortal } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { Resizable, type ResizableProps } from 're-resizable';\nimport type React from 'react';\nimport { type ComponentProps, useCallback } from 'react';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { XMarkIconOutline } from '../icons';\nimport { Typography } from '../typography';\n\ntype DrawerPosition = 'left' | 'right';\n\ntype DrawerType = 'overlay' | 'push';\n\ntype DrawerProps = {\n  /** Controls whether the drawer is open (expanded) or closed (collapsed). */\n  isExpanded: boolean;\n\n  /** Callback functions fired when the drawer's expanded state changes. */\n  onExpandedChange?: (expanded: boolean) => void;\n\n  /** Position where the drawer appears on screen. By default, it appears from the left. */\n  position?: DrawerPosition;\n\n  /** How the drawer affects the layout of sibling content. By default, it overlays content. */\n  type?: DrawerType;\n\n  /** Enables horizontal resizing of the drawer, by default it is not resizable. */\n  isResizeable?: boolean;\n\n  /** To use this prop the isResizeable prop must be set to true. For overriding the third party library props: https://github.com/bokuweb/re-resizable */\n  resizeableProps?: ResizableProps;\n\n  /** Whether a close button (X) is displayed in the drawer. */\n  isCloseable?: boolean;\n\n  /** Whether to portal the content */\n  isPortaled?: boolean;\n\n  /** The content to display within the drawer. */\n  children: React.ReactNode;\n\n  /** Additional CSS classes to apply to the drawer container. */\n  className?: string;\n\n  /**\n   * Props to pass to the portal from @floating-ui/react FloatingPortal\n   * @see https://floating-ui.com/docs/floatingportal\n   */\n  portalProps?: ComponentProps<typeof FloatingPortal>;\n};\n\nconst DrawerComponent = function DrawerComponent<\n  T extends React.ElementType = 'div',\n>({\n  children,\n  className = '',\n  isExpanded,\n  onExpandedChange,\n  position = 'left',\n  type = 'overlay',\n  isResizeable = false,\n  resizeableProps,\n  isCloseable = true,\n  isPortaled = false,\n  portalProps = {},\n  htmlAttributes,\n  style,\n  ref,\n  as,\n  ...restProps\n}: PolymorphicCommonProps<T, DrawerProps>) {\n  const setOnExpandedChange = useCallback(() => {\n    if (onExpandedChange) onExpandedChange(!isExpanded);\n  }, [isExpanded, onExpandedChange]);\n\n  const classes = classNames('ndl-drawer', className, {\n    'ndl-drawer-expanded': isExpanded,\n    'ndl-drawer-left': position === 'left',\n    'ndl-drawer-overlay': type === 'overlay',\n    'ndl-drawer-push': type === 'push',\n    'ndl-drawer-right': position === 'right',\n  });\n\n  const resizableStylePosition = type === 'overlay' ? 'absolute' : 'relative';\n  const shouldRenderInPortal = isPortaled && type === 'overlay';\n  const Component = as ?? 'div';\n\n  const Close = () => (\n    <>\n      {isCloseable && (\n        <CleanIconButton\n          className=\"ndl-drawer-close-button\"\n          onClick={setOnExpandedChange}\n          description=\"Close\"\n          size=\"medium\"\n          htmlAttributes={{\n            title: 'Close drawer',\n          }}\n        >\n          <XMarkIconOutline />\n        </CleanIconButton>\n      )}\n    </>\n  );\n\n  if (isResizeable) {\n    return (\n      <ConditionalWrap\n        shouldWrap={shouldRenderInPortal}\n        wrap={(wrapChildren) => (\n          <FloatingPortal preserveTabOrder={true} {...portalProps}>\n            {wrapChildren}\n          </FloatingPortal>\n        )}\n      >\n        <Resizable\n          as={Component}\n          defaultSize={{\n            height: '100%',\n            width: 'auto',\n          }}\n          {...resizeableProps}\n          className={classes}\n          style={{\n            position: resizableStylePosition,\n            ...style,\n            ...resizeableProps?.style,\n          }}\n          boundsByDirection={true}\n          bounds=\"parent\"\n          handleStyles={{\n            /*\n             * adding a small offset to the handle to make it easier to click\n             * if the content of the drawer is scrollable, most noticeable if not using\n             * a mouse on mac or chrome on windows with the fluent scrollbars\n             */\n            right: {\n              right: '-8px',\n            },\n          }}\n          enable={{\n            bottom: false,\n            bottomLeft: false,\n            bottomRight: false,\n            left: position === 'right',\n            right: position === 'left',\n            top: false,\n            topLeft: false,\n            topRight: false,\n          }}\n          ref={ref}\n          {...restProps}\n          {...htmlAttributes}\n        >\n          {children}\n          <Close />\n        </Resizable>\n      </ConditionalWrap>\n    );\n  }\n\n  return (\n    <ConditionalWrap\n      shouldWrap={shouldRenderInPortal}\n      wrap={(wrapChildren) => (\n        <FloatingPortal preserveTabOrder={true} {...portalProps}>\n          {wrapChildren}\n        </FloatingPortal>\n      )}\n    >\n      <Component\n        className={classes}\n        style={style}\n        ref={ref}\n        {...restProps}\n        {...htmlAttributes}\n      >\n        {children}\n        <Close />\n      </Component>\n    </ConditionalWrap>\n  );\n};\n\nDrawerComponent.displayName = 'Drawer';\n\ntype DrawerHeaderProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'h5'>;\n};\n\nconst DrawerHeader = ({\n  children,\n  className = '',\n  ...restProps\n}: DrawerHeaderProps) => {\n  const classes = classNames('ndl-drawer-header', className);\n\n  if (typeof children === 'string' || typeof children === 'number') {\n    return (\n      <Typography variant=\"title-3\" {...restProps} className={classes}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return (\n    <div {...restProps} className={classes}>\n      {children}\n    </div>\n  );\n};\n\ntype DrawerActionsProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerActions = ({\n  children,\n  className = '',\n  ...restProps\n}: DrawerActionsProps) => {\n  const classes = classNames('ndl-drawer-actions', className);\n\n  return (\n    <div {...restProps} className={classes}>\n      {children}\n    </div>\n  );\n};\n\ntype DrawerBodyProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerBody = ({\n  children,\n  className = '',\n  ...restProps\n}: DrawerBodyProps) => {\n  const classes = classNames('ndl-drawer-body', className);\n\n  return (\n    <div className=\"ndl-drawer-body-wrapper\">\n      <div {...restProps} className={classes}>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nconst Drawer = Object.assign(DrawerComponent, {\n  Actions: DrawerActions,\n  Body: DrawerBody,\n  Header: DrawerHeader,\n});\n\nexport { Drawer };\n"]}

package/lib/esm/date-picker/DatePicker.js

@@ -154,7 +154,22 @@ export const DatePicker = (_a) => {
         }
         setPreSelectedDate(date);
     }, [picker, preSelectedDate, reactDatePickerProps]);
-    const datePickerProps = Object.assign(Object.assign({}, reactDatePickerProps), { onCalendarClose: interceptedOnCalendarClose, onChange: interceptedChange, onMonthChange: handleMonthChange });
+    /**
+     * Intercept onChangeRaw to handle clearing the input
+     * When the user clears the text input, set the date to null
+     */
+    const interceptedOnChangeRaw = useCallback((event) => {
+        var _a;
+        const target = event === null || event === void 0 ? void 0 : event.target;
+        if ((target === null || target === void 0 ? void 0 : target.value) === '') {
+            setPreSelectedDate(null);
+            if (reactDatePickerProps.onChange) {
+                reactDatePickerProps.onChange(null, event);
+            }
+        }
+        (_a = reactDatePickerProps === null || reactDatePickerProps === void 0 ? void 0 : reactDatePickerProps.onChangeRaw) === null || _a === void 0 ? void 0 : _a.call(reactDatePickerProps, event);
+    }, [reactDatePickerProps]);
+    const datePickerProps = Object.assign(Object.assign({}, reactDatePickerProps), { onCalendarClose: interceptedOnCalendarClose, onChange: interceptedChange, onChangeRaw: interceptedOnChangeRaw, onMonthChange: handleMonthChange });
     return (_jsx("div", Object.assign({ className: classes, ref: ref, style: style }, restProps, htmlAttributes, { children: _jsx(ReactDatePicker, Object.assign({ ref: datetimeRef, customInput: _jsx(DatePickerTextInputWrapper, { isDisabled: isDisabled, textInputProps: textInputProps }), customTimeInput: _jsxs("span", { children: [_jsx(Divider, { className: "n-my-4" }), _jsx(TimePicker, Object.assign({ isFluid: true, value: preSelectedDate
                             ? new NeedleTime(preSelectedDate.getHours(), preSelectedDate.getMinutes())
                             : undefined, onChange: handleTimeChange }, timePickerProps, { floatingStrategy: "absolute", isPortaled: false }))] }), disabled: isDisabled, showPopperArrow: false, showMonthYearPicker: picker === 'month', showYearPicker: picker === 'year', shouldCloseOnSelect: picker === 'day' && !((_b = reactDatePickerProps.showTimeInput) !== null && _b !== void 0 ? _b : false), dayClassName: () => 'ndl-datepicker-day', renderCustomHeader: CustomHeader }, datePickerProps, { popperClassName: classNames('ndl-datepicker-popper', reactDatePickerProps.popperClassName), popperProps: Object.assign({ strategy: isInsideDialog ? 'fixed' : 'absolute' }, reactDatePickerProps.popperProps) })) })));

package/lib/esm/date-picker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/date-picker/DatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["// TODO: try to fix as some point\n/* eslint-disable @typescript-eslint/naming-convention */\n\n/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport { format } from 'date-fns';\nimport { useCallback, useRef, useState } from 'react';\nimport ReactDatePicker, {\n  type ReactDatePickerCustomHeaderProps,\n} from 'react-datepicker';\n\nimport type { CommonProps } from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { useIsInsideDialog } from '../dialog/dialog-context';\nimport { Divider } from '../divider';\nimport {\n  ArrowLeftIconOutline,\n  ArrowRightIconOutline,\n  CalendarDaysIconOutline,\n  ChevronDownIconOutline,\n} from '../icons';\nimport { TextInput } from '../text-input';\nimport { NeedleTime, TimePicker, type TimePickerProps } from '../time-picker';\nimport { Typography } from '../typography';\nimport { daysInMonth, getYearsPeriodString } from './utils';\n\ntype DatePickerTextInputWrapperProps = React.ComponentProps<'input'> & {\n  textInputProps?: React.ComponentProps<typeof TextInput>;\n  isDisabled?: boolean;\n  value?: string;\n};\n\n// This wrapper is needed due to react-datepicker injecting html attributes\n// into the custom input component on root level, since we use htmlAttributes\n// we need to help spread them there instead of the root level\nconst DatePickerTextInputWrapper = ({\n  textInputProps,\n  isDisabled,\n  value,\n  placeholder,\n  ...restProps\n}: DatePickerTextInputWrapperProps) => {\n  // deconstruct textInputProps to avoid bugs with react-datepicker injecting props\n  const {\n    placeholder: textInputPlaceholder,\n    htmlAttributes: textInputHtmlAttributes,\n    ref,\n    ...restTextInputProps\n  } = textInputProps ?? {};\n\n  return (\n    <TextInput\n      ref={ref}\n      aria-label=\"Date picker input\"\n      trailingElement={\n        <CalendarDaysIconOutline className=\"ndl-datepicker-icon\" />\n      }\n      value={value}\n      placeholder={placeholder ?? textInputPlaceholder}\n      isDisabled={isDisabled}\n      // react-datepicker injects html attributes into the custom input\n      htmlAttributes={{\n        ...textInputHtmlAttributes,\n        ...restProps,\n      }}\n      {...restTextInputProps}\n    />\n  );\n};\n\n/**\n *\n *\n * Types\n *\n *\n */\n\ntype PickerType = 'day' | 'month' | 'year';\n\n// Define a more flexible type for onChange\ntype DatePickerChangeHandler = (\n  date: Date | null | [Date | null, Date | null] | Date[],\n  event?: React.SyntheticEvent | undefined,\n) => void;\n\ninterface DatePickerProps {\n  /** Props for the embedded `TextInput` component. */\n  textInputProps?: React.ComponentProps<typeof TextInput>;\n  /** Whether the date picker is disabled. */\n  isDisabled?: boolean;\n  /** Props for the embedded `TimePicker` component. */\n  timePickerProps?: TimePickerProps;\n  /** Props forwarded to underlying `react-datepicker` component. */\n  reactDatePickerProps: React.ComponentProps<typeof ReactDatePicker>;\n}\n\nexport const DatePicker = ({\n  reactDatePickerProps,\n  textInputProps,\n  timePickerProps,\n  isDisabled,\n  ref,\n  className,\n  style,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', DatePickerProps>) => {\n  const classes = classNames(`ndl-datepicker`, className, {});\n  const datetimeRef = useRef<ReactDatePicker>(null);\n  const [picker, setPicker] = useState<PickerType>('day');\n  const [preSelectedDate, setPreSelectedDate] = useState<Date | null>(\n    (reactDatePickerProps.selected as Date | null) ||\n      (reactDatePickerProps.startDate as Date | null),\n  );\n\n  const isInsideDialog = useIsInsideDialog();\n\n  const headerAction = useCallback(\n    (action: PickerType) => {\n      setPicker(picker === action ? 'day' : action);\n    },\n    [picker],\n  );\n\n  const CustomHeader = useCallback(\n    (props: ReactDatePickerCustomHeaderProps) => {\n      const {\n        decreaseMonth,\n        increaseMonth,\n        increaseYear,\n        decreaseYear,\n        nextMonthButtonDisabled,\n        nextYearButtonDisabled,\n        prevMonthButtonDisabled,\n        prevYearButtonDisabled,\n      } = props;\n\n      const prevCallback = picker === 'year' ? decreaseYear : decreaseMonth;\n      const nextCallback = picker === 'year' ? increaseYear : increaseMonth;\n      const prevDisabled =\n        picker === 'year' ? prevYearButtonDisabled : prevMonthButtonDisabled;\n      const nextDisabled =\n        picker === 'year' ? nextYearButtonDisabled : nextMonthButtonDisabled;\n\n      return (\n        <div className=\"ndl-datepicker-header\">\n          <div className=\"ndl-datepicker-selects\">\n            {picker !== 'year' && (\n              <button\n                aria-label={`${picker === 'month' ? 'Close' : 'Open'} month picker`}\n                aria-pressed={picker === 'month'}\n                onClick={() => headerAction('month')}\n              >\n                <div className=\"n-flex n-items-center n-gap-token-4\">\n                  <Typography variant=\"subheading-small\">\n                    {format(props.date, 'MMM')}\n                  </Typography>\n                  <ChevronDownIconOutline\n                    className={classNames('ndl-datepicker-chevron', {\n                      'n-rotate-180': picker === 'month',\n                    })}\n                    aria-label=\"Chevron icon\"\n                  />\n                </div>\n              </button>\n            )}\n            {picker !== 'month' && (\n              <button\n                aria-label={`${picker === 'year' ? 'Close' : 'Open'} year picker`}\n                onClick={() => headerAction('year')}\n              >\n                <div className=\"n-flex n-items-center n-gap-token-4\">\n                  <Typography variant=\"subheading-small\">\n                    {picker === 'year'\n                      ? getYearsPeriodString(\n                          props.date,\n                          reactDatePickerProps?.yearItemNumber,\n                        )\n                      : format(props.date, 'yyyy')}\n                  </Typography>\n                  <ChevronDownIconOutline\n                    className={classNames('ndl-datepicker-chevron', {\n                      'n-rotate-180': picker === 'year',\n                    })}\n                    aria-label=\"Chevron icon\"\n                  />\n                </div>\n              </button>\n            )}\n          </div>\n          {picker !== 'month' && (\n            <div className=\"n-flex n-justify-center n-gap-token-16\">\n              <CleanIconButton\n                description={\n                  picker === 'year' ? 'Previous period' : 'Previous month'\n                }\n                onClick={prevCallback}\n                isDisabled={prevDisabled}\n                className=\"n-text-neutral-text-weak\"\n                size=\"small\"\n              >\n                <ArrowLeftIconOutline />\n              </CleanIconButton>\n              <CleanIconButton\n                description={picker === 'year' ? 'Next period' : 'Next month'}\n                onClick={nextCallback}\n                isDisabled={nextDisabled}\n                className=\"n-text-neutral-text-weak\"\n                size=\"small\"\n              >\n                <ArrowRightIconOutline />\n              </CleanIconButton>\n            </div>\n          )}\n        </div>\n      );\n    },\n    [picker, headerAction, reactDatePickerProps?.yearItemNumber],\n  );\n\n  const handleTimeChange = (newTime: NeedleTime) => {\n    if (\n      reactDatePickerProps.selectsRange ||\n      reactDatePickerProps.selectsMultiple\n    ) {\n      // this is consistent with the behavior of react-datepicker\n      return;\n    }\n\n    if (!preSelectedDate) return;\n\n    const newDate = new Date(preSelectedDate);\n    newDate.setHours(newTime.hour, newTime.minute, 0, 0);\n    setPreSelectedDate(newDate);\n\n    if (reactDatePickerProps.onChange) {\n      // For single date selection\n      reactDatePickerProps.onChange(newDate, undefined);\n    }\n  };\n\n  /**\n   * Intercept onChange so we can work with\n   * Month and Year pickers\n   */\n  const interceptedChange: DatePickerChangeHandler = useCallback(\n    (\n      date: Date | null | [Date | null, Date | null] | Date[],\n      event?: React.SyntheticEvent,\n    ) => {\n      if (picker !== 'day') {\n        // setTimeout to prevent picker change before the handleMonthChange logic\n        setTimeout(() => {\n          setPicker('day');\n        });\n      } else if (picker === 'day') {\n        if (date instanceof Date) {\n          setPreSelectedDate(date);\n        } else if (\n          Array.isArray(date) &&\n          date.length > 0 &&\n          date[0] instanceof Date\n        ) {\n          setPreSelectedDate(date[0]);\n        } else if (date === null) {\n          setPreSelectedDate(null);\n        }\n\n        if (reactDatePickerProps.onChange && date !== null) {\n          (reactDatePickerProps.onChange as DatePickerChangeHandler)(\n            date,\n            event,\n          );\n        }\n      }\n    },\n    [picker, reactDatePickerProps],\n  );\n\n  /**\n   * Intercept onCalendarClose so we can\n   * switch to \"day\" picker if we close on \"month\" or \"year\"\n   * view\n   */\n  const interceptedOnCalendarClose = useCallback(() => {\n    if (picker !== 'day') {\n      setPicker('day');\n    }\n    reactDatePickerProps?.onCalendarClose?.();\n  }, [picker, reactDatePickerProps]);\n\n  const handleMonthChange = useCallback(\n    (date: Date) => {\n      if (picker === 'month') {\n        const selectedDay = preSelectedDate?.getDate() ?? 1;\n        const daysInNewMonth = daysInMonth(date.getMonth(), date.getFullYear());\n        date.setDate(Math.min(selectedDay, daysInNewMonth));\n        reactDatePickerProps?.onMonthChange?.(date);\n      } else if (picker === 'year') {\n        const selectedDay = preSelectedDate?.getDate() ?? 1;\n        const selectedMonth = preSelectedDate?.getMonth() ?? 0;\n        const daysInNewMonth = daysInMonth(selectedMonth, date.getFullYear());\n        date.setMonth(selectedMonth, Math.min(selectedDay, daysInNewMonth));\n        reactDatePickerProps?.onMonthChange?.(date);\n      }\n      setPreSelectedDate(date);\n    },\n    [picker, preSelectedDate, reactDatePickerProps],\n  );\n\n  const datePickerProps = {\n    ...reactDatePickerProps,\n    onCalendarClose: interceptedOnCalendarClose,\n    onChange: interceptedChange,\n    onMonthChange: handleMonthChange,\n  };\n\n  return (\n    <div\n      className={classes}\n      ref={ref}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <ReactDatePicker\n        ref={datetimeRef}\n        customInput={\n          <DatePickerTextInputWrapper\n            isDisabled={isDisabled}\n            textInputProps={textInputProps}\n          />\n        }\n        customTimeInput={\n          <span>\n            <Divider className=\"n-my-4\" />\n            <TimePicker\n              isFluid\n              value={\n                preSelectedDate\n                  ? new NeedleTime(\n                      preSelectedDate.getHours(),\n                      preSelectedDate.getMinutes(),\n                    )\n                  : undefined\n              }\n              onChange={handleTimeChange}\n              {...timePickerProps}\n              floatingStrategy=\"absolute\"\n              isPortaled={false}\n            />\n          </span>\n        }\n        disabled={isDisabled}\n        showPopperArrow={false}\n        showMonthYearPicker={picker === 'month'}\n        showYearPicker={picker === 'year'}\n        shouldCloseOnSelect={\n          picker === 'day' && !(reactDatePickerProps.showTimeInput ?? false)\n        }\n        dayClassName={() => 'ndl-datepicker-day'}\n        renderCustomHeader={CustomHeader}\n        {...datePickerProps}\n        popperClassName={classNames(\n          'ndl-datepicker-popper',\n          reactDatePickerProps.popperClassName,\n        )}\n        popperProps={{\n          strategy: isInsideDialog ? 'fixed' : 'absolute',\n          ...reactDatePickerProps.popperProps,\n        }}\n      />\n    </div>\n  );\n};\n"]}
+{"version":3,"file":"DatePicker.js","sourceRoot":"","sources":["../../../src/date-picker/DatePicker.tsx"],"names":[],"mappings":"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","sourcesContent":["// TODO: try to fix as some point\n/* eslint-disable @typescript-eslint/naming-convention */\n\n/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport classNames from 'classnames';\nimport { format } from 'date-fns';\nimport { useCallback, useRef, useState } from 'react';\nimport ReactDatePicker, {\n  type ReactDatePickerCustomHeaderProps,\n} from 'react-datepicker';\n\nimport type { CommonProps } from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { useIsInsideDialog } from '../dialog/dialog-context';\nimport { Divider } from '../divider';\nimport {\n  ArrowLeftIconOutline,\n  ArrowRightIconOutline,\n  CalendarDaysIconOutline,\n  ChevronDownIconOutline,\n} from '../icons';\nimport { TextInput } from '../text-input';\nimport { NeedleTime, TimePicker, type TimePickerProps } from '../time-picker';\nimport { Typography } from '../typography';\nimport { daysInMonth, getYearsPeriodString } from './utils';\n\ntype DatePickerTextInputWrapperProps = React.ComponentProps<'input'> & {\n  textInputProps?: React.ComponentProps<typeof TextInput>;\n  isDisabled?: boolean;\n  value?: string;\n};\n\n// This wrapper is needed due to react-datepicker injecting html attributes\n// into the custom input component on root level, since we use htmlAttributes\n// we need to help spread them there instead of the root level\nconst DatePickerTextInputWrapper = ({\n  textInputProps,\n  isDisabled,\n  value,\n  placeholder,\n  ...restProps\n}: DatePickerTextInputWrapperProps) => {\n  // deconstruct textInputProps to avoid bugs with react-datepicker injecting props\n  const {\n    placeholder: textInputPlaceholder,\n    htmlAttributes: textInputHtmlAttributes,\n    ref,\n    ...restTextInputProps\n  } = textInputProps ?? {};\n\n  return (\n    <TextInput\n      ref={ref}\n      aria-label=\"Date picker input\"\n      trailingElement={\n        <CalendarDaysIconOutline className=\"ndl-datepicker-icon\" />\n      }\n      value={value}\n      placeholder={placeholder ?? textInputPlaceholder}\n      isDisabled={isDisabled}\n      // react-datepicker injects html attributes into the custom input\n      htmlAttributes={{\n        ...textInputHtmlAttributes,\n        ...restProps,\n      }}\n      {...restTextInputProps}\n    />\n  );\n};\n\n/**\n *\n *\n * Types\n *\n *\n */\n\ntype PickerType = 'day' | 'month' | 'year';\n\n// Define a more flexible type for onChange\ntype DatePickerChangeHandler = (\n  date: Date | null | [Date | null, Date | null] | Date[],\n  event?: React.SyntheticEvent | undefined,\n) => void;\n\ninterface DatePickerProps {\n  /** Props for the embedded `TextInput` component. */\n  textInputProps?: React.ComponentProps<typeof TextInput>;\n  /** Whether the date picker is disabled. */\n  isDisabled?: boolean;\n  /** Props for the embedded `TimePicker` component. */\n  timePickerProps?: TimePickerProps;\n  /** Props forwarded to underlying `react-datepicker` component. */\n  reactDatePickerProps: React.ComponentProps<typeof ReactDatePicker>;\n}\n\nexport const DatePicker = ({\n  reactDatePickerProps,\n  textInputProps,\n  timePickerProps,\n  isDisabled,\n  ref,\n  className,\n  style,\n  htmlAttributes,\n  ...restProps\n}: CommonProps<'div', DatePickerProps>) => {\n  const classes = classNames(`ndl-datepicker`, className, {});\n  const datetimeRef = useRef<ReactDatePicker>(null);\n  const [picker, setPicker] = useState<PickerType>('day');\n  const [preSelectedDate, setPreSelectedDate] = useState<Date | null>(\n    (reactDatePickerProps.selected as Date | null) ||\n      (reactDatePickerProps.startDate as Date | null),\n  );\n\n  const isInsideDialog = useIsInsideDialog();\n\n  const headerAction = useCallback(\n    (action: PickerType) => {\n      setPicker(picker === action ? 'day' : action);\n    },\n    [picker],\n  );\n\n  const CustomHeader = useCallback(\n    (props: ReactDatePickerCustomHeaderProps) => {\n      const {\n        decreaseMonth,\n        increaseMonth,\n        increaseYear,\n        decreaseYear,\n        nextMonthButtonDisabled,\n        nextYearButtonDisabled,\n        prevMonthButtonDisabled,\n        prevYearButtonDisabled,\n      } = props;\n\n      const prevCallback = picker === 'year' ? decreaseYear : decreaseMonth;\n      const nextCallback = picker === 'year' ? increaseYear : increaseMonth;\n      const prevDisabled =\n        picker === 'year' ? prevYearButtonDisabled : prevMonthButtonDisabled;\n      const nextDisabled =\n        picker === 'year' ? nextYearButtonDisabled : nextMonthButtonDisabled;\n\n      return (\n        <div className=\"ndl-datepicker-header\">\n          <div className=\"ndl-datepicker-selects\">\n            {picker !== 'year' && (\n              <button\n                aria-label={`${picker === 'month' ? 'Close' : 'Open'} month picker`}\n                aria-pressed={picker === 'month'}\n                onClick={() => headerAction('month')}\n              >\n                <div className=\"n-flex n-items-center n-gap-token-4\">\n                  <Typography variant=\"subheading-small\">\n                    {format(props.date, 'MMM')}\n                  </Typography>\n                  <ChevronDownIconOutline\n                    className={classNames('ndl-datepicker-chevron', {\n                      'n-rotate-180': picker === 'month',\n                    })}\n                    aria-label=\"Chevron icon\"\n                  />\n                </div>\n              </button>\n            )}\n            {picker !== 'month' && (\n              <button\n                aria-label={`${picker === 'year' ? 'Close' : 'Open'} year picker`}\n                onClick={() => headerAction('year')}\n              >\n                <div className=\"n-flex n-items-center n-gap-token-4\">\n                  <Typography variant=\"subheading-small\">\n                    {picker === 'year'\n                      ? getYearsPeriodString(\n                          props.date,\n                          reactDatePickerProps?.yearItemNumber,\n                        )\n                      : format(props.date, 'yyyy')}\n                  </Typography>\n                  <ChevronDownIconOutline\n                    className={classNames('ndl-datepicker-chevron', {\n                      'n-rotate-180': picker === 'year',\n                    })}\n                    aria-label=\"Chevron icon\"\n                  />\n                </div>\n              </button>\n            )}\n          </div>\n          {picker !== 'month' && (\n            <div className=\"n-flex n-justify-center n-gap-token-16\">\n              <CleanIconButton\n                description={\n                  picker === 'year' ? 'Previous period' : 'Previous month'\n                }\n                onClick={prevCallback}\n                isDisabled={prevDisabled}\n                className=\"n-text-neutral-text-weak\"\n                size=\"small\"\n              >\n                <ArrowLeftIconOutline />\n              </CleanIconButton>\n              <CleanIconButton\n                description={picker === 'year' ? 'Next period' : 'Next month'}\n                onClick={nextCallback}\n                isDisabled={nextDisabled}\n                className=\"n-text-neutral-text-weak\"\n                size=\"small\"\n              >\n                <ArrowRightIconOutline />\n              </CleanIconButton>\n            </div>\n          )}\n        </div>\n      );\n    },\n    [picker, headerAction, reactDatePickerProps?.yearItemNumber],\n  );\n\n  const handleTimeChange = (newTime: NeedleTime) => {\n    if (\n      reactDatePickerProps.selectsRange ||\n      reactDatePickerProps.selectsMultiple\n    ) {\n      // this is consistent with the behavior of react-datepicker\n      return;\n    }\n\n    if (!preSelectedDate) return;\n\n    const newDate = new Date(preSelectedDate);\n    newDate.setHours(newTime.hour, newTime.minute, 0, 0);\n    setPreSelectedDate(newDate);\n\n    if (reactDatePickerProps.onChange) {\n      // For single date selection\n      reactDatePickerProps.onChange(newDate, undefined);\n    }\n  };\n\n  /**\n   * Intercept onChange so we can work with\n   * Month and Year pickers\n   */\n  const interceptedChange: DatePickerChangeHandler = useCallback(\n    (\n      date: Date | null | [Date | null, Date | null] | Date[],\n      event?: React.SyntheticEvent,\n    ) => {\n      if (picker !== 'day') {\n        // setTimeout to prevent picker change before the handleMonthChange logic\n        setTimeout(() => {\n          setPicker('day');\n        });\n      } else if (picker === 'day') {\n        if (date instanceof Date) {\n          setPreSelectedDate(date);\n        } else if (\n          Array.isArray(date) &&\n          date.length > 0 &&\n          date[0] instanceof Date\n        ) {\n          setPreSelectedDate(date[0]);\n        } else if (date === null) {\n          setPreSelectedDate(null);\n        }\n\n        if (reactDatePickerProps.onChange && date !== null) {\n          (reactDatePickerProps.onChange as DatePickerChangeHandler)(\n            date,\n            event,\n          );\n        }\n      }\n    },\n    [picker, reactDatePickerProps],\n  );\n\n  /**\n   * Intercept onCalendarClose so we can\n   * switch to \"day\" picker if we close on \"month\" or \"year\"\n   * view\n   */\n  const interceptedOnCalendarClose = useCallback(() => {\n    if (picker !== 'day') {\n      setPicker('day');\n    }\n    reactDatePickerProps?.onCalendarClose?.();\n  }, [picker, reactDatePickerProps]);\n\n  const handleMonthChange = useCallback(\n    (date: Date) => {\n      if (picker === 'month') {\n        const selectedDay = preSelectedDate?.getDate() ?? 1;\n        const daysInNewMonth = daysInMonth(date.getMonth(), date.getFullYear());\n        date.setDate(Math.min(selectedDay, daysInNewMonth));\n        reactDatePickerProps?.onMonthChange?.(date);\n      } else if (picker === 'year') {\n        const selectedDay = preSelectedDate?.getDate() ?? 1;\n        const selectedMonth = preSelectedDate?.getMonth() ?? 0;\n        const daysInNewMonth = daysInMonth(selectedMonth, date.getFullYear());\n        date.setMonth(selectedMonth, Math.min(selectedDay, daysInNewMonth));\n        reactDatePickerProps?.onMonthChange?.(date);\n      }\n      setPreSelectedDate(date);\n    },\n    [picker, preSelectedDate, reactDatePickerProps],\n  );\n\n  /**\n   * Intercept onChangeRaw to handle clearing the input\n   * When the user clears the text input, set the date to null\n   */\n  const interceptedOnChangeRaw = useCallback(\n    (\n      event?:\n        | React.KeyboardEvent<HTMLElement>\n        | React.MouseEvent<HTMLElement, MouseEvent>,\n    ) => {\n      const target = event?.target as HTMLInputElement | undefined;\n      if (target?.value === '') {\n        setPreSelectedDate(null);\n        if (reactDatePickerProps.onChange) {\n          (reactDatePickerProps.onChange as DatePickerChangeHandler)(\n            null,\n            event,\n          );\n        }\n      }\n      reactDatePickerProps?.onChangeRaw?.(event);\n    },\n    [reactDatePickerProps],\n  );\n\n  const datePickerProps = {\n    ...reactDatePickerProps,\n    onCalendarClose: interceptedOnCalendarClose,\n    onChange: interceptedChange,\n    onChangeRaw: interceptedOnChangeRaw,\n    onMonthChange: handleMonthChange,\n  };\n\n  return (\n    <div\n      className={classes}\n      ref={ref}\n      style={style}\n      {...restProps}\n      {...htmlAttributes}\n    >\n      <ReactDatePicker\n        ref={datetimeRef}\n        customInput={\n          <DatePickerTextInputWrapper\n            isDisabled={isDisabled}\n            textInputProps={textInputProps}\n          />\n        }\n        customTimeInput={\n          <span>\n            <Divider className=\"n-my-4\" />\n            <TimePicker\n              isFluid\n              value={\n                preSelectedDate\n                  ? new NeedleTime(\n                      preSelectedDate.getHours(),\n                      preSelectedDate.getMinutes(),\n                    )\n                  : undefined\n              }\n              onChange={handleTimeChange}\n              {...timePickerProps}\n              floatingStrategy=\"absolute\"\n              isPortaled={false}\n            />\n          </span>\n        }\n        disabled={isDisabled}\n        showPopperArrow={false}\n        showMonthYearPicker={picker === 'month'}\n        showYearPicker={picker === 'year'}\n        shouldCloseOnSelect={\n          picker === 'day' && !(reactDatePickerProps.showTimeInput ?? false)\n        }\n        dayClassName={() => 'ndl-datepicker-day'}\n        renderCustomHeader={CustomHeader}\n        {...datePickerProps}\n        popperClassName={classNames(\n          'ndl-datepicker-popper',\n          reactDatePickerProps.popperClassName,\n        )}\n        popperProps={{\n          strategy: isInsideDialog ? 'fixed' : 'absolute',\n          ...reactDatePickerProps.popperProps,\n        }}\n      />\n    </div>\n  );\n};\n"]}

package/lib/esm/drawer/Drawer.js

@@ -38,7 +38,8 @@ import { CleanIconButton } from '../clean-icon-button';
 import { ConditionalWrap } from '../conditional-wrap';
 import { XMarkIconOutline } from '../icons';
 import { Typography } from '../typography';
-const DrawerComponent = function DrawerComponent({ children, className = '', isExpanded, onExpandedChange, position = 'left', type = 'overlay', isResizeable = false, resizeableProps, isCloseable = true, isPortaled = false, portalProps = {}, htmlAttributes, ref, }) {
+const DrawerComponent = function DrawerComponent(_a) {
+    var { children, className = '', isExpanded, onExpandedChange, position = 'left', type = 'overlay', isResizeable = false, resizeableProps, isCloseable = true, isPortaled = false, portalProps = {}, htmlAttributes, style, ref, as } = _a, restProps = __rest(_a, ["children", "className", "isExpanded", "onExpandedChange", "position", "type", "isResizeable", "resizeableProps", "isCloseable", "isPortaled", "portalProps", "htmlAttributes", "style", "ref", "as"]);
     const setOnExpandedChange = useCallback(() => {
         if (onExpandedChange)
             onExpandedChange(!isExpanded);
@@ -52,14 +53,15 @@ const DrawerComponent = function DrawerComponent({ children, className = '', isE
     });
     const resizableStylePosition = type === 'overlay' ? 'absolute' : 'relative';
     const shouldRenderInPortal = isPortaled && type === 'overlay';
+    const Component = as !== null && as !== void 0 ? as : 'div';
     const Close = () => (_jsx(_Fragment, { children: isCloseable && (_jsx(CleanIconButton, { className: "ndl-drawer-close-button", onClick: setOnExpandedChange, description: "Close", size: "medium", htmlAttributes: {
                 title: 'Close drawer',
             }, children: _jsx(XMarkIconOutline, {}) })) }));
     if (isResizeable) {
-        return (_jsx(ConditionalWrap, { shouldWrap: shouldRenderInPortal, wrap: (wrapChildren) => (_jsx(FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: _jsxs(Resizable, Object.assign({ defaultSize: {
+        return (_jsx(ConditionalWrap, { shouldWrap: shouldRenderInPortal, wrap: (wrapChildren) => (_jsx(FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: _jsxs(Resizable, Object.assign({ as: Component, defaultSize: {
                     height: '100%',
                     width: 'auto',
-                } }, resizeableProps, { className: classes, style: Object.assign({ position: resizableStylePosition }, resizeableProps === null || resizeableProps === void 0 ? void 0 : resizeableProps.style), boundsByDirection: true, bounds: "parent", handleStyles: {
+                } }, resizeableProps, { className: classes, style: Object.assign(Object.assign({ position: resizableStylePosition }, style), resizeableProps === null || resizeableProps === void 0 ? void 0 : resizeableProps.style), boundsByDirection: true, bounds: "parent", handleStyles: {
                     /*
                      * adding a small offset to the handle to make it easier to click
                      * if the content of the drawer is scrollable, most noticeable if not using
@@ -77,9 +79,9 @@ const DrawerComponent = function DrawerComponent({ children, className = '', isE
                     top: false,
                     topLeft: false,
                     topRight: false,
-                }, ref: ref, children: [children, _jsx(Close, {})] })) }));
+                }, ref: ref }, restProps, htmlAttributes, { children: [children, _jsx(Close, {})] })) }));
     }
-    return (_jsx(ConditionalWrap, { shouldWrap: shouldRenderInPortal, wrap: (wrapChildren) => (_jsx(FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: _jsxs("div", Object.assign({ className: classes, ref: ref }, htmlAttributes, { children: [children, _jsx(Close, {})] })) }));
+    return (_jsx(ConditionalWrap, { shouldWrap: shouldRenderInPortal, wrap: (wrapChildren) => (_jsx(FloatingPortal, Object.assign({ preserveTabOrder: true }, portalProps, { children: wrapChildren }))), children: _jsxs(Component, Object.assign({ className: classes, style: style, ref: ref }, restProps, htmlAttributes, { children: [children, _jsx(Close, {})] })) }));
 };
 DrawerComponent.displayName = 'Drawer';
 const DrawerHeader = (_a) => {

package/lib/esm/drawer/Drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { FloatingPortal } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { Resizable, type ResizableProps } from 're-resizable';\nimport type React from 'react';\nimport { type ComponentProps, useCallback } from 'react';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { XMarkIconOutline } from '../icons';\nimport { Typography } from '../typography';\n\ntype DrawerPosition = 'left' | 'right';\n\ntype DrawerType = 'overlay' | 'push';\n\ntype DrawerProps = {\n  /** Controls whether the drawer is open (expanded) or closed (collapsed). */\n  isExpanded: boolean;\n\n  /** Callback functions fired when the drawer's expanded state changes. */\n  onExpandedChange?: (expanded: boolean) => void;\n\n  /** Position where the drawer appears on screen. By default, it appears from the left. */\n  position?: DrawerPosition;\n\n  /** How the drawer affects the layout of sibling content. By default, it overlays content. */\n  type?: DrawerType;\n\n  /** Enables horizontal resizing of the drawer, by default it is not resizable. */\n  isResizeable?: boolean;\n\n  /** To use this prop the isResizeable prop must be set to true. For overriding the third party library props: https://github.com/bokuweb/re-resizable */\n  resizeableProps?: ResizableProps;\n\n  /** Whether a close button (X) is displayed in the drawer. */\n  isCloseable?: boolean;\n\n  /** Whether to portal the content */\n  isPortaled?: boolean;\n\n  /** The content to display within the drawer. */\n  children: React.ReactNode;\n\n  /** Additional CSS classes to apply to the drawer container. */\n  className?: string;\n\n  /**\n   * Props to pass to the portal from @floating-ui/react FloatingPortal\n   * @see https://floating-ui.com/docs/floatingportal\n   */\n  portalProps?: ComponentProps<typeof FloatingPortal>;\n};\n\nconst DrawerComponent = function DrawerComponent<\n  T extends React.ElementType = 'div',\n>({\n  children,\n  className = '',\n  isExpanded,\n  onExpandedChange,\n  position = 'left',\n  type = 'overlay',\n  isResizeable = false,\n  resizeableProps,\n  isCloseable = true,\n  isPortaled = false,\n  portalProps = {},\n  htmlAttributes,\n  ref,\n}: PolymorphicCommonProps<T, DrawerProps>) {\n  const setOnExpandedChange = useCallback(() => {\n    if (onExpandedChange) onExpandedChange(!isExpanded);\n  }, [isExpanded, onExpandedChange]);\n\n  const classes = classNames('ndl-drawer', className, {\n    'ndl-drawer-expanded': isExpanded,\n    'ndl-drawer-left': position === 'left',\n    'ndl-drawer-overlay': type === 'overlay',\n    'ndl-drawer-push': type === 'push',\n    'ndl-drawer-right': position === 'right',\n  });\n\n  const resizableStylePosition = type === 'overlay' ? 'absolute' : 'relative';\n  const shouldRenderInPortal = isPortaled && type === 'overlay';\n\n  const Close = () => (\n    <>\n      {isCloseable && (\n        <CleanIconButton\n          className=\"ndl-drawer-close-button\"\n          onClick={setOnExpandedChange}\n          description=\"Close\"\n          size=\"medium\"\n          htmlAttributes={{\n            title: 'Close drawer',\n          }}\n        >\n          <XMarkIconOutline />\n        </CleanIconButton>\n      )}\n    </>\n  );\n\n  if (isResizeable) {\n    return (\n      <ConditionalWrap\n        shouldWrap={shouldRenderInPortal}\n        wrap={(wrapChildren) => (\n          <FloatingPortal preserveTabOrder={true} {...portalProps}>\n            {wrapChildren}\n          </FloatingPortal>\n        )}\n      >\n        <Resizable\n          defaultSize={{\n            height: '100%',\n            width: 'auto',\n          }}\n          {...resizeableProps}\n          className={classes}\n          style={{\n            position: resizableStylePosition,\n            ...resizeableProps?.style,\n          }}\n          boundsByDirection={true}\n          bounds=\"parent\"\n          handleStyles={{\n            /*\n             * adding a small offset to the handle to make it easier to click\n             * if the content of the drawer is scrollable, most noticeable if not using\n             * a mouse on mac or chrome on windows with the fluent scrollbars\n             */\n            right: {\n              right: '-8px',\n            },\n          }}\n          enable={{\n            bottom: false,\n            bottomLeft: false,\n            bottomRight: false,\n            left: position === 'right',\n            right: position === 'left',\n            top: false,\n            topLeft: false,\n            topRight: false,\n          }}\n          ref={ref}\n        >\n          {children}\n          <Close />\n        </Resizable>\n      </ConditionalWrap>\n    );\n  }\n\n  return (\n    <ConditionalWrap\n      shouldWrap={shouldRenderInPortal}\n      wrap={(wrapChildren) => (\n        <FloatingPortal preserveTabOrder={true} {...portalProps}>\n          {wrapChildren}\n        </FloatingPortal>\n      )}\n    >\n      <div className={classes} ref={ref} {...htmlAttributes}>\n        {children}\n        <Close />\n      </div>\n    </ConditionalWrap>\n  );\n};\n\nDrawerComponent.displayName = 'Drawer';\n\ntype DrawerHeaderProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'h5'>;\n};\n\nconst DrawerHeader = ({\n  children,\n  className = '',\n  ...restProps\n}: DrawerHeaderProps) => {\n  const classes = classNames('ndl-drawer-header', className);\n\n  if (typeof children === 'string' || typeof children === 'number') {\n    return (\n      <Typography variant=\"title-3\" {...restProps} className={classes}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return (\n    <div {...restProps} className={classes}>\n      {children}\n    </div>\n  );\n};\n\ntype DrawerActionsProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerActions = ({\n  children,\n  className = '',\n  ...restProps\n}: DrawerActionsProps) => {\n  const classes = classNames('ndl-drawer-actions', className);\n\n  return (\n    <div {...restProps} className={classes}>\n      {children}\n    </div>\n  );\n};\n\ntype DrawerBodyProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerBody = ({\n  children,\n  className = '',\n  ...restProps\n}: DrawerBodyProps) => {\n  const classes = classNames('ndl-drawer-body', className);\n\n  return (\n    <div className=\"ndl-drawer-body-wrapper\">\n      <div {...restProps} className={classes}>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nconst Drawer = Object.assign(DrawerComponent, {\n  Actions: DrawerActions,\n  Body: DrawerBody,\n  Header: DrawerHeader,\n});\n\nexport { Drawer };\n"]}
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n *\n *  Copyright (c) \"Neo4j\"\n *  Neo4j Sweden AB [http://neo4j.com]\n *\n *  This file is part of Neo4j.\n *\n *  Neo4j is free software: you can redistribute it and/or modify\n *  it under the terms of the GNU General Public License as published by\n *  the Free Software Foundation, either version 3 of the License, or\n *  (at your option) any later version.\n *\n *  This program is distributed in the hope that it will be useful,\n *  but WITHOUT ANY WARRANTY; without even the implied warranty of\n *  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n *  GNU General Public License for more details.\n *\n *  You should have received a copy of the GNU General Public License\n *  along with this program.  If not, see <http://www.gnu.org/licenses/>.\n */\nimport { FloatingPortal } from '@floating-ui/react';\nimport classNames from 'classnames';\nimport { Resizable, type ResizableProps } from 're-resizable';\nimport type React from 'react';\nimport { type ComponentProps, useCallback } from 'react';\n\nimport {\n  type HtmlAttributes,\n  type PolymorphicCommonProps,\n} from '../_common/types';\nimport { CleanIconButton } from '../clean-icon-button';\nimport { ConditionalWrap } from '../conditional-wrap';\nimport { XMarkIconOutline } from '../icons';\nimport { Typography } from '../typography';\n\ntype DrawerPosition = 'left' | 'right';\n\ntype DrawerType = 'overlay' | 'push';\n\ntype DrawerProps = {\n  /** Controls whether the drawer is open (expanded) or closed (collapsed). */\n  isExpanded: boolean;\n\n  /** Callback functions fired when the drawer's expanded state changes. */\n  onExpandedChange?: (expanded: boolean) => void;\n\n  /** Position where the drawer appears on screen. By default, it appears from the left. */\n  position?: DrawerPosition;\n\n  /** How the drawer affects the layout of sibling content. By default, it overlays content. */\n  type?: DrawerType;\n\n  /** Enables horizontal resizing of the drawer, by default it is not resizable. */\n  isResizeable?: boolean;\n\n  /** To use this prop the isResizeable prop must be set to true. For overriding the third party library props: https://github.com/bokuweb/re-resizable */\n  resizeableProps?: ResizableProps;\n\n  /** Whether a close button (X) is displayed in the drawer. */\n  isCloseable?: boolean;\n\n  /** Whether to portal the content */\n  isPortaled?: boolean;\n\n  /** The content to display within the drawer. */\n  children: React.ReactNode;\n\n  /** Additional CSS classes to apply to the drawer container. */\n  className?: string;\n\n  /**\n   * Props to pass to the portal from @floating-ui/react FloatingPortal\n   * @see https://floating-ui.com/docs/floatingportal\n   */\n  portalProps?: ComponentProps<typeof FloatingPortal>;\n};\n\nconst DrawerComponent = function DrawerComponent<\n  T extends React.ElementType = 'div',\n>({\n  children,\n  className = '',\n  isExpanded,\n  onExpandedChange,\n  position = 'left',\n  type = 'overlay',\n  isResizeable = false,\n  resizeableProps,\n  isCloseable = true,\n  isPortaled = false,\n  portalProps = {},\n  htmlAttributes,\n  style,\n  ref,\n  as,\n  ...restProps\n}: PolymorphicCommonProps<T, DrawerProps>) {\n  const setOnExpandedChange = useCallback(() => {\n    if (onExpandedChange) onExpandedChange(!isExpanded);\n  }, [isExpanded, onExpandedChange]);\n\n  const classes = classNames('ndl-drawer', className, {\n    'ndl-drawer-expanded': isExpanded,\n    'ndl-drawer-left': position === 'left',\n    'ndl-drawer-overlay': type === 'overlay',\n    'ndl-drawer-push': type === 'push',\n    'ndl-drawer-right': position === 'right',\n  });\n\n  const resizableStylePosition = type === 'overlay' ? 'absolute' : 'relative';\n  const shouldRenderInPortal = isPortaled && type === 'overlay';\n  const Component = as ?? 'div';\n\n  const Close = () => (\n    <>\n      {isCloseable && (\n        <CleanIconButton\n          className=\"ndl-drawer-close-button\"\n          onClick={setOnExpandedChange}\n          description=\"Close\"\n          size=\"medium\"\n          htmlAttributes={{\n            title: 'Close drawer',\n          }}\n        >\n          <XMarkIconOutline />\n        </CleanIconButton>\n      )}\n    </>\n  );\n\n  if (isResizeable) {\n    return (\n      <ConditionalWrap\n        shouldWrap={shouldRenderInPortal}\n        wrap={(wrapChildren) => (\n          <FloatingPortal preserveTabOrder={true} {...portalProps}>\n            {wrapChildren}\n          </FloatingPortal>\n        )}\n      >\n        <Resizable\n          as={Component}\n          defaultSize={{\n            height: '100%',\n            width: 'auto',\n          }}\n          {...resizeableProps}\n          className={classes}\n          style={{\n            position: resizableStylePosition,\n            ...style,\n            ...resizeableProps?.style,\n          }}\n          boundsByDirection={true}\n          bounds=\"parent\"\n          handleStyles={{\n            /*\n             * adding a small offset to the handle to make it easier to click\n             * if the content of the drawer is scrollable, most noticeable if not using\n             * a mouse on mac or chrome on windows with the fluent scrollbars\n             */\n            right: {\n              right: '-8px',\n            },\n          }}\n          enable={{\n            bottom: false,\n            bottomLeft: false,\n            bottomRight: false,\n            left: position === 'right',\n            right: position === 'left',\n            top: false,\n            topLeft: false,\n            topRight: false,\n          }}\n          ref={ref}\n          {...restProps}\n          {...htmlAttributes}\n        >\n          {children}\n          <Close />\n        </Resizable>\n      </ConditionalWrap>\n    );\n  }\n\n  return (\n    <ConditionalWrap\n      shouldWrap={shouldRenderInPortal}\n      wrap={(wrapChildren) => (\n        <FloatingPortal preserveTabOrder={true} {...portalProps}>\n          {wrapChildren}\n        </FloatingPortal>\n      )}\n    >\n      <Component\n        className={classes}\n        style={style}\n        ref={ref}\n        {...restProps}\n        {...htmlAttributes}\n      >\n        {children}\n        <Close />\n      </Component>\n    </ConditionalWrap>\n  );\n};\n\nDrawerComponent.displayName = 'Drawer';\n\ntype DrawerHeaderProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'h5'>;\n};\n\nconst DrawerHeader = ({\n  children,\n  className = '',\n  ...restProps\n}: DrawerHeaderProps) => {\n  const classes = classNames('ndl-drawer-header', className);\n\n  if (typeof children === 'string' || typeof children === 'number') {\n    return (\n      <Typography variant=\"title-3\" {...restProps} className={classes}>\n        {children}\n      </Typography>\n    );\n  }\n\n  return (\n    <div {...restProps} className={classes}>\n      {children}\n    </div>\n  );\n};\n\ntype DrawerActionsProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerActions = ({\n  children,\n  className = '',\n  ...restProps\n}: DrawerActionsProps) => {\n  const classes = classNames('ndl-drawer-actions', className);\n\n  return (\n    <div {...restProps} className={classes}>\n      {children}\n    </div>\n  );\n};\n\ntype DrawerBodyProps = {\n  children: React.ReactNode;\n  className?: string;\n  htmlAttributes?: HtmlAttributes<'div'>;\n};\n\nconst DrawerBody = ({\n  children,\n  className = '',\n  ...restProps\n}: DrawerBodyProps) => {\n  const classes = classNames('ndl-drawer-body', className);\n\n  return (\n    <div className=\"ndl-drawer-body-wrapper\">\n      <div {...restProps} className={classes}>\n        {children}\n      </div>\n    </div>\n  );\n};\n\nconst Drawer = Object.assign(DrawerComponent, {\n  Actions: DrawerActions,\n  Body: DrawerBody,\n  Header: DrawerHeader,\n});\n\nexport { Drawer };\n"]}

package/lib/types/date-picker/DatePicker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/date-picker/DatePicker.tsx"],"names":[],"mappings":"AA0BA,OAAO,eAEN,MAAM,kBAAkB,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAUpD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAA0B,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAgE9E,UAAU,eAAe;IACvB,oDAAoD;IACpD,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,CAAC;IACxD,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qDAAqD;IACrD,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,kEAAkE;IAClE,oBAAoB,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,CAAC;CACpE;AAED,eAAO,MAAM,UAAU,GAAI,4HAUxB,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,4CA4QrC,CAAC"}
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/date-picker/DatePicker.tsx"],"names":[],"mappings":"AA0BA,OAAO,eAEN,MAAM,kBAAkB,CAAC;AAE1B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAUpD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAA0B,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAgE9E,UAAU,eAAe;IACvB,oDAAoD;IACpD,cAAc,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,CAAC;IACxD,2CAA2C;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,qDAAqD;IACrD,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,kEAAkE;IAClE,oBAAoB,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,CAAC;CACpE;AAED,eAAO,MAAM,UAAU,GAAI,4HAUxB,WAAW,CAAC,KAAK,EAAE,eAAe,CAAC,4CAsSrC,CAAC"}

package/lib/types/drawer/Drawer.d.ts

@@ -68,7 +68,7 @@ type DrawerBodyProps = {
     htmlAttributes?: HtmlAttributes<'div'>;
 };
 declare const Drawer: {
-    <T extends React.ElementType = "div">({ children, className, isExpanded, onExpandedChange, position, type, isResizeable, resizeableProps, isCloseable, isPortaled, portalProps, htmlAttributes, ref, }: PolymorphicCommonProps<T, DrawerProps>): import("react/jsx-runtime").JSX.Element;
+    <T extends React.ElementType = "div">({ children, className, isExpanded, onExpandedChange, position, type, isResizeable, resizeableProps, isCloseable, isPortaled, portalProps, htmlAttributes, style, ref, as, ...restProps }: PolymorphicCommonProps<T, DrawerProps>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 } & {
     Actions: ({ children, className, ...restProps }: DrawerActionsProps) => import("react/jsx-runtime").JSX.Element;

package/lib/types/drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,cAAc,EAAe,MAAM,OAAO,CAAC;AAEzD,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAC;AAM1B,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvC,KAAK,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;AAErC,KAAK,WAAW,GAAG;IACjB,4EAA4E;IAC5E,UAAU,EAAE,OAAO,CAAC;IAEpB,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C,yFAAyF;IACzF,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B,6FAA6F;IAC7F,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,iFAAiF;IACjF,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,wJAAwJ;IACxJ,eAAe,CAAC,EAAE,cAAc,CAAC;IAEjC,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,gDAAgD;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;CACrD,CAAC;AA2HF,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;CACvC,CAAC;AAwBF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;CACxC,CAAC;AAgBF,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;CACxC,CAAC;AAkBF,QAAA,MAAM,MAAM;KA9LV,CAAC,SAAS,KAAK,CAAC,WAAW,4KAe1B,sBAAsB,CAAC,CAAC,EAAE,WAAW,CAAC;;;qDA+ItC,kBAAkB;kDAoBlB,eAAe;oDAhDf,iBAAiB;CAgElB,CAAC;AAEH,OAAO,EAAE,MAAM,EAAE,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/drawer/Drawer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,KAAK,cAAc,EAAe,MAAM,OAAO,CAAC;AAEzD,OAAO,EACL,KAAK,cAAc,EACnB,KAAK,sBAAsB,EAC5B,MAAM,kBAAkB,CAAC;AAM1B,KAAK,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAEvC,KAAK,UAAU,GAAG,SAAS,GAAG,MAAM,CAAC;AAErC,KAAK,WAAW,GAAG;IACjB,4EAA4E;IAC5E,UAAU,EAAE,OAAO,CAAC;IAEpB,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;IAE/C,yFAAyF;IACzF,QAAQ,CAAC,EAAE,cAAc,CAAC;IAE1B,6FAA6F;IAC7F,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB,iFAAiF;IACjF,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB,wJAAwJ;IACxJ,eAAe,CAAC,EAAE,cAAc,CAAC;IAEjC,6DAA6D;IAC7D,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB,oCAAoC;IACpC,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB,gDAAgD;IAChD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,cAAc,CAAC,OAAO,cAAc,CAAC,CAAC;CACrD,CAAC;AAyIF,KAAK,iBAAiB,GAAG;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;CACvC,CAAC;AAwBF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;CACxC,CAAC;AAgBF,KAAK,eAAe,GAAG;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,cAAc,CAAC,KAAK,CAAC,CAAC;CACxC,CAAC;AAkBF,QAAA,MAAM,MAAM;KA5MV,CAAC,SAAS,KAAK,CAAC,WAAW,oMAkB1B,sBAAsB,CAAC,CAAC,EAAE,WAAW,CAAC;;;qDA0JtC,kBAAkB;kDAoBlB,eAAe;oDAhDf,iBAAiB;CAgElB,CAAC;AAEH,OAAO,EAAE,MAAM,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/react",
-  "version": "4.0.16",
+  "version": "4.0.18",
   "sideEffects": false,
   "description": "React implementation of Neo4j Design System",
   "keywords": [