@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.
- package/dist/cjs/DatePicker/index.js.map +1 -1
- package/dist/cjs/Select/index.js +35 -26
- package/dist/cjs/Select/index.js.map +1 -1
- package/dist/esm/DatePicker/index.js.map +1 -1
- package/dist/esm/Select/index.js +14 -6
- package/dist/esm/Select/index.js.map +1 -1
- package/dist/types/Select/index.d.ts +3 -2
- package/dist/types/Select/index.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -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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"}
|
package/dist/cjs/Select/index.js
CHANGED
|
@@ -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 =
|
|
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
|
|
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
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
129
|
-
var _useState3 = (0,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
190
|
+
var listBoxId = (0, _react2.useMemo)(function () {
|
|
182
191
|
return "listbox-".concat(Math.random().toString(36).slice(2, 11));
|
|
183
192
|
}, []);
|
|
184
|
-
return /*#__PURE__*/
|
|
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__*/
|
|
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__*/
|
|
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__*/
|
|
255
|
+
}, searchVisible && /*#__PURE__*/_react2["default"].createElement(InputSearchContainer, {
|
|
247
256
|
ref: inputSearchContainerRef
|
|
248
|
-
}, /*#__PURE__*/
|
|
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__*/
|
|
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":";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
|
+
{"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":"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"}
|
package/dist/esm/Select/index.js
CHANGED
|
@@ -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
|
|
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 {
|
|
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
|
|
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":"
|
|
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.
|
|
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": "
|
|
61
|
+
"gitHead": "ceb69f0dc13aa292fd2d01b85a0ceb0d52abd69e"
|
|
62
62
|
}
|