@os-design/core 1.0.183 → 1.0.184

package/dist/cjs/DatePicker/index.js

@@ -16,7 +16,6 @@ var _Button = _interopRequireDefault(require("../Button"));
 var _Modal = _interopRequireDefault(require("../Modal"));
 var _Popover = _interopRequireDefault(require("../Popover"));
 var _Select = require("../Select");
-var _SelectToggle = require("../Select/SelectToggle");
 var _TimePicker = _interopRequireDefault(require("../TimePicker"));
 var _DatePickerCalendar = _interopRequireDefault(require("./DatePickerCalendar"));
 var _excluded = ["left", "leftHasPadding", "right", "rightHasPadding", "placeholder", "disabled", "autoFocus", "autoOpen", "format", "firstDayOfWeek", "locale", "showTime", "timeNotation", "range", "value", "defaultValue", "onChange", "onClose", "onBlur", "size"];
@@ -175,9 +174,9 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
           }
         },
         "aria-label": locale.clearLabel
-      }, /*#__PURE__*/_react["default"].createElement(_SelectToggle.ClearIcon, null)));
+      }, /*#__PURE__*/_react["default"].createElement(_Select.ClearIcon, null)));
     }
-    return right || /*#__PURE__*/_react["default"].createElement(_SelectToggle.IconContainer, null, opened ? /*#__PURE__*/_react["default"].createElement(_icons.Up, null) : /*#__PURE__*/_react["default"].createElement(_icons.Down, null));
+    return right || /*#__PURE__*/_react["default"].createElement(_Select.ToggleIconContainer, null, opened ? /*#__PURE__*/_react["default"].createElement(_icons.Up, null) : /*#__PURE__*/_react["default"].createElement(_icons.Down, null));
   }, [containerRef, disabled, locale.clearLabel, opened, right, setForwardedValue, valueIsSpecified]);
   var firstTimePickerRef = (0, _react.useRef)(null);
   var secondTimePickerRef = (0, _react.useRef)(null);
@@ -310,22 +309,22 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         baseHeight: t.selectToggleListItemHeight / t.sizes.small
       };
     }
