@os-design/core 1.0.167 → 1.0.168

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +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","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","valueIsSpecified","useMemo","rightHasPaddingValue","rightValue","e","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 calendar 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 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) onCloseRef.current();\n }, [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 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 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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"}
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","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","valueIsSpecified","useMemo","rightHasPaddingValue","rightValue","e","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 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) onCloseRef.current();\n }, [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 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 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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"}
@@ -5,24 +5,24 @@ Object.defineProperty(exports, "__esModule", {
5
5
  value: true
6
6
  });
7
7
  exports["default"] = exports.SelectContainer = void 0;
8
- var _react = _interopRequireWildcard(require("react"));
9
- var _styles = require("@os-design/styles");
10
- var _utils = require("@os-design/utils");
8
+ var _react = require("@emotion/react");
11
9
  var _styled = _interopRequireDefault(require("@emotion/styled"));
12
10
  var _media = require("@os-design/media");
13
- var _react2 = require("@emotion/react");
11
+ var _styles = require("@os-design/styles");
14
12
  var _theming = require("@os-design/theming");
13
+ var _utils = require("@os-design/utils");
14
+ var _react2 = _interopRequireWildcard(require("react"));
15
15
  var _Input = require("../Input");
16
- var _Menu = _interopRequireDefault(require("../Menu"));
17
16
  var _InputSearch = _interopRequireDefault(require("../InputSearch"));
18
- var _SelectToggle = _interopRequireDefault(require("./SelectToggle"));
17
+ var _Menu = _interopRequireDefault(require("../Menu"));
19
18
  var _SelectList = _interopRequireDefault(require("./SelectList"));
19
+ var _SelectToggle = _interopRequireDefault(require("./SelectToggle"));
20
20
  var _defaultLocale = _interopRequireDefault(require("./utils/defaultLocale"));
21
- var _excluded = ["options", "left", "leftHasPadding", "right", "rightHasPadding", "placeholder", "searchVisible", "searchProps", "notFoundText", "unbordered", "loading", "disabled", "autoFocus", "autoOpen", "clearVisible", "threshold", "visibleCount", "overscanCount", "maxSelectedItems", "locale", "value", "defaultValue", "onChange", "onLoadNext", "size", "placement"];
21
+ var _excluded = ["options", "left", "leftHasPadding", "right", "rightHasPadding", "placeholder", "searchVisible", "searchProps", "notFoundText", "unbordered", "loading", "disabled", "autoFocus", "autoOpen", "clearVisible", "threshold", "visibleCount", "overscanCount", "maxSelectedItems", "locale", "value", "defaultValue", "onChange", "onLoadNext", "onClose", "size", "placement"];
22
22
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
23
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
24
23
  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); }
25
24
  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; }
25
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
26
26
  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); }
27
27
  function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
28
28
  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."); }
@@ -35,16 +35,16 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
35
35
  function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
36
36
  var paddingStyles = function paddingStyles(p) {
37
37
  var paddingVertical = (p.theme.baseHeight - p.theme.selectToggleListItemHeight) / 2;
38
- return (0, _react2.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: calc(", "em - 1px) 0;\n "])), paddingVertical);
38
+ return (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n padding: calc(", "em - 1px) 0;\n "])), paddingVertical);
39
39
  };
40
40
  var openedStyles = function openedStyles(p) {
41
- return p.opened && !p.unbordered && (0, _react2.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border-color: ", ";\n box-shadow: 0 0 0 0.15em ", ";\n "])), (0, _theming.clr)(p.theme.inputFocusColorBorder), (0, _theming.clr)(p.theme.inputFocusColorShadow));
41
+ return p.opened && !p.unbordered && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border-color: ", ";\n box-shadow: 0 0 0 0.15em ", ";\n "])), (0, _theming.clr)(p.theme.inputFocusColorBorder), (0, _theming.clr)(p.theme.inputFocusColorShadow));
42
42
  };
43
43
  var unborderedStyles = function unborderedStyles(p) {
44
- return p.unbordered && (0, _react2.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n border: 0;\n box-shadow: none !important;\n ", ";\n "])), (0, _styles.transitionStyles)('background-color')(p));
44
+ return p.unbordered && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n border: 0;\n box-shadow: none !important;\n ", ";\n "])), (0, _styles.transitionStyles)('background-color')(p));
45
45
  };
46
46
  var unborderedHoverStyles = function unborderedHoverStyles(p) {
47
- return p.unbordered && !p.disabled && (0, _react2.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n @media (hover: hover) {\n &:hover,\n &:focus {\n background-color: ", ";\n }\n }\n "])), (0, _theming.clr)(p.theme.buttonGhostColorBgHover));
47
+ return p.unbordered && !p.disabled && (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n @media (hover: hover) {\n &:hover,\n &:focus {\n background-color: ", ";\n }\n }\n "])), (0, _theming.clr)(p.theme.buttonGhostColorBgHover));
48
48
  };
49
49
  var SelectContainer = (0, _styled["default"])(_Input.InputContainer, (0, _utils.omitEmotionProps)('opened', 'unbordered', 'disabled'))(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n cursor: ", ";\n user-select: none;\n position: relative;\n display: flex;\n align-items: center;\n\n height: unset;\n min-height: ", "em;\n\n ", ";\n ", ";\n ", ";\n ", ";\n"])), function (p) {
50
50
  return !p.disabled ? 'pointer' : 'not-allowed';
@@ -71,7 +71,7 @@ var InputSearchContainer = _styled["default"].div(_templateObject8 || (_template
71
71
  /**
72
72
  * The component that allows to pick a value from predefined options.
73
73
  */
74
- var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
74
+ var Select = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
75
75
  var _ref$options = _ref.options,
76
76
  options = _ref$options === void 0 ? [] : _ref$options,
77
77
  left = _ref.left,
@@ -114,6 +114,8 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
114
114
  onChange = _ref.onChange,
115
115
  _ref$onLoadNext = _ref.onLoadNext,
116
116
  onLoadNext = _ref$onLoadNext === void 0 ? function () {} : _ref$onLoadNext,
117
+ _ref$onClose = _ref.onClose,
118
+ onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
117
119
  size = _ref.size,
118
120
  placement = _ref.placement,
119
121
  rest = _objectWithoutProperties(_ref, _excluded);
@@ -121,12 +123,12 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
121
123
  _useForwardedRef2 = _slicedToArray(_useForwardedRef, 2),
122
124
  containerRef = _useForwardedRef2[0],
123
125
  mergedContainerRef = _useForwardedRef2[1];
124
- var _useState = (0, _react.useState)(0),
126
+ var _useState = (0, _react2.useState)(0),
125
127
  _useState2 = _slicedToArray(_useState, 2),
126
128
  width = _useState2[0],
127
129
  setWidth = _useState2[1];
128
- var inputSearchContainerRef = (0, _react.useRef)(null);
129
- var _useState3 = (0, _react.useState)(autoOpen),
130
+ var inputSearchContainerRef = (0, _react2.useRef)(null);
131
+ var _useState3 = (0, _react2.useState)(autoOpen),
130
132
  _useState4 = _slicedToArray(_useState3, 2),
131
133
  opened = _useState4[0],
132
134
  setOpened = _useState4[1];
@@ -138,17 +140,24 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
138
140
  _useForwardedState2 = _slicedToArray(_useForwardedState, 2),
139
141
  forwardedValue = _useForwardedState2[0],
140
142
  setForwardedValue = _useForwardedState2[1];
141
- (0, _react.useEffect)(function () {
143
+ (0, _react2.useEffect)(function () {
142
144
  var _containerRef$current;
143
145
  if (!autoFocus) return;
144
146
  (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.focus();
145
147
  }, [autoFocus, containerRef]);
148
+ var onCloseRef = (0, _react2.useRef)(onClose);
149
+ (0, _react2.useEffect)(function () {
150
+ onCloseRef.current = onClose;
151
+ }, [onClose]);
152
+ (0, _react2.useEffect)(function () {
153
+ if (!opened) onCloseRef.current();
154
+ }, [opened]);
146
155
 
147
156
  /**
148
157
  * Detect the width of the container when the select was opened and update
149
158
  * it when either the container size or the window size has been changed.
150
159
  */
151
- var resizeHandler = (0, _react.useCallback)(function () {
160
+ var resizeHandler = (0, _react2.useCallback)(function () {
152
161
  window.requestAnimationFrame(function () {
153
162
  if (!opened || !containerRef.current) return;
154
163
  var nextWidth = containerRef.current.getBoundingClientRect().width;
@@ -167,7 +176,7 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
167
176
  if (!containerRef.current) return;
168
177
  containerRef.current.setAttribute('aria-haspopup', 'listbox');
169
178
  }, []);
170
- var selectedItems = (0, _react.useMemo)(function () {
179
+ var selectedItems = (0, _react2.useMemo)(function () {
171
180
  return (forwardedValue || []).map(function (v) {
172
181
  var option = (options || []).find(function (item) {
173
182
  return item.value === v;
@@ -178,10 +187,10 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
178
187
  };
179
188
  });
180
189
  }, [forwardedValue, options]);
181
- var listBoxId = (0, _react.useMemo)(function () {
190
+ var listBoxId = (0, _react2.useMemo)(function () {
182
191
  return "listbox-".concat(Math.random().toString(36).slice(2, 11));
183
192
  }, []);
184
- return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(SelectContainer, _extends({
193
+ return /*#__PURE__*/_react2["default"].createElement(_react2["default"].Fragment, null, /*#__PURE__*/_react2["default"].createElement(SelectContainer, _extends({
185
194
  opened: opened,
186
195
  unbordered: unbordered,
187
196
  disabled: disabled,
@@ -208,7 +217,7 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
208
217
  "aria-owns": listBoxId
209
218
  }, rest, {
210
219
  ref: mergedContainerRef
211
- }), /*#__PURE__*/_react["default"].createElement(_SelectToggle["default"], {
220
+ }), /*#__PURE__*/_react2["default"].createElement(_SelectToggle["default"], {
212
221
  selectedItems: selectedItems,
213
222
  onDelete: function onDelete(v) {
214
223
  return setForwardedValue((forwardedValue || []).filter(function (item) {
@@ -232,7 +241,7 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
232
241
  clearVisible: clearVisible,
233
242
  loading: loading,
234
243
  locale: locale
235
- })), /*#__PURE__*/_react["default"].createElement(SelectMenu, {
244
+ })), /*#__PURE__*/_react2["default"].createElement(SelectMenu, {
236
245
  trigger: containerRef,
237
246
  visible: opened,
238
247
  onClose: function onClose() {
@@ -243,9 +252,9 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
243
252
  closeOnSelect: maxSelectedItems === 1,
244
253
  modalTitle: placeholder,
245
254
  placement: placement
246
- }, searchVisible && /*#__PURE__*/_react["default"].createElement(InputSearchContainer, {
255
+ }, searchVisible && /*#__PURE__*/_react2["default"].createElement(InputSearchContainer, {
247
256
  ref: inputSearchContainerRef
248
- }, /*#__PURE__*/_react["default"].createElement(_InputSearch["default"], searchProps)), options.length > 0 ? /*#__PURE__*/_react["default"].createElement(_SelectList["default"], {
257
+ }, /*#__PURE__*/_react2["default"].createElement(_InputSearch["default"], searchProps)), options.length > 0 ? /*#__PURE__*/_react2["default"].createElement(_SelectList["default"], {
249
258
  searchVisible: searchVisible,
250
259
  options: options,
251
260
  visibleCount: visibleCount,
@@ -258,7 +267,7 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
258
267
  onChange: setForwardedValue,
259
268
  id: listBoxId,
260
269
  size: size
261
- }) : /*#__PURE__*/_react["default"].createElement(NotFound, null, notFoundText)));
270
+ }) : /*#__PURE__*/_react2["default"].createElement(NotFound, null, notFoundText)));
262
271
  });
263
272
  Select.displayName = 'Select';
264
273
  var _default = Select;
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["paddingStyles","p","paddingVertical","theme","baseHeight","selectToggleListItemHeight","css","openedStyles","opened","unbordered","clr","inputFocusColorBorder","inputFocusColorShadow","unborderedStyles","transitionStyles","unborderedHoverStyles","disabled","buttonGhostColorBgHover","SelectContainer","styled","InputContainer","omitEmotionProps","SelectMenu","Menu","m","min","xs","width","NotFound","div","menuItemHeight","inputPaddingHorizontal","selectNotFoundColorText","InputSearchContainer","menuPaddingVertical","Select","forwardRef","ref","options","left","leftHasPadding","right","rightHasPadding","placeholder","searchVisible","searchProps","notFoundText","loading","autoFocus","autoOpen","clearVisible","threshold","visibleCount","overscanCount","maxSelectedItems","locale","defaultLocale","value","defaultValue","onChange","onLoadNext","size","placement","rest","useForwardedRef","containerRef","mergedContainerRef","useState","setWidth","inputSearchContainerRef","useRef","setOpened","useForwardedState","forwardedValue","setForwardedValue","useEffect","current","focus","resizeHandler","useCallback","window","requestAnimationFrame","nextWidth","getBoundingClientRect","useBrowserLayoutEffect","useResizeObserver","useEvent","undefined","setAttribute","selectedItems","useMemo","map","v","option","find","item","title","listBoxId","Math","random","toString","slice","e","includes","key","preventDefault","filter","length","displayName"],"sources":["../../../src/Select/index.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { transitionStyles, WithSize } from '@os-design/styles';\nimport {\n omitEmotionProps,\n useEvent,\n useForwardedRef,\n useForwardedState,\n useResizeObserver,\n useBrowserLayoutEffect,\n} from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { css } from '@emotion/react';\nimport { clr } from '@os-design/theming';\nimport { InputContainer } from '../Input';\nimport Menu from '../Menu';\nimport InputSearch, { InputSearchProps } from '../InputSearch';\nimport SelectToggle from './SelectToggle';\nimport SelectList, { OptionProps } from './SelectList';\nimport { PopoverProps } from '../Popover';\nimport defaultLocale, { SelectLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface SelectProps\n extends JsxDivProps,\n WithSize,\n Pick<PopoverProps, 'placement'> {\n /**\n * Options of the select.\n * @default undefined\n */\n options?: OptionProps[];\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 select.\n * @default undefined\n */\n placeholder?: string;\n /**\n * Whether the search input visible.\n * @default false\n */\n searchVisible?: boolean;\n /**\n * Props of the search input.\n * @default undefined\n */\n searchProps?: InputSearchProps;\n /**\n * Text displayed when there are no list items.\n * @default Not found\n */\n notFoundText?: string;\n /**\n * Whether the border is hidden.\n * @default false\n */\n unbordered?: boolean;\n /**\n * Shows the loading status.\n * @default false\n */\n loading?: boolean;\n /**\n * Whether the select 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 list.\n * @default false\n */\n autoOpen?: boolean;\n /**\n * Whether the select has the clear button.\n * @default false\n */\n clearVisible?: boolean;\n /**\n * A threshold N means that the onLoadNext function calls when a user scrolls all items except N.\n * @default 10\n */\n threshold?: number;\n /**\n * Defines how many items inside of the visible \"window\" to render.\n * @default 6\n */\n visibleCount?: number;\n /**\n * Defines how many items outside of the visible \"window\" to render at all times.\n * @default 10\n */\n overscanCount?: number;\n /**\n * The max number of options that the user can select.\n * @default 1\n */\n maxSelectedItems?: number | 'all';\n /**\n * The locale.\n * @default undefined\n */\n locale?: SelectLocale;\n /**\n * Selected options.\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 * The callback to load more items.\n * @default undefined\n */\n onLoadNext?: () => void;\n}\n\nconst paddingStyles = (p) => {\n const paddingVertical =\n (p.theme.baseHeight - p.theme.selectToggleListItemHeight) / 2;\n\n return css`\n padding: calc(${paddingVertical}em - 1px) 0;\n `;\n};\n\nconst openedStyles = (p) =>\n p.opened &&\n !p.unbordered &&\n css`\n border-color: ${clr(p.theme.inputFocusColorBorder)};\n box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};\n `;\n\nconst unborderedStyles = (p) =>\n p.unbordered &&\n css`\n border: 0;\n box-shadow: none !important;\n ${transitionStyles('background-color')(p)};\n `;\n\nconst unborderedHoverStyles = (p) =>\n p.unbordered &&\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n background-color: ${clr(p.theme.buttonGhostColorBgHover)};\n }\n }\n `;\n\ninterface SelectContainerProps {\n opened: boolean;\n unbordered?: boolean;\n disabled?: boolean;\n}\nexport const SelectContainer = styled(\n InputContainer,\n omitEmotionProps('opened', 'unbordered', 'disabled')\n)<SelectContainerProps>`\n cursor: ${(p) => (!p.disabled ? 'pointer' : 'not-allowed')};\n user-select: none;\n position: relative;\n display: flex;\n align-items: center;\n\n height: unset;\n min-height: ${(p) => p.theme.baseHeight}em;\n\n ${paddingStyles};\n ${openedStyles};\n ${unborderedStyles};\n ${unborderedHoverStyles};\n`;\n\ninterface SelectMenuProps {\n width: number;\n}\nconst SelectMenu = styled(Menu, omitEmotionProps('width'))<SelectMenuProps>`\n padding-top: 0;\n padding-bottom: 0;\n max-height: unset;\n\n ${m.min.xs} {\n width: ${(p) => p.width}px;\n }\n`;\n\nconst NotFound = styled.div`\n height: ${(p) => p.theme.menuItemHeight}em;\n display: flex;\n align-items: center;\n\n padding: 0 ${(p) => p.theme.inputPaddingHorizontal}em;\n color: ${(p) => clr(p.theme.selectNotFoundColorText)};\n`;\n\nconst InputSearchContainer = styled.div`\n padding: ${(p) => p.theme.menuPaddingVertical}em\n ${(p) => p.theme.inputPaddingHorizontal}em 0;\n`;\n\n/**\n * The component that allows to pick a value from predefined options.\n */\nconst Select = forwardRef<HTMLDivElement, SelectProps>(\n (\n {\n options = [],\n left,\n leftHasPadding = false,\n right,\n rightHasPadding = false,\n placeholder,\n searchVisible = false,\n searchProps = {},\n notFoundText = 'Not found',\n unbordered = false,\n loading = false,\n disabled = false,\n autoFocus = false,\n autoOpen = false,\n clearVisible = false,\n threshold = 10,\n visibleCount = 6,\n overscanCount = 10,\n maxSelectedItems = 1,\n locale = defaultLocale,\n value,\n defaultValue,\n onChange,\n onLoadNext = () => {},\n size,\n placement,\n ...rest\n },\n ref\n ) => {\n const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n const [width, setWidth] = useState(0);\n const inputSearchContainerRef = useRef<HTMLDivElement>(null);\n const [opened, setOpened] = useState(autoOpen);\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n useEffect(() => {\n if (!autoFocus) return;\n containerRef.current?.focus();\n }, [autoFocus, containerRef]);\n\n /**\n * Detect the width of the container when the select was opened and update\n * it when either the container size or the window size has been changed.\n */\n const resizeHandler = useCallback(() => {\n window.requestAnimationFrame(() => {\n if (!opened || !containerRef.current) return;\n const nextWidth = containerRef.current.getBoundingClientRect().width;\n if (width === nextWidth) return;\n setWidth(nextWidth);\n });\n }, [opened, containerRef, width]);\n useBrowserLayoutEffect(() => resizeHandler(), [resizeHandler]);\n useResizeObserver(containerRef, resizeHandler);\n useEvent(\n (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n 'resize',\n resizeHandler\n );\n\n // Replace the aria-haspopup attribute from menu to listbox\n useBrowserLayoutEffect(() => {\n if (!containerRef.current) return;\n containerRef.current.setAttribute('aria-haspopup', 'listbox');\n }, []);\n\n const selectedItems = useMemo(\n () =>\n (forwardedValue || []).map((v) => {\n const option = (options || []).find((item) => item.value === v);\n return { title: option ? option.title || '' : '', value: v };\n }),\n [forwardedValue, options]\n );\n\n const listBoxId = useMemo(\n () => `listbox-${Math.random().toString(36).slice(2, 11)}`,\n []\n );\n\n return (\n <>\n <SelectContainer\n opened={opened}\n unbordered={unbordered}\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 role='combobox'\n aria-disabled={disabled}\n aria-busy={loading}\n aria-haspopup='listbox'\n aria-owns={listBoxId}\n {...rest}\n ref={mergedContainerRef}\n >\n <SelectToggle\n selectedItems={selectedItems}\n onDelete={(v) =>\n setForwardedValue(\n (forwardedValue || []).filter((item) => item !== v)\n )\n }\n onClear={() => {\n setForwardedValue([]);\n if (!containerRef.current) return;\n containerRef.current.focus();\n }}\n opened={opened}\n multiple={maxSelectedItems !== 1}\n placeholder={placeholder}\n left={left}\n leftHasPadding={leftHasPadding}\n right={right}\n rightHasPadding={rightHasPadding}\n unbordered={unbordered}\n disabled={disabled}\n clearVisible={clearVisible}\n loading={loading}\n locale={locale}\n />\n </SelectContainer>\n\n <SelectMenu\n trigger={containerRef}\n visible={opened}\n onClose={() => setOpened(false)}\n size={size}\n width={width}\n closeOnSelect={maxSelectedItems === 1}\n modalTitle={placeholder}\n placement={placement}\n >\n {searchVisible && (\n <InputSearchContainer ref={inputSearchContainerRef}>\n <InputSearch {...searchProps} />\n </InputSearchContainer>\n )}\n\n {options.length > 0 ? (\n <SelectList\n searchVisible={searchVisible}\n options={options}\n visibleCount={visibleCount}\n overscanCount={overscanCount}\n threshold={threshold}\n onLoadNext={onLoadNext}\n maxSelectedItems={maxSelectedItems}\n containerRef={containerRef}\n value={forwardedValue}\n onChange={setForwardedValue}\n id={listBoxId}\n size={size}\n />\n ) : (\n <NotFound>{notFoundText}</NotFound>\n )}\n </SelectMenu>\n </>\n );\n }\n);\n\nSelect.displayName = 'Select';\n\nexport default Select;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["paddingStyles","p","paddingVertical","theme","baseHeight","selectToggleListItemHeight","css","openedStyles","opened","unbordered","clr","inputFocusColorBorder","inputFocusColorShadow","unborderedStyles","transitionStyles","unborderedHoverStyles","disabled","buttonGhostColorBgHover","SelectContainer","styled","InputContainer","omitEmotionProps","SelectMenu","Menu","m","min","xs","width","NotFound","div","menuItemHeight","inputPaddingHorizontal","selectNotFoundColorText","InputSearchContainer","menuPaddingVertical","Select","forwardRef","ref","options","left","leftHasPadding","right","rightHasPadding","placeholder","searchVisible","searchProps","notFoundText","loading","autoFocus","autoOpen","clearVisible","threshold","visibleCount","overscanCount","maxSelectedItems","locale","defaultLocale","value","defaultValue","onChange","onLoadNext","onClose","size","placement","rest","useForwardedRef","containerRef","mergedContainerRef","useState","setWidth","inputSearchContainerRef","useRef","setOpened","useForwardedState","forwardedValue","setForwardedValue","useEffect","current","focus","onCloseRef","resizeHandler","useCallback","window","requestAnimationFrame","nextWidth","getBoundingClientRect","useBrowserLayoutEffect","useResizeObserver","useEvent","undefined","setAttribute","selectedItems","useMemo","map","v","option","find","item","title","listBoxId","Math","random","toString","slice","e","includes","key","preventDefault","filter","length","displayName"],"sources":["../../../src/Select/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { transitionStyles, WithSize } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport {\n omitEmotionProps,\n useBrowserLayoutEffect,\n useEvent,\n useForwardedRef,\n useForwardedState,\n useResizeObserver,\n} from '@os-design/utils';\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { InputContainer } from '../Input';\nimport InputSearch, { InputSearchProps } from '../InputSearch';\nimport Menu from '../Menu';\nimport { PopoverProps } from '../Popover';\nimport SelectList, { OptionProps } from './SelectList';\nimport SelectToggle from './SelectToggle';\nimport defaultLocale, { SelectLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface SelectProps\n extends JsxDivProps,\n WithSize,\n Pick<PopoverProps, 'placement'> {\n /**\n * Options of the select.\n * @default undefined\n */\n options?: OptionProps[];\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 select.\n * @default undefined\n */\n placeholder?: string;\n /**\n * Whether the search input visible.\n * @default false\n */\n searchVisible?: boolean;\n /**\n * Props of the search input.\n * @default undefined\n */\n searchProps?: InputSearchProps;\n /**\n * Text displayed when there are no list items.\n * @default Not found\n */\n notFoundText?: string;\n /**\n * Whether the border is hidden.\n * @default false\n */\n unbordered?: boolean;\n /**\n * Shows the loading status.\n * @default false\n */\n loading?: boolean;\n /**\n * Whether the select 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 list.\n * @default false\n */\n autoOpen?: boolean;\n /**\n * Whether the select has the clear button.\n * @default false\n */\n clearVisible?: boolean;\n /**\n * A threshold N means that the onLoadNext function calls when a user scrolls all items except N.\n * @default 10\n */\n threshold?: number;\n /**\n * Defines how many items inside of the visible \"window\" to render.\n * @default 6\n */\n visibleCount?: number;\n /**\n * Defines how many items outside of the visible \"window\" to render at all times.\n * @default 10\n */\n overscanCount?: number;\n /**\n * The max number of options that the user can select.\n * @default 1\n */\n maxSelectedItems?: number | 'all';\n /**\n * The locale.\n * @default undefined\n */\n locale?: SelectLocale;\n /**\n * Selected options.\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 * The callback to load more items.\n * @default undefined\n */\n onLoadNext?: () => void;\n /**\n * The event handler that is called whenever a popup closes.\n * @default undefined\n */\n onClose?: () => void;\n}\n\nconst paddingStyles = (p) => {\n const paddingVertical =\n (p.theme.baseHeight - p.theme.selectToggleListItemHeight) / 2;\n\n return css`\n padding: calc(${paddingVertical}em - 1px) 0;\n `;\n};\n\nconst openedStyles = (p) =>\n p.opened &&\n !p.unbordered &&\n css`\n border-color: ${clr(p.theme.inputFocusColorBorder)};\n box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};\n `;\n\nconst unborderedStyles = (p) =>\n p.unbordered &&\n css`\n border: 0;\n box-shadow: none !important;\n ${transitionStyles('background-color')(p)};\n `;\n\nconst unborderedHoverStyles = (p) =>\n p.unbordered &&\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n background-color: ${clr(p.theme.buttonGhostColorBgHover)};\n }\n }\n `;\n\ninterface SelectContainerProps {\n opened: boolean;\n unbordered?: boolean;\n disabled?: boolean;\n}\nexport const SelectContainer = styled(\n InputContainer,\n omitEmotionProps('opened', 'unbordered', 'disabled')\n)<SelectContainerProps>`\n cursor: ${(p) => (!p.disabled ? 'pointer' : 'not-allowed')};\n user-select: none;\n position: relative;\n display: flex;\n align-items: center;\n\n height: unset;\n min-height: ${(p) => p.theme.baseHeight}em;\n\n ${paddingStyles};\n ${openedStyles};\n ${unborderedStyles};\n ${unborderedHoverStyles};\n`;\n\ninterface SelectMenuProps {\n width: number;\n}\nconst SelectMenu = styled(Menu, omitEmotionProps('width'))<SelectMenuProps>`\n padding-top: 0;\n padding-bottom: 0;\n max-height: unset;\n\n ${m.min.xs} {\n width: ${(p) => p.width}px;\n }\n`;\n\nconst NotFound = styled.div`\n height: ${(p) => p.theme.menuItemHeight}em;\n display: flex;\n align-items: center;\n\n padding: 0 ${(p) => p.theme.inputPaddingHorizontal}em;\n color: ${(p) => clr(p.theme.selectNotFoundColorText)};\n`;\n\nconst InputSearchContainer = styled.div`\n padding: ${(p) => p.theme.menuPaddingVertical}em\n ${(p) => p.theme.inputPaddingHorizontal}em 0;\n`;\n\n/**\n * The component that allows to pick a value from predefined options.\n */\nconst Select = forwardRef<HTMLDivElement, SelectProps>(\n (\n {\n options = [],\n left,\n leftHasPadding = false,\n right,\n rightHasPadding = false,\n placeholder,\n searchVisible = false,\n searchProps = {},\n notFoundText = 'Not found',\n unbordered = false,\n loading = false,\n disabled = false,\n autoFocus = false,\n autoOpen = false,\n clearVisible = false,\n threshold = 10,\n visibleCount = 6,\n overscanCount = 10,\n maxSelectedItems = 1,\n locale = defaultLocale,\n value,\n defaultValue,\n onChange,\n onLoadNext = () => {},\n onClose = () => {},\n size,\n placement,\n ...rest\n },\n ref\n ) => {\n const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n const [width, setWidth] = useState(0);\n const inputSearchContainerRef = useRef<HTMLDivElement>(null);\n const [opened, setOpened] = useState(autoOpen);\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n useEffect(() => {\n if (!autoFocus) return;\n 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) onCloseRef.current();\n }, [opened]);\n\n /**\n * Detect the width of the container when the select was opened and update\n * it when either the container size or the window size has been changed.\n */\n const resizeHandler = useCallback(() => {\n window.requestAnimationFrame(() => {\n if (!opened || !containerRef.current) return;\n const nextWidth = containerRef.current.getBoundingClientRect().width;\n if (width === nextWidth) return;\n setWidth(nextWidth);\n });\n }, [opened, containerRef, width]);\n useBrowserLayoutEffect(() => resizeHandler(), [resizeHandler]);\n useResizeObserver(containerRef, resizeHandler);\n useEvent(\n (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n 'resize',\n resizeHandler\n );\n\n // Replace the aria-haspopup attribute from menu to listbox\n useBrowserLayoutEffect(() => {\n if (!containerRef.current) return;\n containerRef.current.setAttribute('aria-haspopup', 'listbox');\n }, []);\n\n const selectedItems = useMemo(\n () =>\n (forwardedValue || []).map((v) => {\n const option = (options || []).find((item) => item.value === v);\n return { title: option ? option.title || '' : '', value: v };\n }),\n [forwardedValue, options]\n );\n\n const listBoxId = useMemo(\n () => `listbox-${Math.random().toString(36).slice(2, 11)}`,\n []\n );\n\n return (\n <>\n <SelectContainer\n opened={opened}\n unbordered={unbordered}\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 role='combobox'\n aria-disabled={disabled}\n aria-busy={loading}\n aria-haspopup='listbox'\n aria-owns={listBoxId}\n {...rest}\n ref={mergedContainerRef}\n >\n <SelectToggle\n selectedItems={selectedItems}\n onDelete={(v) =>\n setForwardedValue(\n (forwardedValue || []).filter((item) => item !== v)\n )\n }\n onClear={() => {\n setForwardedValue([]);\n if (!containerRef.current) return;\n containerRef.current.focus();\n }}\n opened={opened}\n multiple={maxSelectedItems !== 1}\n placeholder={placeholder}\n left={left}\n leftHasPadding={leftHasPadding}\n right={right}\n rightHasPadding={rightHasPadding}\n unbordered={unbordered}\n disabled={disabled}\n clearVisible={clearVisible}\n loading={loading}\n locale={locale}\n />\n </SelectContainer>\n\n <SelectMenu\n trigger={containerRef}\n visible={opened}\n onClose={() => setOpened(false)}\n size={size}\n width={width}\n closeOnSelect={maxSelectedItems === 1}\n modalTitle={placeholder}\n placement={placement}\n >\n {searchVisible && (\n <InputSearchContainer ref={inputSearchContainerRef}>\n <InputSearch {...searchProps} />\n </InputSearchContainer>\n )}\n\n {options.length > 0 ? (\n <SelectList\n searchVisible={searchVisible}\n options={options}\n visibleCount={visibleCount}\n overscanCount={overscanCount}\n threshold={threshold}\n onLoadNext={onLoadNext}\n maxSelectedItems={maxSelectedItems}\n containerRef={containerRef}\n value={forwardedValue}\n onChange={setForwardedValue}\n id={listBoxId}\n size={size}\n />\n ) : (\n <NotFound>{notFoundText}</NotFound>\n )}\n </SelectMenu>\n </>\n );\n }\n);\n\nSelect.displayName = 'Select';\n\nexport default Select;\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["styled","defaultLocale","getAccessibilityDateLabel","useFormattedValue","Down","Up","useIsMinWidth","ThemeOverrider","useForwardedRef","useForwardedState","useKeyPress","React","forwardRef","useCallback","useEffect","useMemo","useRef","useState","Button","Modal","Popover","SelectContainer","ClearIcon","Content","IconContainer","LeftAddon","Placeholder","RightAddon","Title","TimePicker","DatePickerCalendar","StyledPopover","p","theme","datePickerPadding","TimeContainer","div","Dash","baseHeight","StyledTimePicker","timePickerStyle","style","width","createDate","date","time","d","Date","setFullYear","getFullYear","setMonth","getMonth","setDate","getDate","setHours","setMinutes","getHours","getMinutes","DatePicker","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","autoFocus","autoOpen","format","firstDayOfWeek","locale","showTime","timeNotation","range","value","defaultValue","onChange","onClose","size","rest","ref","containerRef","mergedContainerRef","opened","setOpened","forwardedValue","setForwardedValue","current","focus","onCloseRef","formattedValue","closeHandler","window","undefined","isMinXs","valueIsSpecified","rightHasPaddingValue","rightValue","e","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","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 calendar 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 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) onCloseRef.current();\n }, [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 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 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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"}
1
+ {"version":3,"file":"index.js","names":["styled","defaultLocale","getAccessibilityDateLabel","useFormattedValue","Down","Up","useIsMinWidth","ThemeOverrider","useForwardedRef","useForwardedState","useKeyPress","React","forwardRef","useCallback","useEffect","useMemo","useRef","useState","Button","Modal","Popover","SelectContainer","ClearIcon","Content","IconContainer","LeftAddon","Placeholder","RightAddon","Title","TimePicker","DatePickerCalendar","StyledPopover","p","theme","datePickerPadding","TimeContainer","div","Dash","baseHeight","StyledTimePicker","timePickerStyle","style","width","createDate","date","time","d","Date","setFullYear","getFullYear","setMonth","getMonth","setDate","getDate","setHours","setMinutes","getHours","getMinutes","DatePicker","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","autoFocus","autoOpen","format","firstDayOfWeek","locale","showTime","timeNotation","range","value","defaultValue","onChange","onClose","size","rest","ref","containerRef","mergedContainerRef","opened","setOpened","forwardedValue","setForwardedValue","current","focus","onCloseRef","formattedValue","closeHandler","window","undefined","isMinXs","valueIsSpecified","rightHasPaddingValue","rightValue","e","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","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 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) onCloseRef.current();\n }, [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 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 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":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,SAEEC,aAAa,EACbC,yBAAyB,EACzBC,iBAAiB,QACZ,8BAA8B;AACrC,SAASC,IAAI,EAAEC,EAAE,QAAQ,kBAAkB;AAC3C,SAASC,aAAa,QAAQ,kBAAkB;AAEhD,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SACEC,eAAe,EACfC,iBAAiB,EACjBC,WAAW,QACN,kBAAkB;AACzB,OAAOC,KAAK,IACVC,UAAU,EACVC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,OAAOC,MAAM,MAAM,WAAW;AAC9B,OAAOC,KAAK,MAAM,UAAU;AAC5B,OAAOC,OAAO,MAAM,YAAY;AAChC,SAASC,eAAe,QAAQ,WAAW;AAC3C,SACEC,SAAS,EACTC,OAAO,EACPC,aAAa,EACbC,SAAS,EACTC,WAAW,EACXC,UAAU,EACVC,KAAK,QACA,wBAAwB;AAC/B,OAAOC,UAAU,MAAM,eAAe;AACtC,OAAOC,kBAAkB,MAAM,sBAAsB;AA+GrD,MAAMC,aAAa,GAAG/B,MAAM,CAACoB,OAAO,CAAE;AACtC,aAAcY,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,iBAAkB;AAC9C,CAAC;AAED,MAAMC,aAAa,GAAGnC,MAAM,CAACoC,GAAI;AACjC;AACA;AACA;AACA,CAAC;AAED,MAAMC,IAAI,GAAGrC,MAAM,CAACoC,GAAI;AACxB;AACA,iBAAkBJ,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACK,UAAW;AAC3C,CAAC;AAED,MAAMC,gBAAgB,GAAGvC,MAAM,CAAC6B,UAAU,CAAE;AAC5C;AACA;AACA,CAAC;AAED,MAAMW,eAAe,GAAG;EAAEC,KAAK,EAAE;IAAEC,KAAK,EAAE;EAAO;AAAE,CAAC;AAEpD,MAAMC,UAAU,GAAG,CAACC,IAAU,EAAEC,IAAkB,KAAK;EACrD,MAAMC,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,MAAMY,UAAU,gBAAG9C,UAAU,CAC3B,CACE;EACE+C,IAAI;EACJC,cAAc,GAAG,KAAK;EACtBC,KAAK;EACLC,eAAe,GAAG,KAAK;EACvBC,WAAW;EACXC,QAAQ,GAAG,KAAK;EAChBC,SAAS,GAAG,KAAK;EACjBC,QAAQ,GAAG,KAAK;EAChBC,MAAM;EACNC,cAAc,GAAG,QAAQ;EACzBC,MAAM,GAAGpE,aAAa;EACtBqE,QAAQ,GAAG,KAAK;EAChBC,YAAY,GAAG,SAAS;EACxBC,KAAK,GAAG,KAAK;EACbC,KAAK;EACLC,YAAY;EACZC,QAAQ;EACRC,OAAO,GAAG,MAAM,CAAC,CAAC;EAClBC,IAAI;EACJ,GAAGC;AACL,CAAC,EACDC,GAAG,KACA;EACH,MAAM,CAACC,YAAY,EAAEC,kBAAkB,CAAC,GAAGzE,eAAe,CAACuE,GAAG,CAAC;EAC/D,MAAM,CAACG,MAAM,EAAEC,SAAS,CAAC,GAAGlE,QAAQ,CAACiD,QAAQ,CAAC;EAC9C;EACA,MAAM,CAACkB,cAAc,EAAEC,iBAAiB,CAAC,GAAG5E,iBAAiB,CAAM;IACjEgE,KAAK;IACLC,YAAY;IACZC;EACF,CAAC,CAAC;EAEF7D,SAAS,CAAC,MAAM;IACd,IAAImD,SAAS,EAAEe,YAAY,CAACM,OAAO,EAAEC,KAAK,EAAE;EAC9C,CAAC,EAAE,CAACtB,SAAS,EAAEe,YAAY,CAAC,CAAC;EAE7B,MAAMQ,UAAU,GAAGxE,MAAM,CAAC4D,OAAO,CAAC;EAClC9D,SAAS,CAAC,MAAM;IACd0E,UAAU,CAACF,OAAO,GAAGV,OAAO;EAC9B,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb9D,SAAS,CAAC,MAAM;IACd,IAAI,CAACoE,MAAM,EAAEM,UAAU,CAACF,OAAO,EAAE;EACnC,CAAC,EAAE,CAACJ,MAAM,CAAC,CAAC;EAEZ,MAAMO,cAAc,GAAGtF,iBAAiB,CAAC;IACvCiF,cAAc;IACdjB,MAAM;IACNG,QAAQ;IACRC;EACF,CAAC,CAAC;EAEF,MAAMmB,YAAY,GAAG7E,WAAW,CAAC,MAAM;IACrCsE,SAAS,CAAC,KAAK,CAAC;EAClB,CAAC,EAAE,EAAE,CAAC;EAENzE,WAAW,CACR,OAAOiF,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGC,SAAS,EACnD,QAAQ,EACRF,YAAY,CACb;EACD,MAAMG,OAAO,GAAGvF,aAAa,CAAC,IAAI,CAAC;EAEnC,MAAMwF,gBAAgB,GAAG/E,OAAO,CAC9B,MAAM0E,cAAc,KAAKG,SAAS,IAAIH,cAAc,KAAK,IAAI,EAC7D,CAACA,cAAc,CAAC,CACjB;EAED,MAAMM,oBAAoB,GAAGhF,OAAO,CAAC,MAAM;IACzC,IAAI+E,gBAAgB,EAAE,OAAO,KAAK;IAClC,OAAOjC,KAAK,GAAGC,eAAe,GAAG,IAAI;EACvC,CAAC,EAAE,CAACD,KAAK,EAAEC,eAAe,EAAEgC,gBAAgB,CAAC,CAAC;EAE9C,MAAME,UAAU,GAAGjF,OAAO,CAAC,MAAM;IAC/B,IAAI+E,gBAAgB,EAAE;MACpB,oBACE;QAAK;MAAW,gBACd,oBAAC,MAAM;QACL,IAAI,EAAC,OAAO;QACZ,IAAI,EAAC,OAAO;QACZ,IAAI,EAAC,OAAO;QACZ,QAAQ,EAAE9B,QAAS;QACnB,OAAO,EAAGiC,CAAC,IAAK;UACdZ,iBAAiB,CAAC,IAAI,CAAC;UACvBY,CAAC,CAACC,eAAe,EAAE;QACrB,CAAE;QACF,SAAS,EAAGD,CAAC,IAAK;UAChB,IAAIjC,QAAQ,EAAE;UACd,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAACmC,QAAQ,CAACF,CAAC,CAACG,GAAG,CAAC,EAAE;YAClCf,iBAAiB,CAAC,IAAI,CAAC;YACvB,IAAI,CAACL,YAAY,CAACM,OAAO,EAAE;YAC3BN,YAAY,CAACM,OAAO,CAACC,KAAK,EAAE;YAC5BU,CAAC,CAACI,cAAc,EAAE;YAClBJ,CAAC,CAACC,eAAe,EAAE;UACrB;QACF,CAAE;QACF,cAAY7B,MAAM,CAACiC;MAAW,gBAE9B,oBAAC,SAAS,OAAG,CACN,CACL;IAEV;IACA,OACEzC,KAAK,iBAAI,oBAAC,aAAa,QAAEqB,MAAM,gBAAG,oBAAC,EAAE,OAAG,gBAAG,oBAAC,IAAI,OAAG,CAAiB;EAExE,CAAC,EAAE,CACDF,YAAY,EACZhB,QAAQ,EACRK,MAAM,CAACiC,UAAU,EACjBpB,MAAM,EACNrB,KAAK,EACLwB,iBAAiB,EACjBS,gBAAgB,CACjB,CAAC;EAEF,MAAMS,kBAAkB,GAAGvF,MAAM,CAAmB,IAAI,CAAC;EACzD,MAAMwF,mBAAmB,GAAGxF,MAAM,CAAmB,IAAI,CAAC;EAC1D,MAAMyF,eAAe,GAAGzF,MAAM,CAAC,KAAK,CAAC;EAErCF,SAAS,CAAC,MAAM;IACd2F,eAAe,CAACnB,OAAO,GAAG,KAAK;EACjC,CAAC,EAAE,CAACJ,MAAM,CAAC,CAAC;EAEZ,MAAMwB,aAAa,GAAG7F,WAAW,CAC9B+B,IAAU,IAAK;IACdyC,iBAAiB,CAAEsB,IAAI,IAAK;MAC1B,IAAI,CAACnC,KAAK,EAAE,OAAO7B,UAAU,CAACC,IAAI,EAAE+D,IAAI,CAAC;MAEzC,MAAM7D,CAAC,GAAGH,UAAU,CAACC,IAAI,CAAC;MAC1B,MAAMgE,SAAS,GACbD,IAAI,IAAIE,KAAK,CAACC,OAAO,CAACH,IAAI,CAAC,IAAIF,eAAe,CAACnB,OAAO,GAClD,CAAC,IAAIvC,IAAI,CAAC4D,IAAI,CAAC,CAAC,CAAC,CAACI,OAAO,EAAE,CAAC,EAAEpE,UAAU,CAACC,IAAI,EAAE+D,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GACxD,CAAC7D,CAAC,EAAEA,CAAC,CAAC;MAEZ2D,eAAe,CAACnB,OAAO,GAAG,CAACmB,eAAe,CAACnB,OAAO;MAClD,OAAOsB,SAAS,CAACI,IAAI,CACnB,CAACC,CAAO,EAAEC,CAAO,KAAKD,CAAC,CAACF,OAAO,EAAE,GAAGG,CAAC,CAACH,OAAO,EAAE,CAChD;IACH,CAAC,CAAC;EACJ,CAAC,EACD,CAACvC,KAAK,EAAEa,iBAAiB,CAAC,CAC3B;EAED,MAAM8B,iBAAiB,GAAGpG,OAAO,CAC/B,mBACE,oBAAC,kBAAkB;IACjB,cAAc,EAAEqD,cAAe;IAC/B,MAAM,EAAEC,MAAO;IACf,KAAK,EAAEe,cAAe;IACtB,QAAQ,EAAGgC,CAAC,IAAK;MACfV,aAAa,CAACU,CAAC,CAAC;MAChBb,kBAAkB,CAACjB,OAAO,EAAEC,KAAK,EAAE;MACnC,IAAI,CAACjB,QAAQ,KAAK,CAACE,KAAK,IAAI,CAACiC,eAAe,CAACnB,OAAO,CAAC,EAAE;QACrDI,YAAY,EAAE;MAChB;IACF;EAAE,EAEL,EACD,CACEgB,aAAa,EACbhB,YAAY,EACZtB,cAAc,EACdgB,cAAc,EACdf,MAAM,EACNG,KAAK,EACLF,QAAQ,CACT,CACF;EAED,MAAM+C,kBAAkB,GAAGxG,WAAW,CACnCoF,CAAC,IAAK;IACL,IAAIA,CAAC,CAACqB,MAAM,CAACC,cAAc,GAAG,CAAC,EAAE;IACjCf,mBAAmB,CAAClB,OAAO,EAAEC,KAAK,EAAE;IACpCF,iBAAiB,CAAC,CAAC,CAACmC,IAAI,CAAC,KAAK;MAC5B,MAAMC,MAAM,GAAG,IAAI1E,IAAI,CAACyE,IAAI,CAACT,OAAO,EAAE,CAAC;MACvCU,MAAM,CAACnE,QAAQ,CAACmE,MAAM,CAACjE,QAAQ,EAAE,GAAG,CAAC,CAAC;MACtC,OAAO,CAACgE,IAAI,EAAEC,MAAM,CAAC;IACvB,CAAC,CAAC;EACJ,CAAC,EACD,CAACpC,iBAAiB,CAAC,CACpB;EAED,MAAMqC,oBAAoB,GAAG7G,WAAW,CACrCoF,CAAC,IAAK;IACL,IAAIA,CAAC,CAACqB,MAAM,CAACC,cAAc,GAAG,CAAC,EAAE;IACjC7B,YAAY,EAAE;EAChB,CAAC,EACD,CAACA,YAAY,CAAC,CACf;EAED,MAAMiC,aAAa,GAAG5G,OAAO,CAC3B,MACEuD,QAAQ,IAAIc,cAAc,gBACxB,oBAAC,aAAa,QACXyB,KAAK,CAACC,OAAO,CAAC1B,cAAc,CAAC,gBAC5B,uDACE,oBAAC,gBAAgB;IACf,GAAG,EAAEmB,kBAAmB;IACxB,SAAS;IACT,QAAQ,EAAEvC,QAAS;IACnB,QAAQ,EAAEO,YAAa;IACvB,cAAc,EAAE/B,eAAgB;IAChC,KAAK,EAAE4C,cAAc,CAAC,CAAC,CAAE;IACzB,QAAQ,EAAGgC,CAAC,IAAK/B,iBAAiB,CAAC,CAAC+B,CAAC,EAAEhC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAE;IAC3D,SAAS,EAAGa,CAAC,IAAK;MAChB,IAAIjC,QAAQ,EAAE;MACd,IAAIiC,CAAC,CAACG,GAAG,KAAK,OAAO,EAAE;QACrBjB,SAAS,CAAC,CAACD,MAAM,CAAC;MACpB;IACF,CAAE;IACF,OAAO,EAAEmC;EAAmB,EAC5B,eACF,oBAAC,IAAI,iBAAS,eACd,oBAAC,gBAAgB;IACf,GAAG,EAAEb,mBAAoB;IACzB,QAAQ,EAAExC,QAAS;IACnB,QAAQ,EAAEO,YAAa;IACvB,cAAc,EAAE/B,eAAgB;IAChC,KAAK,EAAE4C,cAAc,CAAC,CAAC,CAAE;IACzB,QAAQ,EAAGgC,CAAC,IAAK/B,iBAAiB,CAAC,CAACD,cAAc,CAAC,CAAC,CAAC,EAAEgC,CAAC,CAAC,CAAE;IAC3D,SAAS,EAAGnB,CAAC,IAAK;MAChB,IAAIjC,QAAQ,EAAE;MACd,IAAIiC,CAAC,CAACG,GAAG,KAAK,OAAO,EAAE;QACrBjB,SAAS,CAAC,CAACD,MAAM,CAAC;MACpB;IACF,CAAE;IACF,OAAO,EAAEwC;EAAqB,EAC9B,CACD,gBAEH,oBAAC,gBAAgB;IACf,GAAG,EAAEnB,kBAAmB;IACxB,SAAS;IACT,QAAQ,EAAEvC,QAAS;IACnB,QAAQ,EAAEO,YAAa;IACvB,cAAc,EAAE/B,eAAgB;IAChC,KAAK,EAAE4C,cAAe;IACtB,QAAQ,EAAEC,iBAAkB;IAC5B,SAAS,EAAGY,CAAC,IAAK;MAChB,IAAIjC,QAAQ,EAAE;MACd,IAAIiC,CAAC,CAACG,GAAG,KAAK,OAAO,EAAE;QACrBjB,SAAS,CAAC,CAACD,MAAM,CAAC;MACpB;IACF,CAAE;IACF,OAAO,EAAEwC;EAAqB,EAEjC,CACa,GACd,IAAI,EACV,CACEA,oBAAoB,EACpB1D,QAAQ,EACRoB,cAAc,EACdF,MAAM,EACNG,iBAAiB,EACjBf,QAAQ,EACR+C,kBAAkB,EAClB9C,YAAY,CACb,CACF;EAED,oBACE,uDACE,oBAAC,eAAe;IACd,MAAM,EAAEW,MAAO;IACf,QAAQ,EAAElB,QAAS;IACnB,IAAI,EAAEa,IAAK;IACX,QAAQ,EAAE,CAACb,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;IAC7B,OAAO,EAAE,MAAM;MACb,IAAIA,QAAQ,EAAE;MACdmB,SAAS,CAAC,CAACD,MAAM,CAAC;IACpB,CAAE;IACF,SAAS,EAAGe,CAAC,IAAK;MAChB,IAAIjC,QAAQ,EAAE;MACd,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAACmC,QAAQ,CAACF,CAAC,CAACG,GAAG,CAAC,EAAE;QAClCjB,SAAS,CAAC,CAACD,MAAM,CAAC;QAClBe,CAAC,CAACI,cAAc,EAAE;MACpB;IACF,CAAE;IACF,WAAW,EAAGJ,CAAC,IAAKA,CAAC,CAACI,cAAc,EAAG;IACvC,IAAI,EAAC,UAAU;IACf,cACEjB,cAAc,GACVlF,yBAAyB,CAACkF,cAAc,EAAEf,MAAM,CAAC,GACjDuB,SACL;IACD,iBAAe5B;EAAS,GACpBc,IAAI;IACR,GAAG,EAAEG;EAAmB,IAEvBtB,IAAI,iBACH,oBAAC,cAAc;IACb,SAAS,EAAGiE,CAAC,KAAM;MACjBC,uBAAuB,EAAE,GAAG;MAC5BvF,UAAU,EAAEsF,CAAC,CAACE,0BAA0B,GAAGF,CAAC,CAACG,KAAK,CAACC;IACrD,CAAC;EAAE,gBAEH,oBAAC,SAAS;IAAC,UAAU,EAAEpE;EAAe,GAAED,IAAI,CAAa,CAE5D,eAED,oBAAC,OAAO;IAAC,OAAO,EAAE,CAAC,CAACA,IAAK;IAAC,QAAQ,EAAE,CAAC,CAACE;EAAM,GACzCiC,gBAAgB,gBACf,oBAAC,KAAK;IAAC,QAAQ,EAAE9B,QAAS;IAAC;EAAW,GACnCyB,cAAc,CACT,gBAER,oBAAC,WAAW,QAAE1B,WAAW,CAC1B,CACO,EAETiC,UAAU,iBACT,oBAAC,cAAc;IACb,SAAS,EAAG4B,CAAC,KAAM;MACjBC,uBAAuB,EAAE,GAAG;MAC5BvF,UAAU,EAAEsF,CAAC,CAACE,0BAA0B,GAAGF,CAAC,CAACG,KAAK,CAACC;IACrD,CAAC;EAAE,gBAEH,oBAAC,UAAU;IAAC,UAAU,EAAEjC;EAAqB,GAC1CC,UAAU,CACA,CAEhB,CACe,EAEjBH,OAAO,gBACN,oBAAC,aAAa;IACZ,OAAO,EAAEb,YAAa;IACtB,SAAS,EAAC,cAAc;IACxB,OAAO,EAAEE,MAAO;IAChB,OAAO,EAAEQ,YAAa;IACtB,IAAI,EAAEb;EAAK,GAEVsC,iBAAiB,EACjBQ,aAAa,CACA,gBAEhB,oBAAC,KAAK;IACJ,KAAK,EAAE5D,WAAY;IACnB,MAAM,EAAE,IAAK;IACb,MAAM,EAAE,IAAK;IACb,OAAO,EAAEmB,MAAO;IAChB,OAAO,EAAEQ,YAAa;IACtB,IAAI,EAAEb;EAAK,GAEVsC,iBAAiB,EACjBQ,aAAa,CAEjB,CACA;AAEP,CAAC,CACF;AAEDjE,UAAU,CAACuE,WAAW,GAAG,YAAY;AAErC,eAAevE,UAAU"}
@@ -1,16 +1,16 @@
1
1
  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); }
2
- import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
3
- import { transitionStyles } from '@os-design/styles';
4
- import { omitEmotionProps, useEvent, useForwardedRef, useForwardedState, useResizeObserver, useBrowserLayoutEffect } from '@os-design/utils';
2
+ import { css } from '@emotion/react';
5
3
  import styled from '@emotion/styled';
6
4
  import { m } from '@os-design/media';
7
- import { css } from '@emotion/react';
5
+ import { transitionStyles } from '@os-design/styles';
8
6
  import { clr } from '@os-design/theming';
7
+ import { omitEmotionProps, useBrowserLayoutEffect, useEvent, useForwardedRef, useForwardedState, useResizeObserver } from '@os-design/utils';
8
+ import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
9
9
  import { InputContainer } from '../Input';
10
- import Menu from '../Menu';
11
10
  import InputSearch from '../InputSearch';
12
- import SelectToggle from './SelectToggle';
11
+ import Menu from '../Menu';
13
12
  import SelectList from './SelectList';
13
+ import SelectToggle from './SelectToggle';
14
14
  import defaultLocale from './utils/defaultLocale';
15
15
  const paddingStyles = p => {
16
16
  const paddingVertical = (p.theme.baseHeight - p.theme.selectToggleListItemHeight) / 2;
@@ -100,6 +100,7 @@ const Select = /*#__PURE__*/forwardRef(({
100
100
  defaultValue,
101
101
  onChange,
102
102
  onLoadNext = () => {},
103
+ onClose = () => {},
103
104
  size,
104
105
  placement,
105
106
  ...rest
@@ -117,6 +118,13 @@ const Select = /*#__PURE__*/forwardRef(({
117
118
  if (!autoFocus) return;
118
119
  containerRef.current?.focus();
119
120
  }, [autoFocus, containerRef]);
121
+ const onCloseRef = useRef(onClose);
122
+ useEffect(() => {
123
+ onCloseRef.current = onClose;
124
+ }, [onClose]);
125
+ useEffect(() => {
126
+ if (!opened) onCloseRef.current();
127
+ }, [opened]);
120
128
 
121
129
  /**
122
130
  * Detect the width of the container when the select was opened and update
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useEffect","useMemo","useRef","useState","transitionStyles","omitEmotionProps","useEvent","useForwardedRef","useForwardedState","useResizeObserver","useBrowserLayoutEffect","styled","m","css","clr","InputContainer","Menu","InputSearch","SelectToggle","SelectList","defaultLocale","paddingStyles","p","paddingVertical","theme","baseHeight","selectToggleListItemHeight","openedStyles","opened","unbordered","inputFocusColorBorder","inputFocusColorShadow","unborderedStyles","unborderedHoverStyles","disabled","buttonGhostColorBgHover","SelectContainer","SelectMenu","min","xs","width","NotFound","div","menuItemHeight","inputPaddingHorizontal","selectNotFoundColorText","InputSearchContainer","menuPaddingVertical","Select","options","left","leftHasPadding","right","rightHasPadding","placeholder","searchVisible","searchProps","notFoundText","loading","autoFocus","autoOpen","clearVisible","threshold","visibleCount","overscanCount","maxSelectedItems","locale","value","defaultValue","onChange","onLoadNext","size","placement","rest","ref","containerRef","mergedContainerRef","setWidth","inputSearchContainerRef","setOpened","forwardedValue","setForwardedValue","current","focus","resizeHandler","window","requestAnimationFrame","nextWidth","getBoundingClientRect","undefined","setAttribute","selectedItems","map","v","option","find","item","title","listBoxId","Math","random","toString","slice","e","includes","key","preventDefault","filter","length","displayName"],"sources":["../../../src/Select/index.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { transitionStyles, WithSize } from '@os-design/styles';\nimport {\n omitEmotionProps,\n useEvent,\n useForwardedRef,\n useForwardedState,\n useResizeObserver,\n useBrowserLayoutEffect,\n} from '@os-design/utils';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { css } from '@emotion/react';\nimport { clr } from '@os-design/theming';\nimport { InputContainer } from '../Input';\nimport Menu from '../Menu';\nimport InputSearch, { InputSearchProps } from '../InputSearch';\nimport SelectToggle from './SelectToggle';\nimport SelectList, { OptionProps } from './SelectList';\nimport { PopoverProps } from '../Popover';\nimport defaultLocale, { SelectLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface SelectProps\n extends JsxDivProps,\n WithSize,\n Pick<PopoverProps, 'placement'> {\n /**\n * Options of the select.\n * @default undefined\n */\n options?: OptionProps[];\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 select.\n * @default undefined\n */\n placeholder?: string;\n /**\n * Whether the search input visible.\n * @default false\n */\n searchVisible?: boolean;\n /**\n * Props of the search input.\n * @default undefined\n */\n searchProps?: InputSearchProps;\n /**\n * Text displayed when there are no list items.\n * @default Not found\n */\n notFoundText?: string;\n /**\n * Whether the border is hidden.\n * @default false\n */\n unbordered?: boolean;\n /**\n * Shows the loading status.\n * @default false\n */\n loading?: boolean;\n /**\n * Whether the select 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 list.\n * @default false\n */\n autoOpen?: boolean;\n /**\n * Whether the select has the clear button.\n * @default false\n */\n clearVisible?: boolean;\n /**\n * A threshold N means that the onLoadNext function calls when a user scrolls all items except N.\n * @default 10\n */\n threshold?: number;\n /**\n * Defines how many items inside of the visible \"window\" to render.\n * @default 6\n */\n visibleCount?: number;\n /**\n * Defines how many items outside of the visible \"window\" to render at all times.\n * @default 10\n */\n overscanCount?: number;\n /**\n * The max number of options that the user can select.\n * @default 1\n */\n maxSelectedItems?: number | 'all';\n /**\n * The locale.\n * @default undefined\n */\n locale?: SelectLocale;\n /**\n * Selected options.\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 * The callback to load more items.\n * @default undefined\n */\n onLoadNext?: () => void;\n}\n\nconst paddingStyles = (p) => {\n const paddingVertical =\n (p.theme.baseHeight - p.theme.selectToggleListItemHeight) / 2;\n\n return css`\n padding: calc(${paddingVertical}em - 1px) 0;\n `;\n};\n\nconst openedStyles = (p) =>\n p.opened &&\n !p.unbordered &&\n css`\n border-color: ${clr(p.theme.inputFocusColorBorder)};\n box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};\n `;\n\nconst unborderedStyles = (p) =>\n p.unbordered &&\n css`\n border: 0;\n box-shadow: none !important;\n ${transitionStyles('background-color')(p)};\n `;\n\nconst unborderedHoverStyles = (p) =>\n p.unbordered &&\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n background-color: ${clr(p.theme.buttonGhostColorBgHover)};\n }\n }\n `;\n\ninterface SelectContainerProps {\n opened: boolean;\n unbordered?: boolean;\n disabled?: boolean;\n}\nexport const SelectContainer = styled(\n InputContainer,\n omitEmotionProps('opened', 'unbordered', 'disabled')\n)<SelectContainerProps>`\n cursor: ${(p) => (!p.disabled ? 'pointer' : 'not-allowed')};\n user-select: none;\n position: relative;\n display: flex;\n align-items: center;\n\n height: unset;\n min-height: ${(p) => p.theme.baseHeight}em;\n\n ${paddingStyles};\n ${openedStyles};\n ${unborderedStyles};\n ${unborderedHoverStyles};\n`;\n\ninterface SelectMenuProps {\n width: number;\n}\nconst SelectMenu = styled(Menu, omitEmotionProps('width'))<SelectMenuProps>`\n padding-top: 0;\n padding-bottom: 0;\n max-height: unset;\n\n ${m.min.xs} {\n width: ${(p) => p.width}px;\n }\n`;\n\nconst NotFound = styled.div`\n height: ${(p) => p.theme.menuItemHeight}em;\n display: flex;\n align-items: center;\n\n padding: 0 ${(p) => p.theme.inputPaddingHorizontal}em;\n color: ${(p) => clr(p.theme.selectNotFoundColorText)};\n`;\n\nconst InputSearchContainer = styled.div`\n padding: ${(p) => p.theme.menuPaddingVertical}em\n ${(p) => p.theme.inputPaddingHorizontal}em 0;\n`;\n\n/**\n * The component that allows to pick a value from predefined options.\n */\nconst Select = forwardRef<HTMLDivElement, SelectProps>(\n (\n {\n options = [],\n left,\n leftHasPadding = false,\n right,\n rightHasPadding = false,\n placeholder,\n searchVisible = false,\n searchProps = {},\n notFoundText = 'Not found',\n unbordered = false,\n loading = false,\n disabled = false,\n autoFocus = false,\n autoOpen = false,\n clearVisible = false,\n threshold = 10,\n visibleCount = 6,\n overscanCount = 10,\n maxSelectedItems = 1,\n locale = defaultLocale,\n value,\n defaultValue,\n onChange,\n onLoadNext = () => {},\n size,\n placement,\n ...rest\n },\n ref\n ) => {\n const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n const [width, setWidth] = useState(0);\n const inputSearchContainerRef = useRef<HTMLDivElement>(null);\n const [opened, setOpened] = useState(autoOpen);\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n useEffect(() => {\n if (!autoFocus) return;\n containerRef.current?.focus();\n }, [autoFocus, containerRef]);\n\n /**\n * Detect the width of the container when the select was opened and update\n * it when either the container size or the window size has been changed.\n */\n const resizeHandler = useCallback(() => {\n window.requestAnimationFrame(() => {\n if (!opened || !containerRef.current) return;\n const nextWidth = containerRef.current.getBoundingClientRect().width;\n if (width === nextWidth) return;\n setWidth(nextWidth);\n });\n }, [opened, containerRef, width]);\n useBrowserLayoutEffect(() => resizeHandler(), [resizeHandler]);\n useResizeObserver(containerRef, resizeHandler);\n useEvent(\n (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n 'resize',\n resizeHandler\n );\n\n // Replace the aria-haspopup attribute from menu to listbox\n useBrowserLayoutEffect(() => {\n if (!containerRef.current) return;\n containerRef.current.setAttribute('aria-haspopup', 'listbox');\n }, []);\n\n const selectedItems = useMemo(\n () =>\n (forwardedValue || []).map((v) => {\n const option = (options || []).find((item) => item.value === v);\n return { title: option ? option.title || '' : '', value: v };\n }),\n [forwardedValue, options]\n );\n\n const listBoxId = useMemo(\n () => `listbox-${Math.random().toString(36).slice(2, 11)}`,\n []\n );\n\n return (\n <>\n <SelectContainer\n opened={opened}\n unbordered={unbordered}\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 role='combobox'\n aria-disabled={disabled}\n aria-busy={loading}\n aria-haspopup='listbox'\n aria-owns={listBoxId}\n {...rest}\n ref={mergedContainerRef}\n >\n <SelectToggle\n selectedItems={selectedItems}\n onDelete={(v) =>\n setForwardedValue(\n (forwardedValue || []).filter((item) => item !== v)\n )\n }\n onClear={() => {\n setForwardedValue([]);\n if (!containerRef.current) return;\n containerRef.current.focus();\n }}\n opened={opened}\n multiple={maxSelectedItems !== 1}\n placeholder={placeholder}\n left={left}\n leftHasPadding={leftHasPadding}\n right={right}\n rightHasPadding={rightHasPadding}\n unbordered={unbordered}\n disabled={disabled}\n clearVisible={clearVisible}\n loading={loading}\n locale={locale}\n />\n </SelectContainer>\n\n <SelectMenu\n trigger={containerRef}\n visible={opened}\n onClose={() => setOpened(false)}\n size={size}\n width={width}\n closeOnSelect={maxSelectedItems === 1}\n modalTitle={placeholder}\n placement={placement}\n >\n {searchVisible && (\n <InputSearchContainer ref={inputSearchContainerRef}>\n <InputSearch {...searchProps} />\n </InputSearchContainer>\n )}\n\n {options.length > 0 ? (\n <SelectList\n searchVisible={searchVisible}\n options={options}\n visibleCount={visibleCount}\n overscanCount={overscanCount}\n threshold={threshold}\n onLoadNext={onLoadNext}\n maxSelectedItems={maxSelectedItems}\n containerRef={containerRef}\n value={forwardedValue}\n onChange={setForwardedValue}\n id={listBoxId}\n size={size}\n />\n ) : (\n <NotFound>{notFoundText}</NotFound>\n )}\n </SelectMenu>\n </>\n );\n }\n);\n\nSelect.displayName = 'Select';\n\nexport default Select;\n"],"mappings":"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"}
1
+ {"version":3,"file":"index.js","names":["css","styled","m","transitionStyles","clr","omitEmotionProps","useBrowserLayoutEffect","useEvent","useForwardedRef","useForwardedState","useResizeObserver","React","forwardRef","useCallback","useEffect","useMemo","useRef","useState","InputContainer","InputSearch","Menu","SelectList","SelectToggle","defaultLocale","paddingStyles","p","paddingVertical","theme","baseHeight","selectToggleListItemHeight","openedStyles","opened","unbordered","inputFocusColorBorder","inputFocusColorShadow","unborderedStyles","unborderedHoverStyles","disabled","buttonGhostColorBgHover","SelectContainer","SelectMenu","min","xs","width","NotFound","div","menuItemHeight","inputPaddingHorizontal","selectNotFoundColorText","InputSearchContainer","menuPaddingVertical","Select","options","left","leftHasPadding","right","rightHasPadding","placeholder","searchVisible","searchProps","notFoundText","loading","autoFocus","autoOpen","clearVisible","threshold","visibleCount","overscanCount","maxSelectedItems","locale","value","defaultValue","onChange","onLoadNext","onClose","size","placement","rest","ref","containerRef","mergedContainerRef","setWidth","inputSearchContainerRef","setOpened","forwardedValue","setForwardedValue","current","focus","onCloseRef","resizeHandler","window","requestAnimationFrame","nextWidth","getBoundingClientRect","undefined","setAttribute","selectedItems","map","v","option","find","item","title","listBoxId","Math","random","toString","slice","e","includes","key","preventDefault","filter","length","displayName"],"sources":["../../../src/Select/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { m } from '@os-design/media';\nimport { transitionStyles, WithSize } from '@os-design/styles';\nimport { clr } from '@os-design/theming';\nimport {\n omitEmotionProps,\n useBrowserLayoutEffect,\n useEvent,\n useForwardedRef,\n useForwardedState,\n useResizeObserver,\n} from '@os-design/utils';\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { InputContainer } from '../Input';\nimport InputSearch, { InputSearchProps } from '../InputSearch';\nimport Menu from '../Menu';\nimport { PopoverProps } from '../Popover';\nimport SelectList, { OptionProps } from './SelectList';\nimport SelectToggle from './SelectToggle';\nimport defaultLocale, { SelectLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface SelectProps\n extends JsxDivProps,\n WithSize,\n Pick<PopoverProps, 'placement'> {\n /**\n * Options of the select.\n * @default undefined\n */\n options?: OptionProps[];\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 select.\n * @default undefined\n */\n placeholder?: string;\n /**\n * Whether the search input visible.\n * @default false\n */\n searchVisible?: boolean;\n /**\n * Props of the search input.\n * @default undefined\n */\n searchProps?: InputSearchProps;\n /**\n * Text displayed when there are no list items.\n * @default Not found\n */\n notFoundText?: string;\n /**\n * Whether the border is hidden.\n * @default false\n */\n unbordered?: boolean;\n /**\n * Shows the loading status.\n * @default false\n */\n loading?: boolean;\n /**\n * Whether the select 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 list.\n * @default false\n */\n autoOpen?: boolean;\n /**\n * Whether the select has the clear button.\n * @default false\n */\n clearVisible?: boolean;\n /**\n * A threshold N means that the onLoadNext function calls when a user scrolls all items except N.\n * @default 10\n */\n threshold?: number;\n /**\n * Defines how many items inside of the visible \"window\" to render.\n * @default 6\n */\n visibleCount?: number;\n /**\n * Defines how many items outside of the visible \"window\" to render at all times.\n * @default 10\n */\n overscanCount?: number;\n /**\n * The max number of options that the user can select.\n * @default 1\n */\n maxSelectedItems?: number | 'all';\n /**\n * The locale.\n * @default undefined\n */\n locale?: SelectLocale;\n /**\n * Selected options.\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 * The callback to load more items.\n * @default undefined\n */\n onLoadNext?: () => void;\n /**\n * The event handler that is called whenever a popup closes.\n * @default undefined\n */\n onClose?: () => void;\n}\n\nconst paddingStyles = (p) => {\n const paddingVertical =\n (p.theme.baseHeight - p.theme.selectToggleListItemHeight) / 2;\n\n return css`\n padding: calc(${paddingVertical}em - 1px) 0;\n `;\n};\n\nconst openedStyles = (p) =>\n p.opened &&\n !p.unbordered &&\n css`\n border-color: ${clr(p.theme.inputFocusColorBorder)};\n box-shadow: 0 0 0 0.15em ${clr(p.theme.inputFocusColorShadow)};\n `;\n\nconst unborderedStyles = (p) =>\n p.unbordered &&\n css`\n border: 0;\n box-shadow: none !important;\n ${transitionStyles('background-color')(p)};\n `;\n\nconst unborderedHoverStyles = (p) =>\n p.unbordered &&\n !p.disabled &&\n css`\n @media (hover: hover) {\n &:hover,\n &:focus {\n background-color: ${clr(p.theme.buttonGhostColorBgHover)};\n }\n }\n `;\n\ninterface SelectContainerProps {\n opened: boolean;\n unbordered?: boolean;\n disabled?: boolean;\n}\nexport const SelectContainer = styled(\n InputContainer,\n omitEmotionProps('opened', 'unbordered', 'disabled')\n)<SelectContainerProps>`\n cursor: ${(p) => (!p.disabled ? 'pointer' : 'not-allowed')};\n user-select: none;\n position: relative;\n display: flex;\n align-items: center;\n\n height: unset;\n min-height: ${(p) => p.theme.baseHeight}em;\n\n ${paddingStyles};\n ${openedStyles};\n ${unborderedStyles};\n ${unborderedHoverStyles};\n`;\n\ninterface SelectMenuProps {\n width: number;\n}\nconst SelectMenu = styled(Menu, omitEmotionProps('width'))<SelectMenuProps>`\n padding-top: 0;\n padding-bottom: 0;\n max-height: unset;\n\n ${m.min.xs} {\n width: ${(p) => p.width}px;\n }\n`;\n\nconst NotFound = styled.div`\n height: ${(p) => p.theme.menuItemHeight}em;\n display: flex;\n align-items: center;\n\n padding: 0 ${(p) => p.theme.inputPaddingHorizontal}em;\n color: ${(p) => clr(p.theme.selectNotFoundColorText)};\n`;\n\nconst InputSearchContainer = styled.div`\n padding: ${(p) => p.theme.menuPaddingVertical}em\n ${(p) => p.theme.inputPaddingHorizontal}em 0;\n`;\n\n/**\n * The component that allows to pick a value from predefined options.\n */\nconst Select = forwardRef<HTMLDivElement, SelectProps>(\n (\n {\n options = [],\n left,\n leftHasPadding = false,\n right,\n rightHasPadding = false,\n placeholder,\n searchVisible = false,\n searchProps = {},\n notFoundText = 'Not found',\n unbordered = false,\n loading = false,\n disabled = false,\n autoFocus = false,\n autoOpen = false,\n clearVisible = false,\n threshold = 10,\n visibleCount = 6,\n overscanCount = 10,\n maxSelectedItems = 1,\n locale = defaultLocale,\n value,\n defaultValue,\n onChange,\n onLoadNext = () => {},\n onClose = () => {},\n size,\n placement,\n ...rest\n },\n ref\n ) => {\n const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n const [width, setWidth] = useState(0);\n const inputSearchContainerRef = useRef<HTMLDivElement>(null);\n const [opened, setOpened] = useState(autoOpen);\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\n\n useEffect(() => {\n if (!autoFocus) return;\n 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) onCloseRef.current();\n }, [opened]);\n\n /**\n * Detect the width of the container when the select was opened and update\n * it when either the container size or the window size has been changed.\n */\n const resizeHandler = useCallback(() => {\n window.requestAnimationFrame(() => {\n if (!opened || !containerRef.current) return;\n const nextWidth = containerRef.current.getBoundingClientRect().width;\n if (width === nextWidth) return;\n setWidth(nextWidth);\n });\n }, [opened, containerRef, width]);\n useBrowserLayoutEffect(() => resizeHandler(), [resizeHandler]);\n useResizeObserver(containerRef, resizeHandler);\n useEvent(\n (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n 'resize',\n resizeHandler\n );\n\n // Replace the aria-haspopup attribute from menu to listbox\n useBrowserLayoutEffect(() => {\n if (!containerRef.current) return;\n containerRef.current.setAttribute('aria-haspopup', 'listbox');\n }, []);\n\n const selectedItems = useMemo(\n () =>\n (forwardedValue || []).map((v) => {\n const option = (options || []).find((item) => item.value === v);\n return { title: option ? option.title || '' : '', value: v };\n }),\n [forwardedValue, options]\n );\n\n const listBoxId = useMemo(\n () => `listbox-${Math.random().toString(36).slice(2, 11)}`,\n []\n );\n\n return (\n <>\n <SelectContainer\n opened={opened}\n unbordered={unbordered}\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 role='combobox'\n aria-disabled={disabled}\n aria-busy={loading}\n aria-haspopup='listbox'\n aria-owns={listBoxId}\n {...rest}\n ref={mergedContainerRef}\n >\n <SelectToggle\n selectedItems={selectedItems}\n onDelete={(v) =>\n setForwardedValue(\n (forwardedValue || []).filter((item) => item !== v)\n )\n }\n onClear={() => {\n setForwardedValue([]);\n if (!containerRef.current) return;\n containerRef.current.focus();\n }}\n opened={opened}\n multiple={maxSelectedItems !== 1}\n placeholder={placeholder}\n left={left}\n leftHasPadding={leftHasPadding}\n right={right}\n rightHasPadding={rightHasPadding}\n unbordered={unbordered}\n disabled={disabled}\n clearVisible={clearVisible}\n loading={loading}\n locale={locale}\n />\n </SelectContainer>\n\n <SelectMenu\n trigger={containerRef}\n visible={opened}\n onClose={() => setOpened(false)}\n size={size}\n width={width}\n closeOnSelect={maxSelectedItems === 1}\n modalTitle={placeholder}\n placement={placement}\n >\n {searchVisible && (\n <InputSearchContainer ref={inputSearchContainerRef}>\n <InputSearch {...searchProps} />\n </InputSearchContainer>\n )}\n\n {options.length > 0 ? (\n <SelectList\n searchVisible={searchVisible}\n options={options}\n visibleCount={visibleCount}\n overscanCount={overscanCount}\n threshold={threshold}\n onLoadNext={onLoadNext}\n maxSelectedItems={maxSelectedItems}\n containerRef={containerRef}\n value={forwardedValue}\n onChange={setForwardedValue}\n id={listBoxId}\n size={size}\n />\n ) : (\n <NotFound>{notFoundText}</NotFound>\n )}\n </SelectMenu>\n </>\n );\n }\n);\n\nSelect.displayName = 'Select';\n\nexport default Select;\n"],"mappings":"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"}
@@ -1,8 +1,8 @@
1
- import React from 'react';
2
1
  import { WithSize } from '@os-design/styles';
2
+ import React from 'react';
3
3
  import { InputSearchProps } from '../InputSearch';
4
- import { OptionProps } from './SelectList';
5
4
  import { PopoverProps } from '../Popover';
5
+ import { OptionProps } from './SelectList';
6
6
  import { SelectLocale } from './utils/defaultLocale';
7
7
  declare type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'value' | 'defaultValue' | 'onChange' | 'ref'>;
8
8
  export interface SelectProps extends JsxDivProps, WithSize, Pick<PopoverProps, 'placement'> {
@@ -30,6 +30,7 @@ export interface SelectProps extends JsxDivProps, WithSize, Pick<PopoverProps, '
30
30
  defaultValue?: string[];
31
31
  onChange?: (value: string[]) => void;
32
32
  onLoadNext?: () => void;
33
+ onClose?: () => void;
33
34
  }
34
35
  interface SelectContainerProps {
35
36
  opened: boolean;
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,EAAoB,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAe/D,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAmB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAsB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEpE,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,MAAM,WAAW,WACf,SAAQ,WAAW,EACjB,QAAQ,EACR,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC;IAKjC,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IAKxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMvB,cAAc,CAAC,EAAE,OAAO,CAAC;IAKzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAK1B,WAAW,CAAC,EAAE,MAAM,CAAC;IAKrB,aAAa,CAAC,EAAE,OAAO,CAAC;IAKxB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAK/B,YAAY,CAAC,EAAE,MAAM,CAAC;IAKtB,UAAU,CAAC,EAAE,OAAO,CAAC;IAKrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAKlB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAKpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,YAAY,CAAC,EAAE,OAAO,CAAC;IAKvB,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,YAAY,CAAC,EAAE,MAAM,CAAC;IAKtB,aAAa,CAAC,EAAE,MAAM,CAAC;IAKvB,gBAAgB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAKlC,MAAM,CAAC,EAAE,YAAY,CAAC;IAKtB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IAKjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IAKxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAKrC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAuCD,UAAU,oBAAoB;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,eAAO,MAAM,eAAe;;;;;;;;iCAiB3B,CAAC;AAgCF,QAAA,MAAM,MAAM,oFAqLX,CAAC;AAIF,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Select/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAoB,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAU/D,OAAO,KAON,MAAM,OAAO,CAAC;AAEf,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAmB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEvD,OAAsB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEpE,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,MAAM,WAAW,WACf,SAAQ,WAAW,EACjB,QAAQ,EACR,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC;IAKjC,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IAKxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMvB,cAAc,CAAC,EAAE,OAAO,CAAC;IAKzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAK1B,WAAW,CAAC,EAAE,MAAM,CAAC;IAKrB,aAAa,CAAC,EAAE,OAAO,CAAC;IAKxB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAK/B,YAAY,CAAC,EAAE,MAAM,CAAC;IAKtB,UAAU,CAAC,EAAE,OAAO,CAAC;IAKrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAKlB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAKpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,YAAY,CAAC,EAAE,OAAO,CAAC;IAKvB,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,YAAY,CAAC,EAAE,MAAM,CAAC;IAKtB,aAAa,CAAC,EAAE,MAAM,CAAC;IAKvB,gBAAgB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAKlC,MAAM,CAAC,EAAE,YAAY,CAAC;IAKtB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IAKjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IAKxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAKrC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IAKxB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAuCD,UAAU,oBAAoB;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,eAAO,MAAM,eAAe;;;;;;;;iCAiB3B,CAAC;AAgCF,QAAA,MAAM,MAAM,oFA+LX,CAAC;AAIF,eAAe,MAAM,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@os-design/core",
3
- "version": "1.0.167",
3
+ "version": "1.0.168",
4
4
  "license": "UNLICENSED",
5
5
  "repository": "git@gitlab.com:os-team/libs/os-design.git",
6
6
  "main": "dist/cjs/index.js",
@@ -58,5 +58,5 @@
58
58
  "react": ">=18",
59
59
  "react-dom": ">=18"
60
60
  },
61
- "gitHead": "9dfdc680810b6d537e573e4681cd2fc9c746bc8f"
61
+ "gitHead": "ceb69f0dc13aa292fd2d01b85a0ceb0d52abd69e"
62
62
  }