-  }, /*#__PURE__*/_react["default"].createElement(_SelectToggle.LeftAddon, {
+  }, /*#__PURE__*/_react["default"].createElement(_Select.ToggleLeftAddon, {
     hasPadding: leftHasPadding
-  }, left)), /*#__PURE__*/_react["default"].createElement(_SelectToggle.Content, {
+  }, left)), /*#__PURE__*/_react["default"].createElement(_Select.ToggleContent, {
     hasLeft: !!left,
     hasRight: !!right
-  }, valueIsSpecified ? /*#__PURE__*/_react["default"].createElement(_SelectToggle.Title, {
+  }, valueIsSpecified ? /*#__PURE__*/_react["default"].createElement(_Select.Title, {
     disabled: disabled,
     "aria-hidden": true
-  }, formattedValue) : /*#__PURE__*/_react["default"].createElement(_SelectToggle.Placeholder, null, placeholder)), rightValue && /*#__PURE__*/_react["default"].createElement(_theming.ThemeOverrider, {
+  }, formattedValue) : /*#__PURE__*/_react["default"].createElement(_Select.Placeholder, null, placeholder)), rightValue && /*#__PURE__*/_react["default"].createElement(_theming.ThemeOverrider, {
     overrides: function overrides(t) {
       return {
         buttonPaddingHorizontal: 0.8,
         baseHeight: t.selectToggleListItemHeight / t.sizes.small
       };
     }
-  }, /*#__PURE__*/_react["default"].createElement(_SelectToggle.RightAddon, {
+  }, /*#__PURE__*/_react["default"].createElement(_Select.ToggleRightAddon, {
     hasPadding: rightHasPaddingValue
   }, rightValue))), isMinXs ? /*#__PURE__*/_react["default"].createElement(StyledPopover, {
     trigger: containerRef,

package/dist/cjs/DatePicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["StyledPopover","styled","Popover","p","theme","datePickerPadding","TimeContainer","div","Dash","baseHeight","StyledTimePicker","TimePicker","timePickerStyle","style","width","createDate","date","time","d","Date","setFullYear","getFullYear","setMonth","getMonth","setDate","getDate","setHours","setMinutes","getHours","getMinutes","DatePicker","forwardRef","ref","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","autoFocus","autoOpen","format","firstDayOfWeek","locale","defaultLocale","showTime","timeNotation","range","value","defaultValue","onChange","onClose","onBlur","size","rest","useForwardedRef","containerRef","mergedContainerRef","useState","opened","setOpened","useForwardedState","forwardedValue","setForwardedValue","useEffect","current","focus","onCloseRef","useRef","formattedValue","useFormattedValue","closeHandler","useCallback","useKeyPress","window","undefined","isMinXs","useIsMinWidth","blurHandler","e","valueIsSpecified","useMemo","rightHasPaddingValue","rightValue","stopPropagation","includes","key","preventDefault","clearLabel","firstTimePickerRef","secondTimePickerRef","rangeStartedRef","changeHandler","prev","nextValue","Array","isArray","getTime","sort","a","b","calendarComponent","v","tabOnInputComplete","target","selectionStart","from","nextTo","closeOnInputComplete","timeComponent","getAccessibilityDateLabel","t","buttonPaddingHorizontal","selectToggleListItemHeight","sizes","small","displayName"],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  DatePickerLocale,\n  defaultLocale,\n  getAccessibilityDateLabel,\n  useFormattedValue,\n} from '@os-design/date-picker-utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport { WithSize } from '@os-design/styles';\nimport { ThemeOverrider } from '@os-design/theming';\nimport {\n  useForwardedRef,\n  useForwardedState,\n  useKeyPress,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Button from '../Button';\nimport Modal from '../Modal';\nimport Popover from '../Popover';\nimport { SelectContainer } from '../Select';\nimport {\n  ClearIcon,\n  Content,\n  IconContainer,\n  LeftAddon,\n  Placeholder,\n  RightAddon,\n  Title,\n} from '../Select/SelectToggle';\nimport TimePicker from '../TimePicker';\nimport DatePickerCalendar from './DatePickerCalendar';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\ninterface BaseDatePickerProps<T> extends JsxDivProps, WithSize {\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * The placeholder of the date picker.\n   * @default undefined\n   */\n  placeholder?: string;\n  /**\n   * Whether the date picker is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Whether the component have a focus.\n   * @default false\n   */\n  autoFocus?: boolean;\n  /**\n   * Whether the component opens the popup calendar.\n   * @default false\n   */\n  autoOpen?: boolean;\n  /**\n   * The format of the date.\n   * @default undefined\n   */\n  format?: (value: T) => string;\n  /**\n   * The first day of the week.\n   * @default sunday\n   */\n  firstDayOfWeek?: 'sunday' | 'monday';\n  /**\n   * The locale of the date picker.\n   * @default undefined\n   */\n  locale?: DatePickerLocale;\n  /**\n   * Whether the time is shown.\n   * @default false\n   */\n  showTime?: boolean;\n  /**\n   * The time notation.\n   * @default 12-hour\n   */\n  timeNotation?: '12-hour' | '24-hour';\n  /**\n   * Selected date.\n   * @default undefined\n   */\n  value?: T | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: T | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: T | null) => void;\n  /**\n   * The event handler that is called whenever a popup closes.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\ninterface DateNotRangePickerProps extends BaseDatePickerProps<Date> {\n  /**\n   * Whether the value is a range.\n   * @default false\n   */\n  range?: false;\n}\ninterface DateRangePickerProps extends BaseDatePickerProps<[Date, Date]> {\n  /**\n   * Whether the value is a range.\n   * @default false\n   */\n  range: true;\n}\nexport type DatePickerProps = DateNotRangePickerProps | DateRangePickerProps;\n\nconst StyledPopover = styled(Popover)`\n  padding: ${(p) => p.theme.datePickerPadding}em;\n`;\n\nconst TimeContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  margin-top: 0.5em;\n`;\n\nconst Dash = styled.div`\n  margin: 0 0.5em;\n  line-height: ${(p) => p.theme.baseHeight}em;\n`;\n\nconst StyledTimePicker = styled(TimePicker)`\n  width: 2.5em;\n  text-align: center;\n`;\n\nconst timePickerStyle = { style: { width: 'auto' } };\n\nconst createDate = (date: Date, time?: Date | null) => {\n  const d = new Date(0);\n  d.setFullYear(date.getFullYear());\n  d.setMonth(date.getMonth());\n  d.setDate(date.getDate());\n  d.setHours(0);\n  d.setMinutes(0);\n  if (time) {\n    d.setHours(time.getHours());\n    d.setMinutes(time.getMinutes());\n  }\n  return d;\n};\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      placeholder,\n      disabled = false,\n      autoFocus = false,\n      autoOpen = false,\n      format,\n      firstDayOfWeek = 'sunday',\n      locale = defaultLocale,\n      showTime = false,\n      timeNotation = '12-hour',\n      range = false,\n      value,\n      defaultValue,\n      onChange,\n      onClose = () => {},\n      onBlur = () => {},\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const [opened, setOpened] = useState(autoOpen);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const [forwardedValue, setForwardedValue] = useForwardedState<any>({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    useEffect(() => {\n      if (autoFocus) containerRef.current?.focus();\n    }, [autoFocus, containerRef]);\n\n    const onCloseRef = useRef(onClose);\n    useEffect(() => {\n      onCloseRef.current = onClose;\n    }, [onClose]);\n\n    useEffect(() => {\n      if (!opened) {\n        onCloseRef.current();\n        containerRef.current?.focus();\n      }\n    }, [containerRef, opened]);\n\n    const formattedValue = useFormattedValue({\n      forwardedValue,\n      format,\n      showTime,\n      timeNotation,\n    });\n\n    const closeHandler = useCallback(() => {\n      setOpened(false);\n    }, []);\n\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      closeHandler\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const blurHandler = useCallback(\n      (e) => {\n        if (!opened) onBlur(e);\n      },\n      [onBlur, opened]\n    );\n\n    const valueIsSpecified = useMemo(\n      () => formattedValue !== undefined && formattedValue !== null,\n      [formattedValue]\n    );\n\n    const rightHasPaddingValue = useMemo(() => {\n      if (valueIsSpecified) return false;\n      return right ? rightHasPadding : true;\n    }, [right, rightHasPadding, valueIsSpecified]);\n\n    const rightValue = useMemo(() => {\n      if (valueIsSpecified) {\n        return (\n          <div aria-hidden>\n            <Button\n              type='ghost'\n              wide='never'\n              size='small'\n              disabled={disabled}\n              onClick={(e) => {\n                setForwardedValue(null);\n                e.stopPropagation();\n              }}\n              onKeyDown={(e) => {\n                if (disabled) return;\n                if (['Enter', ' '].includes(e.key)) {\n                  setForwardedValue(null);\n                  if (!containerRef.current) return;\n                  containerRef.current.focus();\n                  e.preventDefault();\n                  e.stopPropagation();\n                }\n              }}\n              aria-label={locale.clearLabel}\n            >\n              <ClearIcon />\n            </Button>\n          </div>\n        );\n      }\n      return (\n        right || <IconContainer>{opened ? <Up /> : <Down />}</IconContainer>\n      );\n    }, [\n      containerRef,\n      disabled,\n      locale.clearLabel,\n      opened,\n      right,\n      setForwardedValue,\n      valueIsSpecified,\n    ]);\n\n    const firstTimePickerRef = useRef<HTMLInputElement>(null);\n    const secondTimePickerRef = useRef<HTMLInputElement>(null);\n    const rangeStartedRef = useRef(false);\n\n    useEffect(() => {\n      rangeStartedRef.current = false;\n    }, [opened]);\n\n    const changeHandler = useCallback(\n      (date: Date) => {\n        setForwardedValue((prev) => {\n          if (!range) return createDate(date, prev);\n\n          const d = createDate(date);\n          const nextValue =\n            prev && Array.isArray(prev) && rangeStartedRef.current\n              ? [new Date(prev[0].getTime()), createDate(date, prev[1])]\n              : [d, d];\n\n          rangeStartedRef.current = !rangeStartedRef.current;\n          return nextValue.sort(\n            (a: Date, b: Date) => a.getTime() - b.getTime()\n          );\n        });\n      },\n      [range, setForwardedValue]\n    );\n\n    const calendarComponent = useMemo(\n      () => (\n        <DatePickerCalendar\n          firstDayOfWeek={firstDayOfWeek}\n          locale={locale}\n          value={forwardedValue}\n          onSelect={(v) => {\n            changeHandler(v);\n            firstTimePickerRef.current?.focus();\n            if (!showTime && (!range || !rangeStartedRef.current)) {\n              closeHandler();\n            }\n          }}\n        />\n      ),\n      [\n        changeHandler,\n        closeHandler,\n        firstDayOfWeek,\n        forwardedValue,\n        locale,\n        range,\n        showTime,\n      ]\n    );\n\n    const tabOnInputComplete = useCallback(\n      (e) => {\n        if (e.target.selectionStart < 5) return;\n        secondTimePickerRef.current?.focus();\n        setForwardedValue(([from]) => {\n          const nextTo = new Date(from.getTime());\n          nextTo.setHours(nextTo.getHours() + 1);\n          return [from, nextTo];\n        });\n      },\n      [setForwardedValue]\n    );\n\n    const closeOnInputComplete = useCallback(\n      (e) => {\n        if (e.target.selectionStart < 5) return;\n        closeHandler();\n      },\n      [closeHandler]\n    );\n\n    const timeComponent = useMemo(\n      () =>\n        showTime && forwardedValue ? (\n          <TimeContainer>\n            {Array.isArray(forwardedValue) ? (\n              <>\n                <StyledTimePicker\n                  ref={firstTimePickerRef}\n                  autoFocus\n                  disabled={disabled}\n                  notation={timeNotation}\n                  containerProps={timePickerStyle}\n                  value={forwardedValue[0]}\n                  onChange={(v) => setForwardedValue([v, forwardedValue[1]])}\n                  onKeyDown={(e) => {\n                    if (disabled) return;\n                    if (e.key === 'Enter') {\n                      setOpened(!opened);\n                    }\n                  }}\n                  onKeyUp={tabOnInputComplete}\n                />\n                <Dash>–</Dash>\n                <StyledTimePicker\n                  ref={secondTimePickerRef}\n                  disabled={disabled}\n                  notation={timeNotation}\n                  containerProps={timePickerStyle}\n                  value={forwardedValue[1]}\n                  onChange={(v) => setForwardedValue([forwardedValue[0], v])}\n                  onKeyDown={(e) => {\n                    if (disabled) return;\n                    if (e.key === 'Enter') {\n                      setOpened(!opened);\n                    }\n                  }}\n                  onKeyUp={closeOnInputComplete}\n                />\n              </>\n            ) : (\n              <StyledTimePicker\n                ref={firstTimePickerRef}\n                autoFocus\n                disabled={disabled}\n                notation={timeNotation}\n                containerProps={timePickerStyle}\n                value={forwardedValue}\n                onChange={setForwardedValue}\n                onKeyDown={(e) => {\n                  if (disabled) return;\n                  if (e.key === 'Enter') {\n                    setOpened(!opened);\n                  }\n                }}\n                onKeyUp={closeOnInputComplete}\n              />\n            )}\n          </TimeContainer>\n        ) : null,\n      [\n        closeOnInputComplete,\n        disabled,\n        forwardedValue,\n        opened,\n        setForwardedValue,\n        showTime,\n        tabOnInputComplete,\n        timeNotation,\n      ]\n    );\n\n    return (\n      <>\n        <SelectContainer\n          opened={opened}\n          disabled={disabled}\n          size={size}\n          tabIndex={!disabled ? 0 : -1}\n          onClick={() => {\n            if (disabled) return;\n            setOpened(!opened);\n          }}\n          onKeyDown={(e) => {\n            if (disabled) return;\n            if (['Enter', ' '].includes(e.key)) {\n              setOpened(!opened);\n              e.preventDefault();\n            }\n          }}\n          onMouseDown={(e) => e.preventDefault()}\n          onBlur={blurHandler}\n          role='combobox'\n          aria-label={\n            forwardedValue\n              ? getAccessibilityDateLabel(forwardedValue, locale)\n              : undefined\n          }\n          aria-disabled={disabled}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          {left && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n            </ThemeOverrider>\n          )}\n\n          <Content hasLeft={!!left} hasRight={!!right}>\n            {valueIsSpecified ? (\n              <Title disabled={disabled} aria-hidden>\n                {formattedValue}\n              </Title>\n            ) : (\n              <Placeholder>{placeholder}</Placeholder>\n            )}\n          </Content>\n\n          {rightValue && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <RightAddon hasPadding={rightHasPaddingValue}>\n                {rightValue}\n              </RightAddon>\n            </ThemeOverrider>\n          )}\n        </SelectContainer>\n\n        {isMinXs ? (\n          <StyledPopover\n            trigger={containerRef}\n            placement='bottom-start'\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendarComponent}\n            {timeComponent}\n          </StyledPopover>\n        ) : (\n          <Modal\n            title={placeholder}\n            header={null}\n            footer={null}\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendarComponent}\n            {timeComponent}\n          </Modal>\n        )}\n      </>\n    );\n  }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["StyledPopover","styled","Popover","p","theme","datePickerPadding","TimeContainer","div","Dash","baseHeight","StyledTimePicker","TimePicker","timePickerStyle","style","width","createDate","date","time","d","Date","setFullYear","getFullYear","setMonth","getMonth","setDate","getDate","setHours","setMinutes","getHours","getMinutes","DatePicker","forwardRef","ref","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","autoFocus","autoOpen","format","firstDayOfWeek","locale","defaultLocale","showTime","timeNotation","range","value","defaultValue","onChange","onClose","onBlur","size","rest","useForwardedRef","containerRef","mergedContainerRef","useState","opened","setOpened","useForwardedState","forwardedValue","setForwardedValue","useEffect","current","focus","onCloseRef","useRef","formattedValue","useFormattedValue","closeHandler","useCallback","useKeyPress","window","undefined","isMinXs","useIsMinWidth","blurHandler","e","valueIsSpecified","useMemo","rightHasPaddingValue","rightValue","stopPropagation","includes","key","preventDefault","clearLabel","firstTimePickerRef","secondTimePickerRef","rangeStartedRef","changeHandler","prev","nextValue","Array","isArray","getTime","sort","a","b","calendarComponent","v","tabOnInputComplete","target","selectionStart","from","nextTo","closeOnInputComplete","timeComponent","getAccessibilityDateLabel","t","buttonPaddingHorizontal","selectToggleListItemHeight","sizes","small","displayName"],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n  DatePickerLocale,\n  defaultLocale,\n  getAccessibilityDateLabel,\n  useFormattedValue,\n} from '@os-design/date-picker-utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport { WithSize } from '@os-design/styles';\nimport { ThemeOverrider } from '@os-design/theming';\nimport {\n  useForwardedRef,\n  useForwardedState,\n  useKeyPress,\n} from '@os-design/utils';\nimport React, {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport Button from '../Button';\nimport Modal from '../Modal';\nimport Popover from '../Popover';\nimport {\n  ClearIcon,\n  ToggleLeftAddon,\n  Placeholder,\n  ToggleRightAddon,\n  SelectContainer,\n  Title,\n  ToggleContent,\n  ToggleIconContainer,\n} from '../Select';\nimport TimePicker from '../TimePicker';\nimport DatePickerCalendar from './DatePickerCalendar';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\ninterface BaseDatePickerProps<T> extends JsxDivProps, WithSize {\n  /**\n   * The component located on the left side.\n   * @default undefined\n   */\n  left?: React.ReactNode;\n  /**\n   * Adds padding to the left component.\n   * It can be useful when passing an icon or text in the left component.\n   * @default false\n   */\n  leftHasPadding?: boolean;\n  /**\n   * The component located on the right side.\n   * @default undefined\n   */\n  right?: React.ReactNode;\n  /**\n   * Adds padding to the right component.\n   * It can be useful when passing an icon or text in the right component.\n   * @default false\n   */\n  rightHasPadding?: boolean;\n  /**\n   * The placeholder of the date picker.\n   * @default undefined\n   */\n  placeholder?: string;\n  /**\n   * Whether the date picker is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n  /**\n   * Whether the component have a focus.\n   * @default false\n   */\n  autoFocus?: boolean;\n  /**\n   * Whether the component opens the popup calendar.\n   * @default false\n   */\n  autoOpen?: boolean;\n  /**\n   * The format of the date.\n   * @default undefined\n   */\n  format?: (value: T) => string;\n  /**\n   * The first day of the week.\n   * @default sunday\n   */\n  firstDayOfWeek?: 'sunday' | 'monday';\n  /**\n   * The locale of the date picker.\n   * @default undefined\n   */\n  locale?: DatePickerLocale;\n  /**\n   * Whether the time is shown.\n   * @default false\n   */\n  showTime?: boolean;\n  /**\n   * The time notation.\n   * @default 12-hour\n   */\n  timeNotation?: '12-hour' | '24-hour';\n  /**\n   * Selected date.\n   * @default undefined\n   */\n  value?: T | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: T | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: T | null) => void;\n  /**\n   * The event handler that is called whenever a popup closes.\n   * @default undefined\n   */\n  onClose?: () => void;\n}\ninterface DateNotRangePickerProps extends BaseDatePickerProps<Date> {\n  /**\n   * Whether the value is a range.\n   * @default false\n   */\n  range?: false;\n}\ninterface DateRangePickerProps extends BaseDatePickerProps<[Date, Date]> {\n  /**\n   * Whether the value is a range.\n   * @default false\n   */\n  range: true;\n}\nexport type DatePickerProps = DateNotRangePickerProps | DateRangePickerProps;\n\nconst StyledPopover = styled(Popover)`\n  padding: ${(p) => p.theme.datePickerPadding}em;\n`;\n\nconst TimeContainer = styled.div`\n  display: flex;\n  justify-content: center;\n  margin-top: 0.5em;\n`;\n\nconst Dash = styled.div`\n  margin: 0 0.5em;\n  line-height: ${(p) => p.theme.baseHeight}em;\n`;\n\nconst StyledTimePicker = styled(TimePicker)`\n  width: 2.5em;\n  text-align: center;\n`;\n\nconst timePickerStyle = { style: { width: 'auto' } };\n\nconst createDate = (date: Date, time?: Date | null) => {\n  const d = new Date(0);\n  d.setFullYear(date.getFullYear());\n  d.setMonth(date.getMonth());\n  d.setDate(date.getDate());\n  d.setHours(0);\n  d.setMinutes(0);\n  if (time) {\n    d.setHours(time.getHours());\n    d.setMinutes(time.getMinutes());\n  }\n  return d;\n};\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n  (\n    {\n      left,\n      leftHasPadding = false,\n      right,\n      rightHasPadding = false,\n      placeholder,\n      disabled = false,\n      autoFocus = false,\n      autoOpen = false,\n      format,\n      firstDayOfWeek = 'sunday',\n      locale = defaultLocale,\n      showTime = false,\n      timeNotation = '12-hour',\n      range = false,\n      value,\n      defaultValue,\n      onChange,\n      onClose = () => {},\n      onBlur = () => {},\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n    const [opened, setOpened] = useState(autoOpen);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const [forwardedValue, setForwardedValue] = useForwardedState<any>({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    useEffect(() => {\n      if (autoFocus) containerRef.current?.focus();\n    }, [autoFocus, containerRef]);\n\n    const onCloseRef = useRef(onClose);\n    useEffect(() => {\n      onCloseRef.current = onClose;\n    }, [onClose]);\n\n    useEffect(() => {\n      if (!opened) {\n        onCloseRef.current();\n        containerRef.current?.focus();\n      }\n    }, [containerRef, opened]);\n\n    const formattedValue = useFormattedValue({\n      forwardedValue,\n      format,\n      showTime,\n      timeNotation,\n    });\n\n    const closeHandler = useCallback(() => {\n      setOpened(false);\n    }, []);\n\n    useKeyPress(\n      (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n      'Escape',\n      closeHandler\n    );\n    const isMinXs = useIsMinWidth('xs');\n\n    const blurHandler = useCallback(\n      (e) => {\n        if (!opened) onBlur(e);\n      },\n      [onBlur, opened]\n    );\n\n    const valueIsSpecified = useMemo(\n      () => formattedValue !== undefined && formattedValue !== null,\n      [formattedValue]\n    );\n\n    const rightHasPaddingValue = useMemo(() => {\n      if (valueIsSpecified) return false;\n      return right ? rightHasPadding : true;\n    }, [right, rightHasPadding, valueIsSpecified]);\n\n    const rightValue = useMemo(() => {\n      if (valueIsSpecified) {\n        return (\n          <div aria-hidden>\n            <Button\n              type='ghost'\n              wide='never'\n              size='small'\n              disabled={disabled}\n              onClick={(e) => {\n                setForwardedValue(null);\n                e.stopPropagation();\n              }}\n              onKeyDown={(e) => {\n                if (disabled) return;\n                if (['Enter', ' '].includes(e.key)) {\n                  setForwardedValue(null);\n                  if (!containerRef.current) return;\n                  containerRef.current.focus();\n                  e.preventDefault();\n                  e.stopPropagation();\n                }\n              }}\n              aria-label={locale.clearLabel}\n            >\n              <ClearIcon />\n            </Button>\n          </div>\n        );\n      }\n      return (\n        right || (\n          <ToggleIconContainer>\n            {opened ? <Up /> : <Down />}\n          </ToggleIconContainer>\n        )\n      );\n    }, [\n      containerRef,\n      disabled,\n      locale.clearLabel,\n      opened,\n      right,\n      setForwardedValue,\n      valueIsSpecified,\n    ]);\n\n    const firstTimePickerRef = useRef<HTMLInputElement>(null);\n    const secondTimePickerRef = useRef<HTMLInputElement>(null);\n    const rangeStartedRef = useRef(false);\n\n    useEffect(() => {\n      rangeStartedRef.current = false;\n    }, [opened]);\n\n    const changeHandler = useCallback(\n      (date: Date) => {\n        setForwardedValue((prev) => {\n          if (!range) return createDate(date, prev);\n\n          const d = createDate(date);\n          const nextValue =\n            prev && Array.isArray(prev) && rangeStartedRef.current\n              ? [new Date(prev[0].getTime()), createDate(date, prev[1])]\n              : [d, d];\n\n          rangeStartedRef.current = !rangeStartedRef.current;\n          return nextValue.sort(\n            (a: Date, b: Date) => a.getTime() - b.getTime()\n          );\n        });\n      },\n      [range, setForwardedValue]\n    );\n\n    const calendarComponent = useMemo(\n      () => (\n        <DatePickerCalendar\n          firstDayOfWeek={firstDayOfWeek}\n          locale={locale}\n          value={forwardedValue}\n          onSelect={(v) => {\n            changeHandler(v);\n            firstTimePickerRef.current?.focus();\n            if (!showTime && (!range || !rangeStartedRef.current)) {\n              closeHandler();\n            }\n          }}\n        />\n      ),\n      [\n        changeHandler,\n        closeHandler,\n        firstDayOfWeek,\n        forwardedValue,\n        locale,\n        range,\n        showTime,\n      ]\n    );\n\n    const tabOnInputComplete = useCallback(\n      (e) => {\n        if (e.target.selectionStart < 5) return;\n        secondTimePickerRef.current?.focus();\n        setForwardedValue(([from]) => {\n          const nextTo = new Date(from.getTime());\n          nextTo.setHours(nextTo.getHours() + 1);\n          return [from, nextTo];\n        });\n      },\n      [setForwardedValue]\n    );\n\n    const closeOnInputComplete = useCallback(\n      (e) => {\n        if (e.target.selectionStart < 5) return;\n        closeHandler();\n      },\n      [closeHandler]\n    );\n\n    const timeComponent = useMemo(\n      () =>\n        showTime && forwardedValue ? (\n          <TimeContainer>\n            {Array.isArray(forwardedValue) ? (\n              <>\n                <StyledTimePicker\n                  ref={firstTimePickerRef}\n                  autoFocus\n                  disabled={disabled}\n                  notation={timeNotation}\n                  containerProps={timePickerStyle}\n                  value={forwardedValue[0]}\n                  onChange={(v) => setForwardedValue([v, forwardedValue[1]])}\n                  onKeyDown={(e) => {\n                    if (disabled) return;\n                    if (e.key === 'Enter') {\n                      setOpened(!opened);\n                    }\n                  }}\n                  onKeyUp={tabOnInputComplete}\n                />\n                <Dash>–</Dash>\n                <StyledTimePicker\n                  ref={secondTimePickerRef}\n                  disabled={disabled}\n                  notation={timeNotation}\n                  containerProps={timePickerStyle}\n                  value={forwardedValue[1]}\n                  onChange={(v) => setForwardedValue([forwardedValue[0], v])}\n                  onKeyDown={(e) => {\n                    if (disabled) return;\n                    if (e.key === 'Enter') {\n                      setOpened(!opened);\n                    }\n                  }}\n                  onKeyUp={closeOnInputComplete}\n                />\n              </>\n            ) : (\n              <StyledTimePicker\n                ref={firstTimePickerRef}\n                autoFocus\n                disabled={disabled}\n                notation={timeNotation}\n                containerProps={timePickerStyle}\n                value={forwardedValue}\n                onChange={setForwardedValue}\n                onKeyDown={(e) => {\n                  if (disabled) return;\n                  if (e.key === 'Enter') {\n                    setOpened(!opened);\n                  }\n                }}\n                onKeyUp={closeOnInputComplete}\n              />\n            )}\n          </TimeContainer>\n        ) : null,\n      [\n        closeOnInputComplete,\n        disabled,\n        forwardedValue,\n        opened,\n        setForwardedValue,\n        showTime,\n        tabOnInputComplete,\n        timeNotation,\n      ]\n    );\n\n    return (\n      <>\n        <SelectContainer\n          opened={opened}\n          disabled={disabled}\n          size={size}\n          tabIndex={!disabled ? 0 : -1}\n          onClick={() => {\n            if (disabled) return;\n            setOpened(!opened);\n          }}\n          onKeyDown={(e) => {\n            if (disabled) return;\n            if (['Enter', ' '].includes(e.key)) {\n              setOpened(!opened);\n              e.preventDefault();\n            }\n          }}\n          onMouseDown={(e) => e.preventDefault()}\n          onBlur={blurHandler}\n          role='combobox'\n          aria-label={\n            forwardedValue\n              ? getAccessibilityDateLabel(forwardedValue, locale)\n              : undefined\n          }\n          aria-disabled={disabled}\n          {...rest}\n          ref={mergedContainerRef}\n        >\n          {left && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <ToggleLeftAddon hasPadding={leftHasPadding}>\n                {left}\n              </ToggleLeftAddon>\n            </ThemeOverrider>\n          )}\n\n          <ToggleContent hasLeft={!!left} hasRight={!!right}>\n            {valueIsSpecified ? (\n              <Title disabled={disabled} aria-hidden>\n                {formattedValue}\n              </Title>\n            ) : (\n              <Placeholder>{placeholder}</Placeholder>\n            )}\n          </ToggleContent>\n\n          {rightValue && (\n            <ThemeOverrider\n              overrides={(t) => ({\n                buttonPaddingHorizontal: 0.8,\n                baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n              })}\n            >\n              <ToggleRightAddon hasPadding={rightHasPaddingValue}>\n                {rightValue}\n              </ToggleRightAddon>\n            </ThemeOverrider>\n          )}\n        </SelectContainer>\n\n        {isMinXs ? (\n          <StyledPopover\n            trigger={containerRef}\n            placement='bottom-start'\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendarComponent}\n            {timeComponent}\n          </StyledPopover>\n        ) : (\n          <Modal\n            title={placeholder}\n            header={null}\n            footer={null}\n            visible={opened}\n            onClose={closeHandler}\n            size={size}\n          >\n            {calendarComponent}\n            {timeComponent}\n          </Modal>\n        )}\n      </>\n    );\n  }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":";;;;;;;AAAA;AACA;AAMA;AACA;AAEA;AACA;AAKA;AAQA;AACA;AACA;AACA;AAUA;AACA;AAAsD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+GtD,IAAMA,aAAa,GAAG,IAAAC,kBAAM,EAACC,mBAAO,CAAC,4FACxB,UAACC,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACC,iBAAiB;AAAA,EAC5C;AAED,IAAMC,aAAa,GAAGL,kBAAM,CAACM,GAAG,6IAI/B;AAED,IAAMC,IAAI,GAAGP,kBAAM,CAACM,GAAG,sHAEN,UAACJ,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACK,UAAU;AAAA,EACzC;AAED,IAAMC,gBAAgB,GAAG,IAAAT,kBAAM,EAACU,sBAAU,CAAC,iHAG1C;AAED,IAAMC,eAAe,GAAG;EAAEC,KAAK,EAAE;IAAEC,KAAK,EAAE;EAAO;AAAE,CAAC;AAEpD,IAAMC,UAAU,GAAG,SAAbA,UAAU,CAAIC,IAAU,EAAEC,IAAkB,EAAK;EACrD,IAAMC,CAAC,GAAG,IAAIC,IAAI,CAAC,CAAC,CAAC;EACrBD,CAAC,CAACE,WAAW,CAACJ,IAAI,CAACK,WAAW,EAAE,CAAC;EACjCH,CAAC,CAACI,QAAQ,CAACN,IAAI,CAACO,QAAQ,EAAE,CAAC;EAC3BL,CAAC,CAACM,OAAO,CAACR,IAAI,CAACS,OAAO,EAAE,CAAC;EACzBP,CAAC,CAACQ,QAAQ,CAAC,CAAC,CAAC;EACbR,CAAC,CAACS,UAAU,CAAC,CAAC,CAAC;EACf,IAAIV,IAAI,EAAE;IACRC,CAAC,CAACQ,QAAQ,CAACT,IAAI,CAACW,QAAQ,EAAE,CAAC;IAC3BV,CAAC,CAACS,UAAU,CAACV,IAAI,CAACY,UAAU,EAAE,CAAC;EACjC;EACA,OAAOX,CAAC;AACV,CAAC;;AAED;AACA;AACA;AACA,IAAMY,UAAU,gBAAG,IAAAC,iBAAU,EAC3B,gBAwBEC,GAAG,EACA;EAAA,IAvBDC,IAAI,QAAJA,IAAI;IAAA,2BACJC,cAAc;IAAdA,cAAc,oCAAG,KAAK;IACtBC,KAAK,QAALA,KAAK;IAAA,4BACLC,eAAe;IAAfA,eAAe,qCAAG,KAAK;IACvBC,WAAW,QAAXA,WAAW;IAAA,qBACXC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,sBAChBC,SAAS;IAATA,SAAS,+BAAG,KAAK;IAAA,qBACjBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,MAAM,QAANA,MAAM;IAAA,2BACNC,cAAc;IAAdA,cAAc,oCAAG,QAAQ;IAAA,mBACzBC,MAAM;IAANA,MAAM,4BAAGC,8BAAa;IAAA,qBACtBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,yBAChBC,YAAY;IAAZA,YAAY,kCAAG,SAAS;IAAA,kBACxBC,KAAK;IAALA,KAAK,2BAAG,KAAK;IACbC,KAAK,QAALA,KAAK;IACLC,YAAY,QAAZA,YAAY;IACZC,QAAQ,QAARA,QAAQ;IAAA,oBACRC,OAAO;IAAPA,OAAO,6BAAG,YAAM,CAAC,CAAC;IAAA,mBAClBC,MAAM;IAANA,MAAM,4BAAG,YAAM,CAAC,CAAC;IACjBC,IAAI,QAAJA,IAAI;IACDC,IAAI;EAIT,uBAA2C,IAAAC,sBAAe,EAACvB,GAAG,CAAC;IAAA;IAAxDwB,YAAY;IAAEC,kBAAkB;EACvC,gBAA4B,IAAAC,eAAQ,EAAClB,QAAQ,CAAC;IAAA;IAAvCmB,MAAM;IAAEC,SAAS;EACxB;EACA,yBAA4C,IAAAC,wBAAiB,EAAM;MACjEb,KAAK,EAALA,KAAK;MACLC,YAAY,EAAZA,YAAY;MACZC,QAAQ,EAARA;IACF,CAAC,CAAC;IAAA;IAJKY,cAAc;IAAEC,iBAAiB;EAMxC,IAAAC,gBAAS,EAAC,YAAM;IAAA;IACd,IAAIzB,SAAS,EAAE,yBAAAiB,YAAY,CAACS,OAAO,0DAApB,sBAAsBC,KAAK,EAAE;EAC9C,CAAC,EAAE,CAAC3B,SAAS,EAAEiB,YAAY,CAAC,CAAC;EAE7B,IAAMW,UAAU,GAAG,IAAAC,aAAM,EAACjB,OAAO,CAAC;EAClC,IAAAa,gBAAS,EAAC,YAAM;IACdG,UAAU,CAACF,OAAO,GAAGd,OAAO;EAC9B,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,IAAAa,gBAAS,EAAC,YAAM;IACd,IAAI,CAACL,MAAM,EAAE;MAAA;MACXQ,UAAU,CAACF,OAAO,EAAE;MACpB,0BAAAT,YAAY,CAACS,OAAO,2DAApB,uBAAsBC,KAAK,EAAE;IAC/B;EACF,CAAC,EAAE,CAACV,YAAY,EAAEG,MAAM,CAAC,CAAC;EAE1B,IAAMU,cAAc,GAAG,IAAAC,kCAAiB,EAAC;IACvCR,cAAc,EAAdA,cAAc;IACdrB,MAAM,EAANA,MAAM;IACNI,QAAQ,EAARA,QAAQ;IACRC,YAAY,EAAZA;EACF,CAAC,CAAC;EAEF,IAAMyB,YAAY,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACrCZ,SAAS,CAAC,KAAK,CAAC;EAClB,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAa,kBAAW,EACR,OAAOC,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGC,SAAS,EACnD,QAAQ,EACRJ,YAAY,CACb;EACD,IAAMK,OAAO,GAAG,IAAAC,oBAAa,EAAC,IAAI,CAAC;EAEnC,IAAMC,WAAW,GAAG,IAAAN,kBAAW,EAC7B,UAACO,CAAC,EAAK;IACL,IAAI,CAACpB,MAAM,EAAEP,MAAM,CAAC2B,CAAC,CAAC;EACxB,CAAC,EACD,CAAC3B,MAAM,EAAEO,MAAM,CAAC,CACjB;EAED,IAAMqB,gBAAgB,GAAG,IAAAC,cAAO,EAC9B;IAAA,OAAMZ,cAAc,KAAKM,SAAS,IAAIN,cAAc,KAAK,IAAI;EAAA,GAC7D,CAACA,cAAc,CAAC,CACjB;EAED,IAAMa,oBAAoB,GAAG,IAAAD,cAAO,EAAC,YAAM;IACzC,IAAID,gBAAgB,EAAE,OAAO,KAAK;IAClC,OAAO7C,KAAK,GAAGC,eAAe,GAAG,IAAI;EACvC,CAAC,EAAE,CAACD,KAAK,EAAEC,eAAe,EAAE4C,gBAAgB,CAAC,CAAC;EAE9C,IAAMG,UAAU,GAAG,IAAAF,cAAO,EAAC,YAAM;IAC/B,IAAID,gBAAgB,EAAE;MACpB,oBACE;QAAK;MAAW,gBACd,gCAAC,kBAAM;QACL,IAAI,EAAC,OAAO;QACZ,IAAI,EAAC,OAAO;QACZ,IAAI,EAAC,OAAO;QACZ,QAAQ,EAAE1C,QAAS;QACnB,OAAO,EAAE,iBAACyC,CAAC,EAAK;UACdhB,iBAAiB,CAAC,IAAI,CAAC;UACvBgB,CAAC,CAACK,eAAe,EAAE;QACrB,CAAE;QACF,SAAS,EAAE,mBAACL,CAAC,EAAK;UAChB,IAAIzC,QAAQ,EAAE;UACd,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC+C,QAAQ,CAACN,CAAC,CAACO,GAAG,CAAC,EAAE;YAClCvB,iBAAiB,CAAC,IAAI,CAAC;YACvB,IAAI,CAACP,YAAY,CAACS,OAAO,EAAE;YAC3BT,YAAY,CAACS,OAAO,CAACC,KAAK,EAAE;YAC5Ba,CAAC,CAACQ,cAAc,EAAE;YAClBR,CAAC,CAACK,eAAe,EAAE;UACrB;QACF,CAAE;QACF,cAAYzC,MAAM,CAAC6C;MAAW,gBAE9B,gCAAC,iBAAS,OAAG,CACN,CACL;IAEV;IACA,OACErD,KAAK,iBACH,gCAAC,2BAAmB,QACjBwB,MAAM,gBAAG,gCAAC,SAAE,OAAG,gBAAG,gCAAC,WAAI,OAAG,CAE9B;EAEL,CAAC,EAAE,CACDH,YAAY,EACZlB,QAAQ,EACRK,MAAM,CAAC6C,UAAU,EACjB7B,MAAM,EACNxB,KAAK,EACL4B,iBAAiB,EACjBiB,gBAAgB,CACjB,CAAC;EAEF,IAAMS,kBAAkB,GAAG,IAAArB,aAAM,EAAmB,IAAI,CAAC;EACzD,IAAMsB,mBAAmB,GAAG,IAAAtB,aAAM,EAAmB,IAAI,CAAC;EAC1D,IAAMuB,eAAe,GAAG,IAAAvB,aAAM,EAAC,KAAK,CAAC;EAErC,IAAAJ,gBAAS,EAAC,YAAM;IACd2B,eAAe,CAAC1B,OAAO,GAAG,KAAK;EACjC,CAAC,EAAE,CAACN,MAAM,CAAC,CAAC;EAEZ,IAAMiC,aAAa,GAAG,IAAApB,kBAAW,EAC/B,UAACxD,IAAU,EAAK;IACd+C,iBAAiB,CAAC,UAAC8B,IAAI,EAAK;MAC1B,IAAI,CAAC9C,KAAK,EAAE,OAAOhC,UAAU,CAACC,IAAI,EAAE6E,IAAI,CAAC;MAEzC,IAAM3E,CAAC,GAAGH,UAAU,CAACC,IAAI,CAAC;MAC1B,IAAM8E,SAAS,GACbD,IAAI,IAAIE,KAAK,CAACC,OAAO,CAACH,IAAI,CAAC,IAAIF,eAAe,CAAC1B,OAAO,GAClD,CAAC,IAAI9C,IAAI,CAAC0E,IAAI,CAAC,CAAC,CAAC,CAACI,OAAO,EAAE,CAAC,EAAElF,UAAU,CAACC,IAAI,EAAE6E,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GACxD,CAAC3E,CAAC,EAAEA,CAAC,CAAC;MAEZyE,eAAe,CAAC1B,OAAO,GAAG,CAAC0B,eAAe,CAAC1B,OAAO;MAClD,OAAO6B,SAAS,CAACI,IAAI,CACnB,UAACC,CAAO,EAAEC,CAAO;QAAA,OAAKD,CAAC,CAACF,OAAO,EAAE,GAAGG,CAAC,CAACH,OAAO,EAAE;MAAA,EAChD;IACH,CAAC,CAAC;EACJ,CAAC,EACD,CAAClD,KAAK,EAAEgB,iBAAiB,CAAC,CAC3B;EAED,IAAMsC,iBAAiB,GAAG,IAAApB,cAAO,EAC/B;IAAA,oBACE,gCAAC,8BAAkB;MACjB,cAAc,EAAEvC,cAAe;MAC/B,MAAM,EAAEC,MAAO;MACf,KAAK,EAAEmB,cAAe;MACtB,QAAQ,EAAE,kBAACwC,CAAC,EAAK;QAAA;QACfV,aAAa,CAACU,CAAC,CAAC;QAChB,yBAAAb,kBAAkB,CAACxB,OAAO,0DAA1B,sBAA4BC,KAAK,EAAE;QACnC,IAAI,CAACrB,QAAQ,KAAK,CAACE,KAAK,IAAI,CAAC4C,eAAe,CAAC1B,OAAO,CAAC,EAAE;UACrDM,YAAY,EAAE;QAChB;MACF;IAAE,EACF;EAAA,CACH,EACD,CACEqB,aAAa,EACbrB,YAAY,EACZ7B,cAAc,EACdoB,cAAc,EACdnB,MAAM,EACNI,KAAK,EACLF,QAAQ,CACT,CACF;EAED,IAAM0D,kBAAkB,GAAG,IAAA/B,kBAAW,EACpC,UAACO,CAAC,EAAK;IAAA;IACL,IAAIA,CAAC,CAACyB,MAAM,CAACC,cAAc,GAAG,CAAC,EAAE;IACjC,yBAAAf,mBAAmB,CAACzB,OAAO,0DAA3B,sBAA6BC,KAAK,EAAE;IACpCH,iBAAiB,CAAC,iBAAY;MAAA;QAAV2C,IAAI;MACtB,IAAMC,MAAM,GAAG,IAAIxF,IAAI,CAACuF,IAAI,CAACT,OAAO,EAAE,CAAC;MACvCU,MAAM,CAACjF,QAAQ,CAACiF,MAAM,CAAC/E,QAAQ,EAAE,GAAG,CAAC,CAAC;MACtC,OAAO,CAAC8E,IAAI,EAAEC,MAAM,CAAC;IACvB,CAAC,CAAC;EACJ,CAAC,EACD,CAAC5C,iBAAiB,CAAC,CACpB;EAED,IAAM6C,oBAAoB,GAAG,IAAApC,kBAAW,EACtC,UAACO,CAAC,EAAK;IACL,IAAIA,CAAC,CAACyB,MAAM,CAACC,cAAc,GAAG,CAAC,EAAE;IACjClC,YAAY,EAAE;EAChB,CAAC,EACD,CAACA,YAAY,CAAC,CACf;EAED,IAAMsC,aAAa,GAAG,IAAA5B,cAAO,EAC3B;IAAA,OACEpC,QAAQ,IAAIiB,cAAc,gBACxB,gCAAC,aAAa,QACXiC,KAAK,CAACC,OAAO,CAAClC,cAAc,CAAC,gBAC5B,+EACE,gCAAC,gBAAgB;MACf,GAAG,EAAE2B,kBAAmB;MACxB,SAAS;MACT,QAAQ,EAAEnD,QAAS;MACnB,QAAQ,EAAEQ,YAAa;MACvB,cAAc,EAAElC,eAAgB;MAChC,KAAK,EAAEkD,cAAc,CAAC,CAAC,CAAE;MACzB,QAAQ,EAAE,kBAACwC,CAAC;QAAA,OAAKvC,iBAAiB,CAAC,CAACuC,CAAC,EAAExC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;MAAA,CAAC;MAC3D,SAAS,EAAE,mBAACiB,CAAC,EAAK;QAChB,IAAIzC,QAAQ,EAAE;QACd,IAAIyC,CAAC,CAACO,GAAG,KAAK,OAAO,EAAE;UACrB1B,SAAS,CAAC,CAACD,MAAM,CAAC;QACpB;MACF,CAAE;MACF,OAAO,EAAE4C;IAAmB,EAC5B,eACF,gCAAC,IAAI,iBAAS,eACd,gCAAC,gBAAgB;MACf,GAAG,EAAEb,mBAAoB;MACzB,QAAQ,EAAEpD,QAAS;MACnB,QAAQ,EAAEQ,YAAa;MACvB,cAAc,EAAElC,eAAgB;MAChC,KAAK,EAAEkD,cAAc,CAAC,CAAC,CAAE;MACzB,QAAQ,EAAE,kBAACwC,CAAC;QAAA,OAAKvC,iBAAiB,CAAC,CAACD,cAAc,CAAC,CAAC,CAAC,EAAEwC,CAAC,CAAC,CAAC;MAAA,CAAC;MAC3D,SAAS,EAAE,mBAACvB,CAAC,EAAK;QAChB,IAAIzC,QAAQ,EAAE;QACd,IAAIyC,CAAC,CAACO,GAAG,KAAK,OAAO,EAAE;UACrB1B,SAAS,CAAC,CAACD,MAAM,CAAC;QACpB;MACF,CAAE;MACF,OAAO,EAAEiD;IAAqB,EAC9B,CACD,gBAEH,gCAAC,gBAAgB;MACf,GAAG,EAAEnB,kBAAmB;MACxB,SAAS;MACT,QAAQ,EAAEnD,QAAS;MACnB,QAAQ,EAAEQ,YAAa;MACvB,cAAc,EAAElC,eAAgB;MAChC,KAAK,EAAEkD,cAAe;MACtB,QAAQ,EAAEC,iBAAkB;MAC5B,SAAS,EAAE,mBAACgB,CAAC,EAAK;QAChB,IAAIzC,QAAQ,EAAE;QACd,IAAIyC,CAAC,CAACO,GAAG,KAAK,OAAO,EAAE;UACrB1B,SAAS,CAAC,CAACD,MAAM,CAAC;QACpB;MACF,CAAE;MACF,OAAO,EAAEiD;IAAqB,EAEjC,CACa,GACd,IAAI;EAAA,GACV,CACEA,oBAAoB,EACpBtE,QAAQ,EACRwB,cAAc,EACdH,MAAM,EACNI,iBAAiB,EACjBlB,QAAQ,EACR0D,kBAAkB,EAClBzD,YAAY,CACb,CACF;EAED,oBACE,+EACE,gCAAC,uBAAe;IACd,MAAM,EAAEa,MAAO;IACf,QAAQ,EAAErB,QAAS;IACnB,IAAI,EAAEe,IAAK;IACX,QAAQ,EAAE,CAACf,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;IAC7B,OAAO,EAAE,mBAAM;MACb,IAAIA,QAAQ,EAAE;MACdsB,SAAS,CAAC,CAACD,MAAM,CAAC;IACpB,CAAE;IACF,SAAS,EAAE,mBAACoB,CAAC,EAAK;MAChB,IAAIzC,QAAQ,EAAE;MACd,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC+C,QAAQ,CAACN,CAAC,CAACO,GAAG,CAAC,EAAE;QAClC1B,SAAS,CAAC,CAACD,MAAM,CAAC;QAClBoB,CAAC,CAACQ,cAAc,EAAE;MACpB;IACF,CAAE;IACF,WAAW,EAAE,qBAACR,CAAC;MAAA,OAAKA,CAAC,CAACQ,cAAc,EAAE;IAAA,CAAC;IACvC,MAAM,EAAET,WAAY;IACpB,IAAI,EAAC,UAAU;IACf,cACEhB,cAAc,GACV,IAAAgD,0CAAyB,EAAChD,cAAc,EAAEnB,MAAM,CAAC,GACjDgC,SACL;IACD,iBAAerC;EAAS,GACpBgB,IAAI;IACR,GAAG,EAAEG;EAAmB,IAEvBxB,IAAI,iBACH,gCAAC,uBAAc;IACb,SAAS,EAAE,mBAAC8E,CAAC;MAAA,OAAM;QACjBC,uBAAuB,EAAE,GAAG;QAC5BvG,UAAU,EAAEsG,CAAC,CAACE,0BAA0B,GAAGF,CAAC,CAACG,KAAK,CAACC;MACrD,CAAC;IAAA;EAAE,gBAEH,gCAAC,uBAAe;IAAC,UAAU,EAAEjF;EAAe,GACzCD,IAAI,CACW,CAErB,eAED,gCAAC,qBAAa;IAAC,OAAO,EAAE,CAAC,CAACA,IAAK;IAAC,QAAQ,EAAE,CAAC,CAACE;EAAM,GAC/C6C,gBAAgB,gBACf,gCAAC,aAAK;IAAC,QAAQ,EAAE1C,QAAS;IAAC;EAAW,GACnC+B,cAAc,CACT,gBAER,gCAAC,mBAAW,QAAEhC,WAAW,CAC1B,CACa,EAEf8C,UAAU,iBACT,gCAAC,uBAAc;IACb,SAAS,EAAE,mBAAC4B,CAAC;MAAA,OAAM;QACjBC,uBAAuB,EAAE,GAAG;QAC5BvG,UAAU,EAAEsG,CAAC,CAACE,0BAA0B,GAAGF,CAAC,CAACG,KAAK,CAACC;MACrD,CAAC;IAAA;EAAE,gBAEH,gCAAC,wBAAgB;IAAC,UAAU,EAAEjC;EAAqB,GAChDC,UAAU,CACM,CAEtB,CACe,EAEjBP,OAAO,gBACN,gCAAC,aAAa;IACZ,OAAO,EAAEpB,YAAa;IACtB,SAAS,EAAC,cAAc;IACxB,OAAO,EAAEG,MAAO;IAChB,OAAO,EAAEY,YAAa;IACtB,IAAI,EAAElB;EAAK,GAEVgD,iBAAiB,EACjBQ,aAAa,CACA,gBAEhB,gCAAC,iBAAK;IACJ,KAAK,EAAExE,WAAY;IACnB,MAAM,EAAE,IAAK;IACb,MAAM,EAAE,IAAK;IACb,OAAO,EAAEsB,MAAO;IAChB,OAAO,EAAEY,YAAa;IACtB,IAAI,EAAElB;EAAK,GAEVgD,iBAAiB,EACjBQ,aAAa,CAEjB,CACA;AAEP,CAAC,CACF;AAED/E,UAAU,CAACsF,WAAW,GAAG,YAAY;AAAC,eAEvBtF,UAAU;AAAA"}

package/dist/cjs/MenuGroup/index.js

@@ -5,23 +5,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireWildcard(require("react"));
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-var _theming = require("@os-design/theming");
-var _styles = require("@os-design/styles");
-var _utils = require("@os-design/utils");
 var _media = require("@os-design/media");
 var _menuUtils = require("@os-design/menu-utils");
+var _styles = require("@os-design/styles");
+var _theming = require("@os-design/theming");
+var _utils = require("@os-design/utils");
+var _react = _interopRequireWildcard(require("react"));
 var _MenuItem = _interopRequireDefault(require("../MenuItem"));
-var _excluded = ["title", "maxSelectedItems", "value", "defaultValue", "onChange", "children"];
+var _excluded = ["title", "multiple", "maxSelectedItems", "value", "defaultValue", "onChange", "children"];
 var _templateObject, _templateObject2;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -49,8 +53,10 @@ var Container = _styled["default"].div(_templateObject2 || (_templateObject2 = _
  */
 var MenuGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var title = _ref.title,
+    _ref$multiple = _ref.multiple,
+    multiple = _ref$multiple === void 0 ? false : _ref$multiple,
     _ref$maxSelectedItems = _ref.maxSelectedItems,
-    maxSelectedItems = _ref$maxSelectedItems === void 0 ? 1 : _ref$maxSelectedItems,
+    maxSelectedItems = _ref$maxSelectedItems === void 0 ? 0 : _ref$maxSelectedItems,
     value = _ref.value,
     defaultValue = _ref.defaultValue,
     _ref$onChange = _ref.onChange,
@@ -59,6 +65,7 @@ var MenuGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useContext = (0, _react.useContext)(_menuUtils.MenuContext),
     closeOnSelect = _useContext.closeOnSelect;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   var _useForwardedState = (0, _utils.useForwardedState)({
       value: value,
       defaultValue: defaultValue,
@@ -67,21 +74,35 @@ var MenuGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _useForwardedState2 = _slicedToArray(_useForwardedState, 2),
     forwardedValue = _useForwardedState2[0],
     setForwardedValue = _useForwardedState2[1];
-  var onSelect = (0, _menuUtils.useSelectHandler)({
-    value: forwardedValue || [],
-    onChange: setForwardedValue,
-    maxSelectedItems: maxSelectedItems
-  });
+  var onSelect = (0, _react.useCallback)(function (v) {
+    if (multiple) {
+      // Delete the value because it was already selected
+      if ((forwardedValue || []).includes(v)) {
+        setForwardedValue((forwardedValue || []).filter(function (item) {
+          return item !== v;
+        }));
+        return;
+      }
+
+      // Add a new value if the number of selected items is less than max
+      if (maxSelectedItems === 0 || (forwardedValue || []).length < maxSelectedItems) {
+        setForwardedValue([].concat(_toConsumableArray(forwardedValue || []), [v]));
+        return;
+      }
+      return;
+    }
+    setForwardedValue(v);
+  }, [forwardedValue, maxSelectedItems, multiple, setForwardedValue]);
   var menuItems = (0, _react.useMemo)(function () {
-    var selectedItems = forwardedValue || [];
     return _react["default"].Children.map(children, function (child) {
       if (! /*#__PURE__*/_react["default"].isValidElement(child) || child.type !== _MenuItem["default"]) return child;
       var _child$props = child.props,
         childValue = _child$props.value,
         childOnClick = _child$props.onClick;
+      var selected = multiple && (forwardedValue || []).includes(childValue) || !multiple && forwardedValue === childValue;
       return /*#__PURE__*/_react["default"].cloneElement(child, _objectSpread({
         key: childValue,
-        selected: selectedItems.includes(childValue),
+        selected: selected,
         onClick: function onClick(e) {
           if (!childValue) return;
           onSelect(childValue);
@@ -89,10 +110,10 @@ var MenuGroup = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         }
       }, !closeOnSelect ? {
         role: maxSelectedItems === 1 ? 'menuitemradio' : 'menuitemcheckbox',
-        'aria-checked': selectedItems.includes(childValue)
+        'aria-checked': selected
       } : {}));
     });
-  }, [children, closeOnSelect, forwardedValue, maxSelectedItems, onSelect]);
+  }, [children, closeOnSelect, forwardedValue, maxSelectedItems, multiple, onSelect]);
   return /*#__PURE__*/_react["default"].createElement(Container, _extends({
     role: maxSelectedItems === 1 ? 'radiogroup' : 'group'
   }, rest, {

package/dist/cjs/MenuGroup/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Title","styled","div","p","theme","sizes","small","clr","menuGroupColorTitle","modalBodyPaddingHorizontal","m","min","xs","ellipsisStyles","Container","menuGroupColorDivider","modalBodyPaddingVertical","MenuGroup","forwardRef","ref","title","maxSelectedItems","value","defaultValue","onChange","children","rest","useContext","MenuContext","closeOnSelect","useForwardedState","forwardedValue","setForwardedValue","onSelect","useSelectHandler","menuItems","useMemo","selectedItems","React","Children","map","child","isValidElement","type","MenuItem","props","childValue","childOnClick","onClick","cloneElement","key","selected","includes","e","role","displayName"],"sources":["../../../src/MenuGroup/index.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useMemo } from 'react';\nimport styled from '@emotion/styled';\nimport { clr } from '@os-design/theming';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { useForwardedState } from '@os-design/utils';\nimport { m } from '@os-design/media';\nimport { useSelectHandler, MenuContext } from '@os-design/menu-utils';\nimport MenuItem from '../MenuItem';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'value' | 'onChange' | 'ref'\n>;\nexport interface MenuGroupProps extends JsxDivProps {\n  /**\n   * The title of the menu group.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The max number of menu items that the user can select.\n   * @default 1\n   */\n  maxSelectedItems?: number | 'all';\n  /**\n   * Selected menu items.\n   * @default undefined\n   */\n  value?: string[];\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: string[];\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: string[]) => void;\n}\n\nconst Title = styled.div`\n  font-weight: 500;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.menuGroupColorTitle)};\n  margin-bottom: 0.4em;\n\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 0.8em;\n  }\n\n  ${ellipsisStyles};\n`;\n\nconst Container = styled.div`\n  &:not(:last-of-type) {\n    padding-bottom: 0.4em;\n    border-bottom: 1px solid ${(p) => clr(p.theme.menuGroupColorDivider)};\n  }\n  &:not(:first-of-type) {\n    margin-top: ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n    ${m.min.xs} {\n      margin-top: 0.4em;\n    }\n  }\n`;\n\n/**\n * The group of menu items.\n */\nconst MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n  (\n    {\n      title,\n      maxSelectedItems = 1,\n      value,\n      defaultValue,\n      onChange = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { closeOnSelect } = useContext(MenuContext);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const onSelect = useSelectHandler({\n      value: forwardedValue || [],\n      onChange: setForwardedValue,\n      maxSelectedItems,\n    });\n\n    const menuItems = useMemo(() => {\n      const selectedItems = forwardedValue || [];\n      return React.Children.map(children, (child) => {\n        if (!React.isValidElement(child) || child.type !== MenuItem)\n          return child;\n        const { value: childValue, onClick: childOnClick } = child.props;\n        return React.cloneElement<any>(child, {\n          key: childValue,\n          selected: selectedItems.includes(childValue),\n          onClick: (e) => {\n            if (!childValue) return;\n            onSelect(childValue);\n            if (childOnClick) childOnClick(e);\n          },\n          ...(!closeOnSelect\n            ? {\n                role:\n                  maxSelectedItems === 1 ? 'menuitemradio' : 'menuitemcheckbox',\n                'aria-checked': selectedItems.includes(childValue),\n              }\n            : {}),\n        });\n      });\n    }, [children, closeOnSelect, forwardedValue, maxSelectedItems, onSelect]);\n\n    return (\n      <Container\n        role={maxSelectedItems === 1 ? 'radiogroup' : 'group'}\n        {...rest}\n        ref={ref}\n      >\n        {title && <Title>{title}</Title>}\n        {menuItems}\n      </Container>\n    );\n  }\n);\n\nMenuGroup.displayName = 'MenuGroup';\n\nexport default MenuGroup;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCnC,IAAMA,KAAK,GAAGC,kBAAM,CAACC,GAAG,qOAET,UAACC,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACC,KAAK,CAACC,KAAK;AAAA,GAC9B,UAACH,CAAC;EAAA,OAAK,IAAAI,YAAG,EAACJ,CAAC,CAACC,KAAK,CAACI,mBAAmB,CAAC;AAAA,GAGnC,UAACL,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACK,0BAA0B,CAAC,CAAC,CAAC;AAAA,GACvDC,QAAC,CAACC,GAAG,CAACC,EAAE,EAIRC,sBAAc,CACjB;AAED,IAAMC,SAAS,GAAGb,kBAAM,CAACC,GAAG,+QAGG,UAACC,CAAC;EAAA,OAAK,IAAAI,YAAG,EAACJ,CAAC,CAACC,KAAK,CAACW,qBAAqB,CAAC;AAAA,GAGtD,UAACZ,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACY,wBAAwB,CAAC,CAAC,CAAC;AAAA,GACtDN,QAAC,CAACC,GAAG,CAACC,EAAE,CAIb;;AAED;AACA;AACA;AACA,IAAMK,SAAS,gBAAG,IAAAC,iBAAU,EAC1B,gBAUEC,GAAG,EACA;EAAA,IATDC,KAAK,QAALA,KAAK;IAAA,6BACLC,gBAAgB;IAAhBA,gBAAgB,sCAAG,CAAC;IACpBC,KAAK,QAALA,KAAK;IACLC,YAAY,QAAZA,YAAY;IAAA,qBACZC,QAAQ;IAARA,QAAQ,8BAAG,YAAM,CAAC,CAAC;IACnBC,QAAQ,QAARA,QAAQ;IACLC,IAAI;EAIT,kBAA0B,IAAAC,iBAAU,EAACC,sBAAW,CAAC;IAAzCC,aAAa,eAAbA,aAAa;EACrB,yBAA4C,IAAAC,wBAAiB,EAAC;MAC5DR,KAAK,EAALA,KAAK;MACLC,YAAY,EAAZA,YAAY;MACZC,QAAQ,EAARA;IACF,CAAC,CAAC;IAAA;IAJKO,cAAc;IAAEC,iBAAiB;EAMxC,IAAMC,QAAQ,GAAG,IAAAC,2BAAgB,EAAC;IAChCZ,KAAK,EAAES,cAAc,IAAI,EAAE;IAC3BP,QAAQ,EAAEQ,iBAAiB;IAC3BX,gBAAgB,EAAhBA;EACF,CAAC,CAAC;EAEF,IAAMc,SAAS,GAAG,IAAAC,cAAO,EAAC,YAAM;IAC9B,IAAMC,aAAa,GAAGN,cAAc,IAAI,EAAE;IAC1C,OAAOO,iBAAK,CAACC,QAAQ,CAACC,GAAG,CAACf,QAAQ,EAAE,UAACgB,KAAK,EAAK;MAC7C,IAAI,eAACH,iBAAK,CAACI,cAAc,CAACD,KAAK,CAAC,IAAIA,KAAK,CAACE,IAAI,KAAKC,oBAAQ,EACzD,OAAOH,KAAK;MACd,mBAAqDA,KAAK,CAACI,KAAK;QAAjDC,UAAU,gBAAjBxB,KAAK;QAAuByB,YAAY,gBAArBC,OAAO;MAClC,oBAAOV,iBAAK,CAACW,YAAY,CAAMR,KAAK;QAClCS,GAAG,EAAEJ,UAAU;QACfK,QAAQ,EAAEd,aAAa,CAACe,QAAQ,CAACN,UAAU,CAAC;QAC5CE,OAAO,EAAE,iBAACK,CAAC,EAAK;UACd,IAAI,CAACP,UAAU,EAAE;UACjBb,QAAQ,CAACa,UAAU,CAAC;UACpB,IAAIC,YAAY,EAAEA,YAAY,CAACM,CAAC,CAAC;QACnC;MAAC,GACG,CAACxB,aAAa,GACd;QACEyB,IAAI,EACFjC,gBAAgB,KAAK,CAAC,GAAG,eAAe,GAAG,kBAAkB;QAC/D,cAAc,EAAEgB,aAAa,CAACe,QAAQ,CAACN,UAAU;MACnD,CAAC,GACD,CAAC,CAAC,EACN;IACJ,CAAC,CAAC;EACJ,CAAC,EAAE,CAACrB,QAAQ,EAAEI,aAAa,EAAEE,cAAc,EAAEV,gBAAgB,EAAEY,QAAQ,CAAC,CAAC;EAEzE,oBACE,gCAAC,SAAS;IACR,IAAI,EAAEZ,gBAAgB,KAAK,CAAC,GAAG,YAAY,GAAG;EAAQ,GAClDK,IAAI;IACR,GAAG,EAAEP;EAAI,IAERC,KAAK,iBAAI,gCAAC,KAAK,QAAEA,KAAK,CAAS,EAC/Be,SAAS,CACA;AAEhB,CAAC,CACF;AAEDlB,SAAS,CAACsC,WAAW,GAAG,WAAW;AAAC,eAErBtC,SAAS;AAAA"}
+{"version":3,"file":"index.js","names":["Title","styled","div","p","theme","sizes","small","clr","menuGroupColorTitle","modalBodyPaddingHorizontal","m","min","xs","ellipsisStyles","Container","menuGroupColorDivider","modalBodyPaddingVertical","MenuGroup","forwardRef","ref","title","multiple","maxSelectedItems","value","defaultValue","onChange","children","rest","useContext","MenuContext","closeOnSelect","useForwardedState","forwardedValue","setForwardedValue","onSelect","useCallback","v","includes","filter","item","length","menuItems","useMemo","React","Children","map","child","isValidElement","type","MenuItem","props","childValue","childOnClick","onClick","selected","cloneElement","key","e","role","displayName"],"sources":["../../../src/MenuGroup/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { MenuContext } from '@os-design/menu-utils';\nimport { ellipsisStyles } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport { useForwardedState } from '@os-design/utils';\nimport React, { forwardRef, useCallback, useContext, useMemo } from 'react';\nimport MenuItem from '../MenuItem';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'defaultValue' | 'value' | 'onChange' | 'ref'\n>;\ninterface BaseMenuGroupProps<T> extends JsxDivProps {\n  /**\n   * The title of the menu group.\n   * @default undefined\n   */\n  title?: string;\n  /**\n   * The max number of options that the user can select. Zero means unlimited.\n   * Works only when multiple is true.\n   * @default 0\n   */\n  maxSelectedItems?: number;\n  /**\n   * Selected menu items.\n   * @default undefined\n   */\n  value?: T;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: T;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: T) => void;\n}\ninterface MenuGroupNotMultipleProps extends BaseMenuGroupProps<string | null> {\n  /**\n   * Is it possible to select multiple values.\n   * @default false\n   */\n  multiple?: false;\n}\ninterface MenuGroupMultipleProps extends BaseMenuGroupProps<string[]> {\n  /**\n   * Is it possible to select multiple values.\n   * @default false\n   */\n  multiple: true;\n}\nexport type MenuGroupProps = MenuGroupNotMultipleProps | MenuGroupMultipleProps;\n\nconst Title = styled.div`\n  font-weight: 500;\n  font-size: ${(p) => p.theme.sizes.small}em;\n  color: ${(p) => clr(p.theme.menuGroupColorTitle)};\n  margin-bottom: 0.4em;\n\n  padding: 0 ${(p) => p.theme.modalBodyPaddingHorizontal[0]}em;\n  ${m.min.xs} {\n    padding: 0 0.8em;\n  }\n\n  ${ellipsisStyles};\n`;\n\nconst Container = styled.div`\n  &:not(:last-of-type) {\n    padding-bottom: 0.4em;\n    border-bottom: 1px solid ${(p) => clr(p.theme.menuGroupColorDivider)};\n  }\n  &:not(:first-of-type) {\n    margin-top: ${(p) => p.theme.modalBodyPaddingVertical[0]}em;\n    ${m.min.xs} {\n      margin-top: 0.4em;\n    }\n  }\n`;\n\n/**\n * The group of menu items.\n */\nconst MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>(\n  (\n    {\n      title,\n      multiple = false,\n      maxSelectedItems = 0,\n      value,\n      defaultValue,\n      onChange = () => {},\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const { closeOnSelect } = useContext(MenuContext);\n    // eslint-disable-next-line @typescript-eslint/no-explicit-any\n    const [forwardedValue, setForwardedValue] = useForwardedState<any>({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const onSelect = useCallback(\n      (v: string) => {\n        if (multiple) {\n          // Delete the value because it was already selected\n          if ((forwardedValue || []).includes(v)) {\n            setForwardedValue(\n              (forwardedValue || []).filter((item) => item !== v)\n            );\n            return;\n          }\n\n          // Add a new value if the number of selected items is less than max\n          if (\n            maxSelectedItems === 0 ||\n            (forwardedValue || []).length < maxSelectedItems\n          ) {\n            setForwardedValue([...(forwardedValue || []), v]);\n            return;\n          }\n          return;\n        }\n        setForwardedValue(v);\n      },\n      [forwardedValue, maxSelectedItems, multiple, setForwardedValue]\n    );\n\n    const menuItems = useMemo(\n      () =>\n        React.Children.map(children, (child) => {\n          if (!React.isValidElement(child) || child.type !== MenuItem)\n            return child;\n          const { value: childValue, onClick: childOnClick } = child.props;\n          const selected =\n            (multiple && (forwardedValue || []).includes(childValue)) ||\n            (!multiple && forwardedValue === childValue);\n          return React.cloneElement<any>(child, {\n            key: childValue,\n            selected,\n            onClick: (e) => {\n              if (!childValue) return;\n              onSelect(childValue);\n              if (childOnClick) childOnClick(e);\n            },\n            ...(!closeOnSelect\n              ? {\n                  role:\n                    maxSelectedItems === 1\n                      ? 'menuitemradio'\n                      : 'menuitemcheckbox',\n                  'aria-checked': selected,\n                }\n              : {}),\n          });\n        }),\n      [\n        children,\n        closeOnSelect,\n        forwardedValue,\n        maxSelectedItems,\n        multiple,\n        onSelect,\n      ]\n    );\n\n    return (\n      <Container\n        role={maxSelectedItems === 1 ? 'radiogroup' : 'group'}\n        {...rest}\n        ref={ref}\n      >\n        {title && <Title>{title}</Title>}\n        {menuItems}\n      </Container>\n    );\n  }\n);\n\nMenuGroup.displayName = 'MenuGroup';\n\nexport default MenuGroup;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AAAmC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkDnC,IAAMA,KAAK,GAAGC,kBAAM,CAACC,GAAG,qOAET,UAACC,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACC,KAAK,CAACC,KAAK;AAAA,GAC9B,UAACH,CAAC;EAAA,OAAK,IAAAI,YAAG,EAACJ,CAAC,CAACC,KAAK,CAACI,mBAAmB,CAAC;AAAA,GAGnC,UAACL,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACK,0BAA0B,CAAC,CAAC,CAAC;AAAA,GACvDC,QAAC,CAACC,GAAG,CAACC,EAAE,EAIRC,sBAAc,CACjB;AAED,IAAMC,SAAS,GAAGb,kBAAM,CAACC,GAAG,+QAGG,UAACC,CAAC;EAAA,OAAK,IAAAI,YAAG,EAACJ,CAAC,CAACC,KAAK,CAACW,qBAAqB,CAAC;AAAA,GAGtD,UAACZ,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACY,wBAAwB,CAAC,CAAC,CAAC;AAAA,GACtDN,QAAC,CAACC,GAAG,CAACC,EAAE,CAIb;;AAED;AACA;AACA;AACA,IAAMK,SAAS,gBAAG,IAAAC,iBAAU,EAC1B,gBAWEC,GAAG,EACA;EAAA,IAVDC,KAAK,QAALA,KAAK;IAAA,qBACLC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,6BAChBC,gBAAgB;IAAhBA,gBAAgB,sCAAG,CAAC;IACpBC,KAAK,QAALA,KAAK;IACLC,YAAY,QAAZA,YAAY;IAAA,qBACZC,QAAQ;IAARA,QAAQ,8BAAG,YAAM,CAAC,CAAC;IACnBC,QAAQ,QAARA,QAAQ;IACLC,IAAI;EAIT,kBAA0B,IAAAC,iBAAU,EAACC,sBAAW,CAAC;IAAzCC,aAAa,eAAbA,aAAa;EACrB;EACA,yBAA4C,IAAAC,wBAAiB,EAAM;MACjER,KAAK,EAALA,KAAK;MACLC,YAAY,EAAZA,YAAY;MACZC,QAAQ,EAARA;IACF,CAAC,CAAC;IAAA;IAJKO,cAAc;IAAEC,iBAAiB;EAMxC,IAAMC,QAAQ,GAAG,IAAAC,kBAAW,EAC1B,UAACC,CAAS,EAAK;IACb,IAAIf,QAAQ,EAAE;MACZ;MACA,IAAI,CAACW,cAAc,IAAI,EAAE,EAAEK,QAAQ,CAACD,CAAC,CAAC,EAAE;QACtCH,iBAAiB,CACf,CAACD,cAAc,IAAI,EAAE,EAAEM,MAAM,CAAC,UAACC,IAAI;UAAA,OAAKA,IAAI,KAAKH,CAAC;QAAA,EAAC,CACpD;QACD;MACF;;MAEA;MACA,IACEd,gBAAgB,KAAK,CAAC,IACtB,CAACU,cAAc,IAAI,EAAE,EAAEQ,MAAM,GAAGlB,gBAAgB,EAChD;QACAW,iBAAiB,8BAAMD,cAAc,IAAI,EAAE,IAAGI,CAAC,GAAE;QACjD;MACF;MACA;IACF;IACAH,iBAAiB,CAACG,CAAC,CAAC;EACtB,CAAC,EACD,CAACJ,cAAc,EAAEV,gBAAgB,EAAED,QAAQ,EAAEY,iBAAiB,CAAC,CAChE;EAED,IAAMQ,SAAS,GAAG,IAAAC,cAAO,EACvB;IAAA,OACEC,iBAAK,CAACC,QAAQ,CAACC,GAAG,CAACnB,QAAQ,EAAE,UAACoB,KAAK,EAAK;MACtC,IAAI,eAACH,iBAAK,CAACI,cAAc,CAACD,KAAK,CAAC,IAAIA,KAAK,CAACE,IAAI,KAAKC,oBAAQ,EACzD,OAAOH,KAAK;MACd,mBAAqDA,KAAK,CAACI,KAAK;QAAjDC,UAAU,gBAAjB5B,KAAK;QAAuB6B,YAAY,gBAArBC,OAAO;MAClC,IAAMC,QAAQ,GACXjC,QAAQ,IAAI,CAACW,cAAc,IAAI,EAAE,EAAEK,QAAQ,CAACc,UAAU,CAAC,IACvD,CAAC9B,QAAQ,IAAIW,cAAc,KAAKmB,UAAW;MAC9C,oBAAOR,iBAAK,CAACY,YAAY,CAAMT,KAAK;QAClCU,GAAG,EAAEL,UAAU;QACfG,QAAQ,EAARA,QAAQ;QACRD,OAAO,EAAE,iBAACI,CAAC,EAAK;UACd,IAAI,CAACN,UAAU,EAAE;UACjBjB,QAAQ,CAACiB,UAAU,CAAC;UACpB,IAAIC,YAAY,EAAEA,YAAY,CAACK,CAAC,CAAC;QACnC;MAAC,GACG,CAAC3B,aAAa,GACd;QACE4B,IAAI,EACFpC,gBAAgB,KAAK,CAAC,GAClB,eAAe,GACf,kBAAkB;QACxB,cAAc,EAAEgC;MAClB,CAAC,GACD,CAAC,CAAC,EACN;IACJ,CAAC,CAAC;EAAA,GACJ,CACE5B,QAAQ,EACRI,aAAa,EACbE,cAAc,EACdV,gBAAgB,EAChBD,QAAQ,EACRa,QAAQ,CACT,CACF;EAED,oBACE,gCAAC,SAAS;IACR,IAAI,EAAEZ,gBAAgB,KAAK,CAAC,GAAG,YAAY,GAAG;EAAQ,GAClDK,IAAI;IACR,GAAG,EAAER;EAAI,IAERC,KAAK,iBAAI,gCAAC,KAAK,QAAEA,KAAK,CAAS,EAC/BqB,SAAS,CACA;AAEhB,CAAC,CACF;AAEDxB,SAAS,CAAC0C,WAAW,GAAG,WAAW;AAAC,eAErB1C,SAAS;AAAA"}