@os-design/core 1.0.167 → 1.0.169
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/{emotion.d.js → @types/emotion.d.js} +0 -0
- package/dist/cjs/@types/emotion.d.js.map +1 -0
- package/dist/cjs/DatePicker/index.js.map +1 -1
- package/dist/cjs/Select/index.js +41 -26
- package/dist/cjs/Select/index.js.map +1 -1
- package/dist/esm/{emotion.d.js → @types/emotion.d.js} +0 -0
- package/dist/esm/@types/emotion.d.js.map +1 -0
- package/dist/esm/DatePicker/index.js.map +1 -1
- package/dist/esm/Select/index.js +19 -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 +6 -6
- package/dist/cjs/emotion.d.js.map +0 -1
- package/dist/esm/emotion.d.js.map +0 -1
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"emotion.d.js","names":[],"sources":["../../../src/@types/emotion.d.ts"],"sourcesContent":["import '@emotion/react';\nimport { Theme as BaseTheme } from '@os-design/theming';\n\ndeclare module '@emotion/react' {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n export interface Theme extends BaseTheme {}\n}\n"],"mappings":";;AAAA"}
|
|
@@ -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":";;;;;;;AAAA;AACA;AAMA;AACA;AAEA;AACA;AAKA;AAQA;AACA;AACA;AACA;AACA;AASA;AACA;AAAsD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA+GtD,IAAMA,aAAa,GAAG,IAAAC,kBAAM,EAACC,mBAAO,CAAC,4FACxB,UAACC,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACC,iBAAiB;AAAA,EAC5C;AAED,IAAMC,aAAa,GAAGL,kBAAM,CAACM,GAAG,6IAI/B;AAED,IAAMC,IAAI,GAAGP,kBAAM,CAACM,GAAG,sHAEN,UAACJ,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACK,UAAU;AAAA,EACzC;AAED,IAAMC,gBAAgB,GAAG,IAAAT,kBAAM,EAACU,sBAAU,CAAC,iHAG1C;AAED,IAAMC,eAAe,GAAG;EAAEC,KAAK,EAAE;IAAEC,KAAK,EAAE;EAAO;AAAE,CAAC;AAEpD,IAAMC,UAAU,GAAG,SAAbA,UAAU,CAAIC,IAAU,EAAEC,IAAkB,EAAK;EACrD,IAAMC,CAAC,GAAG,IAAIC,IAAI,CAAC,CAAC,CAAC;EACrBD,CAAC,CAACE,WAAW,CAACJ,IAAI,CAACK,WAAW,EAAE,CAAC;EACjCH,CAAC,CAACI,QAAQ,CAACN,IAAI,CAACO,QAAQ,EAAE,CAAC;EAC3BL,CAAC,CAACM,OAAO,CAACR,IAAI,CAACS,OAAO,EAAE,CAAC;EACzBP,CAAC,CAACQ,QAAQ,CAAC,CAAC,CAAC;EACbR,CAAC,CAACS,UAAU,CAAC,CAAC,CAAC;EACf,IAAIV,IAAI,EAAE;IACRC,CAAC,CAACQ,QAAQ,CAACT,IAAI,CAACW,QAAQ,EAAE,CAAC;IAC3BV,CAAC,CAACS,UAAU,CAACV,IAAI,CAACY,UAAU,EAAE,CAAC;EACjC;EACA,OAAOX,CAAC;AACV,CAAC;;AAED;AACA;AACA;AACA,IAAMY,UAAU,gBAAG,IAAAC,iBAAU,EAC3B,gBAuBEC,GAAG,EACA;EAAA,IAtBDC,IAAI,QAAJA,IAAI;IAAA,2BACJC,cAAc;IAAdA,cAAc,oCAAG,KAAK;IACtBC,KAAK,QAALA,KAAK;IAAA,4BACLC,eAAe;IAAfA,eAAe,qCAAG,KAAK;IACvBC,WAAW,QAAXA,WAAW;IAAA,qBACXC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,sBAChBC,SAAS;IAATA,SAAS,+BAAG,KAAK;IAAA,qBACjBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,MAAM,QAANA,MAAM;IAAA,2BACNC,cAAc;IAAdA,cAAc,oCAAG,QAAQ;IAAA,mBACzBC,MAAM;IAANA,MAAM,4BAAGC,8BAAa;IAAA,qBACtBC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAAA,yBAChBC,YAAY;IAAZA,YAAY,kCAAG,SAAS;IAAA,kBACxBC,KAAK;IAALA,KAAK,2BAAG,KAAK;IACbC,KAAK,QAALA,KAAK;IACLC,YAAY,QAAZA,YAAY;IACZC,QAAQ,QAARA,QAAQ;IAAA,oBACRC,OAAO;IAAPA,OAAO,6BAAG,YAAM,CAAC,CAAC;IAClBC,IAAI,QAAJA,IAAI;IACDC,IAAI;EAIT,uBAA2C,IAAAC,sBAAe,EAACtB,GAAG,CAAC;IAAA;IAAxDuB,YAAY;IAAEC,kBAAkB;EACvC,gBAA4B,IAAAC,eAAQ,EAACjB,QAAQ,CAAC;IAAA;IAAvCkB,MAAM;IAAEC,SAAS;EACxB;EACA,yBAA4C,IAAAC,wBAAiB,EAAM;MACjEZ,KAAK,EAALA,KAAK;MACLC,YAAY,EAAZA,YAAY;MACZC,QAAQ,EAARA;IACF,CAAC,CAAC;IAAA;IAJKW,cAAc;IAAEC,iBAAiB;EAMxC,IAAAC,gBAAS,EAAC,YAAM;IAAA;IACd,IAAIxB,SAAS,EAAE,yBAAAgB,YAAY,CAACS,OAAO,0DAApB,sBAAsBC,KAAK,EAAE;EAC9C,CAAC,EAAE,CAAC1B,SAAS,EAAEgB,YAAY,CAAC,CAAC;EAE7B,IAAMW,UAAU,GAAG,IAAAC,aAAM,EAAChB,OAAO,CAAC;EAClC,IAAAY,gBAAS,EAAC,YAAM;IACdG,UAAU,CAACF,OAAO,GAAGb,OAAO;EAC9B,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,IAAAY,gBAAS,EAAC,YAAM;IACd,IAAI,CAACL,MAAM,EAAEQ,UAAU,CAACF,OAAO,EAAE;EACnC,CAAC,EAAE,CAACN,MAAM,CAAC,CAAC;EAEZ,IAAMU,cAAc,GAAG,IAAAC,kCAAiB,EAAC;IACvCR,cAAc,EAAdA,cAAc;IACdpB,MAAM,EAANA,MAAM;IACNI,QAAQ,EAARA,QAAQ;IACRC,YAAY,EAAZA;EACF,CAAC,CAAC;EAEF,IAAMwB,YAAY,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACrCZ,SAAS,CAAC,KAAK,CAAC;EAClB,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAa,kBAAW,EACR,OAAOC,MAAM,KAAK,WAAW,GAAGA,MAAM,GAAGC,SAAS,EACnD,QAAQ,EACRJ,YAAY,CACb;EACD,IAAMK,OAAO,GAAG,IAAAC,oBAAa,EAAC,IAAI,CAAC;EAEnC,IAAMC,gBAAgB,GAAG,IAAAC,cAAO,EAC9B;IAAA,OAAMV,cAAc,KAAKM,SAAS,IAAIN,cAAc,KAAK,IAAI;EAAA,GAC7D,CAACA,cAAc,CAAC,CACjB;EAED,IAAMW,oBAAoB,GAAG,IAAAD,cAAO,EAAC,YAAM;IACzC,IAAID,gBAAgB,EAAE,OAAO,KAAK;IAClC,OAAO1C,KAAK,GAAGC,eAAe,GAAG,IAAI;EACvC,CAAC,EAAE,CAACD,KAAK,EAAEC,eAAe,EAAEyC,gBAAgB,CAAC,CAAC;EAE9C,IAAMG,UAAU,GAAG,IAAAF,cAAO,EAAC,YAAM;IAC/B,IAAID,gBAAgB,EAAE;MACpB,oBACE;QAAK;MAAW,gBACd,gCAAC,kBAAM;QACL,IAAI,EAAC,OAAO;QACZ,IAAI,EAAC,OAAO;QACZ,IAAI,EAAC,OAAO;QACZ,QAAQ,EAAEvC,QAAS;QACnB,OAAO,EAAE,iBAAC2C,CAAC,EAAK;UACdnB,iBAAiB,CAAC,IAAI,CAAC;UACvBmB,CAAC,CAACC,eAAe,EAAE;QACrB,CAAE;QACF,SAAS,EAAE,mBAACD,CAAC,EAAK;UAChB,IAAI3C,QAAQ,EAAE;UACd,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC6C,QAAQ,CAACF,CAAC,CAACG,GAAG,CAAC,EAAE;YAClCtB,iBAAiB,CAAC,IAAI,CAAC;YACvB,IAAI,CAACP,YAAY,CAACS,OAAO,EAAE;YAC3BT,YAAY,CAACS,OAAO,CAACC,KAAK,EAAE;YAC5BgB,CAAC,CAACI,cAAc,EAAE;YAClBJ,CAAC,CAACC,eAAe,EAAE;UACrB;QACF,CAAE;QACF,cAAYvC,MAAM,CAAC2C;MAAW,gBAE9B,gCAAC,uBAAS,OAAG,CACN,CACL;IAEV;IACA,OACEnD,KAAK,iBAAI,gCAAC,2BAAa,QAAEuB,MAAM,gBAAG,gCAAC,SAAE,OAAG,gBAAG,gCAAC,WAAI,OAAG,CAAiB;EAExE,CAAC,EAAE,CACDH,YAAY,EACZjB,QAAQ,EACRK,MAAM,CAAC2C,UAAU,EACjB5B,MAAM,EACNvB,KAAK,EACL2B,iBAAiB,EACjBe,gBAAgB,CACjB,CAAC;EAEF,IAAMU,kBAAkB,GAAG,IAAApB,aAAM,EAAmB,IAAI,CAAC;EACzD,IAAMqB,mBAAmB,GAAG,IAAArB,aAAM,EAAmB,IAAI,CAAC;EAC1D,IAAMsB,eAAe,GAAG,IAAAtB,aAAM,EAAC,KAAK,CAAC;EAErC,IAAAJ,gBAAS,EAAC,YAAM;IACd0B,eAAe,CAACzB,OAAO,GAAG,KAAK;EACjC,CAAC,EAAE,CAACN,MAAM,CAAC,CAAC;EAEZ,IAAMgC,aAAa,GAAG,IAAAnB,kBAAW,EAC/B,UAACvD,IAAU,EAAK;IACd8C,iBAAiB,CAAC,UAAC6B,IAAI,EAAK;MAC1B,IAAI,CAAC5C,KAAK,EAAE,OAAOhC,UAAU,CAACC,IAAI,EAAE2E,IAAI,CAAC;MAEzC,IAAMzE,CAAC,GAAGH,UAAU,CAACC,IAAI,CAAC;MAC1B,IAAM4E,SAAS,GACbD,IAAI,IAAIE,KAAK,CAACC,OAAO,CAACH,IAAI,CAAC,IAAIF,eAAe,CAACzB,OAAO,GAClD,CAAC,IAAI7C,IAAI,CAACwE,IAAI,CAAC,CAAC,CAAC,CAACI,OAAO,EAAE,CAAC,EAAEhF,UAAU,CAACC,IAAI,EAAE2E,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GACxD,CAACzE,CAAC,EAAEA,CAAC,CAAC;MAEZuE,eAAe,CAACzB,OAAO,GAAG,CAACyB,eAAe,CAACzB,OAAO;MAClD,OAAO4B,SAAS,CAACI,IAAI,CACnB,UAACC,CAAO,EAAEC,CAAO;QAAA,OAAKD,CAAC,CAACF,OAAO,EAAE,GAAGG,CAAC,CAACH,OAAO,EAAE;MAAA,EAChD;IACH,CAAC,CAAC;EACJ,CAAC,EACD,CAAChD,KAAK,EAAEe,iBAAiB,CAAC,CAC3B;EAED,IAAMqC,iBAAiB,GAAG,IAAArB,cAAO,EAC/B;IAAA,oBACE,gCAAC,8BAAkB;MACjB,cAAc,EAAEpC,cAAe;MAC/B,MAAM,EAAEC,MAAO;MACf,KAAK,EAAEkB,cAAe;MACtB,QAAQ,EAAE,kBAACuC,CAAC,EAAK;QAAA;QACfV,aAAa,CAACU,CAAC,CAAC;QAChB,yBAAAb,kBAAkB,CAACvB,OAAO,0DAA1B,sBAA4BC,KAAK,EAAE;QACnC,IAAI,CAACpB,QAAQ,KAAK,CAACE,KAAK,IAAI,CAAC0C,eAAe,CAACzB,OAAO,CAAC,EAAE;UACrDM,YAAY,EAAE;QAChB;MACF;IAAE,EACF;EAAA,CACH,EACD,CACEoB,aAAa,EACbpB,YAAY,EACZ5B,cAAc,EACdmB,cAAc,EACdlB,MAAM,EACNI,KAAK,EACLF,QAAQ,CACT,CACF;EAED,IAAMwD,kBAAkB,GAAG,IAAA9B,kBAAW,EACpC,UAACU,CAAC,EAAK;IAAA;IACL,IAAIA,CAAC,CAACqB,MAAM,CAACC,cAAc,GAAG,CAAC,EAAE;IACjC,yBAAAf,mBAAmB,CAACxB,OAAO,0DAA3B,sBAA6BC,KAAK,EAAE;IACpCH,iBAAiB,CAAC,iBAAY;MAAA;QAAV0C,IAAI;MACtB,IAAMC,MAAM,GAAG,IAAItF,IAAI,CAACqF,IAAI,CAACT,OAAO,EAAE,CAAC;MACvCU,MAAM,CAAC/E,QAAQ,CAAC+E,MAAM,CAAC7E,QAAQ,EAAE,GAAG,CAAC,CAAC;MACtC,OAAO,CAAC4E,IAAI,EAAEC,MAAM,CAAC;IACvB,CAAC,CAAC;EACJ,CAAC,EACD,CAAC3C,iBAAiB,CAAC,CACpB;EAED,IAAM4C,oBAAoB,GAAG,IAAAnC,kBAAW,EACtC,UAACU,CAAC,EAAK;IACL,IAAIA,CAAC,CAACqB,MAAM,CAACC,cAAc,GAAG,CAAC,EAAE;IACjCjC,YAAY,EAAE;EAChB,CAAC,EACD,CAACA,YAAY,CAAC,CACf;EAED,IAAMqC,aAAa,GAAG,IAAA7B,cAAO,EAC3B;IAAA,OACEjC,QAAQ,IAAIgB,cAAc,gBACxB,gCAAC,aAAa,QACXgC,KAAK,CAACC,OAAO,CAACjC,cAAc,CAAC,gBAC5B,+EACE,gCAAC,gBAAgB;MACf,GAAG,EAAE0B,kBAAmB;MACxB,SAAS;MACT,QAAQ,EAAEjD,QAAS;MACnB,QAAQ,EAAEQ,YAAa;MACvB,cAAc,EAAElC,eAAgB;MAChC,KAAK,EAAEiD,cAAc,CAAC,CAAC,CAAE;MACzB,QAAQ,EAAE,kBAACuC,CAAC;QAAA,OAAKtC,iBAAiB,CAAC,CAACsC,CAAC,EAAEvC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;MAAA,CAAC;MAC3D,SAAS,EAAE,mBAACoB,CAAC,EAAK;QAChB,IAAI3C,QAAQ,EAAE;QACd,IAAI2C,CAAC,CAACG,GAAG,KAAK,OAAO,EAAE;UACrBzB,SAAS,CAAC,CAACD,MAAM,CAAC;QACpB;MACF,CAAE;MACF,OAAO,EAAE2C;IAAmB,EAC5B,eACF,gCAAC,IAAI,iBAAS,eACd,gCAAC,gBAAgB;MACf,GAAG,EAAEb,mBAAoB;MACzB,QAAQ,EAAElD,QAAS;MACnB,QAAQ,EAAEQ,YAAa;MACvB,cAAc,EAAElC,eAAgB;MAChC,KAAK,EAAEiD,cAAc,CAAC,CAAC,CAAE;MACzB,QAAQ,EAAE,kBAACuC,CAAC;QAAA,OAAKtC,iBAAiB,CAAC,CAACD,cAAc,CAAC,CAAC,CAAC,EAAEuC,CAAC,CAAC,CAAC;MAAA,CAAC;MAC3D,SAAS,EAAE,mBAACnB,CAAC,EAAK;QAChB,IAAI3C,QAAQ,EAAE;QACd,IAAI2C,CAAC,CAACG,GAAG,KAAK,OAAO,EAAE;UACrBzB,SAAS,CAAC,CAACD,MAAM,CAAC;QACpB;MACF,CAAE;MACF,OAAO,EAAEgD;IAAqB,EAC9B,CACD,gBAEH,gCAAC,gBAAgB;MACf,GAAG,EAAEnB,kBAAmB;MACxB,SAAS;MACT,QAAQ,EAAEjD,QAAS;MACnB,QAAQ,EAAEQ,YAAa;MACvB,cAAc,EAAElC,eAAgB;MAChC,KAAK,EAAEiD,cAAe;MACtB,QAAQ,EAAEC,iBAAkB;MAC5B,SAAS,EAAE,mBAACmB,CAAC,EAAK;QAChB,IAAI3C,QAAQ,EAAE;QACd,IAAI2C,CAAC,CAACG,GAAG,KAAK,OAAO,EAAE;UACrBzB,SAAS,CAAC,CAACD,MAAM,CAAC;QACpB;MACF,CAAE;MACF,OAAO,EAAEgD;IAAqB,EAEjC,CACa,GACd,IAAI;EAAA,GACV,CACEA,oBAAoB,EACpBpE,QAAQ,EACRuB,cAAc,EACdH,MAAM,EACNI,iBAAiB,EACjBjB,QAAQ,EACRwD,kBAAkB,EAClBvD,YAAY,CACb,CACF;EAED,oBACE,+EACE,gCAAC,uBAAe;IACd,MAAM,EAAEY,MAAO;IACf,QAAQ,EAAEpB,QAAS;IACnB,IAAI,EAAEc,IAAK;IACX,QAAQ,EAAE,CAACd,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;IAC7B,OAAO,EAAE,mBAAM;MACb,IAAIA,QAAQ,EAAE;MACdqB,SAAS,CAAC,CAACD,MAAM,CAAC;IACpB,CAAE;IACF,SAAS,EAAE,mBAACuB,CAAC,EAAK;MAChB,IAAI3C,QAAQ,EAAE;MACd,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC6C,QAAQ,CAACF,CAAC,CAACG,GAAG,CAAC,EAAE;QAClCzB,SAAS,CAAC,CAACD,MAAM,CAAC;QAClBuB,CAAC,CAACI,cAAc,EAAE;MACpB;IACF,CAAE;IACF,WAAW,EAAE,qBAACJ,CAAC;MAAA,OAAKA,CAAC,CAACI,cAAc,EAAE;IAAA,CAAC;IACvC,IAAI,EAAC,UAAU;IACf,cACExB,cAAc,GACV,IAAA+C,0CAAyB,EAAC/C,cAAc,EAAElB,MAAM,CAAC,GACjD+B,SACL;IACD,iBAAepC;EAAS,GACpBe,IAAI;IACR,GAAG,EAAEG;EAAmB,IAEvBvB,IAAI,iBACH,gCAAC,uBAAc;IACb,SAAS,EAAE,mBAAC4E,CAAC;MAAA,OAAM;QACjBC,uBAAuB,EAAE,GAAG;QAC5BrG,UAAU,EAAEoG,CAAC,CAACE,0BAA0B,GAAGF,CAAC,CAACG,KAAK,CAACC;MACrD,CAAC;IAAA;EAAE,gBAEH,gCAAC,uBAAS;IAAC,UAAU,EAAE/E;EAAe,GAAED,IAAI,CAAa,CAE5D,eAED,gCAAC,qBAAO;IAAC,OAAO,EAAE,CAAC,CAACA,IAAK;IAAC,QAAQ,EAAE,CAAC,CAACE;EAAM,GACzC0C,gBAAgB,gBACf,gCAAC,mBAAK;IAAC,QAAQ,EAAEvC,QAAS;IAAC;EAAW,GACnC8B,cAAc,CACT,gBAER,gCAAC,yBAAW,QAAE/B,WAAW,CAC1B,CACO,EAET2C,UAAU,iBACT,gCAAC,uBAAc;IACb,SAAS,EAAE,mBAAC6B,CAAC;MAAA,OAAM;QACjBC,uBAAuB,EAAE,GAAG;QAC5BrG,UAAU,EAAEoG,CAAC,CAACE,0BAA0B,GAAGF,CAAC,CAACG,KAAK,CAACC;MACrD,CAAC;IAAA;EAAE,gBAEH,gCAAC,wBAAU;IAAC,UAAU,EAAElC;EAAqB,GAC1CC,UAAU,CACA,CAEhB,CACe,EAEjBL,OAAO,gBACN,gCAAC,aAAa;IACZ,OAAO,EAAEpB,YAAa;IACtB,SAAS,EAAC,cAAc;IACxB,OAAO,EAAEG,MAAO;IAChB,OAAO,EAAEY,YAAa;IACtB,IAAI,EAAElB;EAAK,GAEV+C,iBAAiB,EACjBQ,aAAa,CACA,gBAEhB,gCAAC,iBAAK;IACJ,KAAK,EAAEtE,WAAY;IACnB,MAAM,EAAE,IAAK;IACb,MAAM,EAAE,IAAK;IACb,OAAO,EAAEqB,MAAO;IAChB,OAAO,EAAEY,YAAa;IACtB,IAAI,EAAElB;EAAK,GAEV+C,iBAAiB,EACjBQ,aAAa,CAEjB,CACA;AAEP,CAAC,CACF;AAED7E,UAAU,CAACoF,WAAW,GAAG,YAAY;AAAC,eAEvBpF,UAAU;AAAA"}
|
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", "onBlur", "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,10 @@ 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,
|
|
119
|
+
_ref$onBlur = _ref.onBlur,
|
|
120
|
+
onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
|
|
117
121
|
size = _ref.size,
|
|
118
122
|
placement = _ref.placement,
|
|
119
123
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
@@ -121,12 +125,12 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
121
125
|
_useForwardedRef2 = _slicedToArray(_useForwardedRef, 2),
|
|
122
126
|
containerRef = _useForwardedRef2[0],
|
|
123
127
|
mergedContainerRef = _useForwardedRef2[1];
|
|
124
|
-
var _useState = (0,
|
|
128
|
+
var _useState = (0, _react2.useState)(0),
|
|
125
129
|
_useState2 = _slicedToArray(_useState, 2),
|
|
126
130
|
width = _useState2[0],
|
|
127
131
|
setWidth = _useState2[1];
|
|
128
|
-
var inputSearchContainerRef = (0,
|
|
129
|
-
var _useState3 = (0,
|
|
132
|
+
var inputSearchContainerRef = (0, _react2.useRef)(null);
|
|
133
|
+
var _useState3 = (0, _react2.useState)(autoOpen),
|
|
130
134
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
131
135
|
opened = _useState4[0],
|
|
132
136
|
setOpened = _useState4[1];
|
|
@@ -138,17 +142,24 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
138
142
|
_useForwardedState2 = _slicedToArray(_useForwardedState, 2),
|
|
139
143
|
forwardedValue = _useForwardedState2[0],
|
|
140
144
|
setForwardedValue = _useForwardedState2[1];
|
|
141
|
-
(0,
|
|
145
|
+
(0, _react2.useEffect)(function () {
|
|
142
146
|
var _containerRef$current;
|
|
143
147
|
if (!autoFocus) return;
|
|
144
148
|
(_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.focus();
|
|
145
149
|
}, [autoFocus, containerRef]);
|
|
150
|
+
var onCloseRef = (0, _react2.useRef)(onClose);
|
|
151
|
+
(0, _react2.useEffect)(function () {
|
|
152
|
+
onCloseRef.current = onClose;
|
|
153
|
+
}, [onClose]);
|
|
154
|
+
(0, _react2.useEffect)(function () {
|
|
155
|
+
if (!opened) onCloseRef.current();
|
|
156
|
+
}, [opened]);
|
|
146
157
|
|
|
147
158
|
/**
|
|
148
159
|
* Detect the width of the container when the select was opened and update
|
|
149
160
|
* it when either the container size or the window size has been changed.
|
|
150
161
|
*/
|
|
151
|
-
var resizeHandler = (0,
|
|
162
|
+
var resizeHandler = (0, _react2.useCallback)(function () {
|
|
152
163
|
window.requestAnimationFrame(function () {
|
|
153
164
|
if (!opened || !containerRef.current) return;
|
|
154
165
|
var nextWidth = containerRef.current.getBoundingClientRect().width;
|
|
@@ -167,7 +178,7 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
167
178
|
if (!containerRef.current) return;
|
|
168
179
|
containerRef.current.setAttribute('aria-haspopup', 'listbox');
|
|
169
180
|
}, []);
|
|
170
|
-
var selectedItems = (0,
|
|
181
|
+
var selectedItems = (0, _react2.useMemo)(function () {
|
|
171
182
|
return (forwardedValue || []).map(function (v) {
|
|
172
183
|
var option = (options || []).find(function (item) {
|
|
173
184
|
return item.value === v;
|
|
@@ -178,10 +189,13 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
178
189
|
};
|
|
179
190
|
});
|
|
180
191
|
}, [forwardedValue, options]);
|
|
181
|
-
var listBoxId = (0,
|
|
192
|
+
var listBoxId = (0, _react2.useMemo)(function () {
|
|
182
193
|
return "listbox-".concat(Math.random().toString(36).slice(2, 11));
|
|
183
194
|
}, []);
|
|
184
|
-
|
|
195
|
+
var blurHandler = (0, _react2.useCallback)(function (e) {
|
|
196
|
+
if (!opened) onBlur(e);
|
|
197
|
+
}, [onBlur, opened]);
|
|
198
|
+
return /*#__PURE__*/_react2["default"].createElement(_react2["default"].Fragment, null, /*#__PURE__*/_react2["default"].createElement(SelectContainer, _extends({
|
|
185
199
|
opened: opened,
|
|
186
200
|
unbordered: unbordered,
|
|
187
201
|
disabled: disabled,
|
|
@@ -201,6 +215,7 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
201
215
|
onMouseDown: function onMouseDown(e) {
|
|
202
216
|
return e.preventDefault();
|
|
203
217
|
},
|
|
218
|
+
onBlur: blurHandler,
|
|
204
219
|
role: "combobox",
|
|
205
220
|
"aria-disabled": disabled,
|
|
206
221
|
"aria-busy": loading,
|
|
@@ -208,7 +223,7 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
208
223
|
"aria-owns": listBoxId
|
|
209
224
|
}, rest, {
|
|
210
225
|
ref: mergedContainerRef
|
|
211
|
-
}), /*#__PURE__*/
|
|
226
|
+
}), /*#__PURE__*/_react2["default"].createElement(_SelectToggle["default"], {
|
|
212
227
|
selectedItems: selectedItems,
|
|
213
228
|
onDelete: function onDelete(v) {
|
|
214
229
|
return setForwardedValue((forwardedValue || []).filter(function (item) {
|
|
@@ -232,7 +247,7 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
232
247
|
clearVisible: clearVisible,
|
|
233
248
|
loading: loading,
|
|
234
249
|
locale: locale
|
|
235
|
-
})), /*#__PURE__*/
|
|
250
|
+
})), /*#__PURE__*/_react2["default"].createElement(SelectMenu, {
|
|
236
251
|
trigger: containerRef,
|
|
237
252
|
visible: opened,
|
|
238
253
|
onClose: function onClose() {
|
|
@@ -243,9 +258,9 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
243
258
|
closeOnSelect: maxSelectedItems === 1,
|
|
244
259
|
modalTitle: placeholder,
|
|
245
260
|
placement: placement
|
|
246
|
-
}, searchVisible && /*#__PURE__*/
|
|
261
|
+
}, searchVisible && /*#__PURE__*/_react2["default"].createElement(InputSearchContainer, {
|
|
247
262
|
ref: inputSearchContainerRef
|
|
248
|
-
}, /*#__PURE__*/
|
|
263
|
+
}, /*#__PURE__*/_react2["default"].createElement(_InputSearch["default"], searchProps)), options.length > 0 ? /*#__PURE__*/_react2["default"].createElement(_SelectList["default"], {
|
|
249
264
|
searchVisible: searchVisible,
|
|
250
265
|
options: options,
|
|
251
266
|
visibleCount: visibleCount,
|
|
@@ -258,7 +273,7 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
258
273
|
onChange: setForwardedValue,
|
|
259
274
|
id: listBoxId,
|
|
260
275
|
size: size
|
|
261
|
-
}) : /*#__PURE__*/
|
|
276
|
+
}) : /*#__PURE__*/_react2["default"].createElement(NotFound, null, notFoundText)));
|
|
262
277
|
});
|
|
263
278
|
Select.displayName = 'Select';
|
|
264
279
|
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","onBlur","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","blurHandler","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 onBlur = () => {},\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 const blurHandler = useCallback(\n (e) => {\n if (!opened) onBlur(e);\n },\n [onBlur, opened]\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 onBlur={blurHandler}\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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"}
|
|
File without changes
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"emotion.d.js","names":[],"sources":["../../../src/@types/emotion.d.ts"],"sourcesContent":["import '@emotion/react';\nimport { Theme as BaseTheme } from '@os-design/theming';\n\ndeclare module '@emotion/react' {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n export interface Theme extends BaseTheme {}\n}\n"],"mappings":"AAAA,OAAO,gBAAgB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["styled","defaultLocale","getAccessibilityDateLabel","useFormattedValue","Down","Up","useIsMinWidth","ThemeOverrider","useForwardedRef","useForwardedState","useKeyPress","React","forwardRef","useCallback","useEffect","useMemo","useRef","useState","Button","Modal","Popover","SelectContainer","ClearIcon","Content","IconContainer","LeftAddon","Placeholder","RightAddon","Title","TimePicker","DatePickerCalendar","StyledPopover","p","theme","datePickerPadding","TimeContainer","div","Dash","baseHeight","StyledTimePicker","timePickerStyle","style","width","createDate","date","time","d","Date","setFullYear","getFullYear","setMonth","getMonth","setDate","getDate","setHours","setMinutes","getHours","getMinutes","DatePicker","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","autoFocus","autoOpen","format","firstDayOfWeek","locale","showTime","timeNotation","range","value","defaultValue","onChange","onClose","size","rest","ref","containerRef","mergedContainerRef","opened","setOpened","forwardedValue","setForwardedValue","current","focus","onCloseRef","formattedValue","closeHandler","window","undefined","isMinXs","valueIsSpecified","rightHasPaddingValue","rightValue","e","stopPropagation","includes","key","preventDefault","clearLabel","firstTimePickerRef","secondTimePickerRef","rangeStartedRef","changeHandler","prev","nextValue","Array","isArray","getTime","sort","a","b","calendarComponent","v","tabOnInputComplete","target","selectionStart","from","nextTo","closeOnInputComplete","timeComponent","t","buttonPaddingHorizontal","selectToggleListItemHeight","sizes","small","displayName"],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n DatePickerLocale,\n defaultLocale,\n getAccessibilityDateLabel,\n useFormattedValue,\n} from '@os-design/date-picker-utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport { WithSize } from '@os-design/styles';\nimport { ThemeOverrider } from '@os-design/theming';\nimport {\n useForwardedRef,\n useForwardedState,\n useKeyPress,\n} from '@os-design/utils';\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Button from '../Button';\nimport Modal from '../Modal';\nimport Popover from '../Popover';\nimport { SelectContainer } from '../Select';\nimport {\n ClearIcon,\n Content,\n IconContainer,\n LeftAddon,\n Placeholder,\n RightAddon,\n Title,\n} from '../Select/SelectToggle';\nimport TimePicker from '../TimePicker';\nimport DatePickerCalendar from './DatePickerCalendar';\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\ninterface BaseDatePickerProps<T> extends JsxDivProps, WithSize {\n /**\n * The component located on the left side.\n * @default undefined\n */\n left?: React.ReactNode;\n /**\n * Adds padding to the left component.\n * It can be useful when passing an icon or text in the left component.\n * @default false\n */\n leftHasPadding?: boolean;\n /**\n * The component located on the right side.\n * @default undefined\n */\n right?: React.ReactNode;\n /**\n * Adds padding to the right component.\n * It can be useful when passing an icon or text in the right component.\n * @default false\n */\n rightHasPadding?: boolean;\n /**\n * The placeholder of the date picker.\n * @default undefined\n */\n placeholder?: string;\n /**\n * Whether the date picker is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Whether the component have a focus.\n * @default false\n */\n autoFocus?: boolean;\n /**\n * Whether the component opens the popup calendar.\n * @default false\n */\n autoOpen?: boolean;\n /**\n * The format of the date.\n * @default undefined\n */\n format?: (value: T) => string;\n /**\n * The first day of the week.\n * @default sunday\n */\n firstDayOfWeek?: 'sunday' | 'monday';\n /**\n * The locale of the date picker.\n * @default undefined\n */\n locale?: DatePickerLocale;\n /**\n * Whether the time is shown.\n * @default false\n */\n showTime?: boolean;\n /**\n * The time notation.\n * @default 12-hour\n */\n timeNotation?: '12-hour' | '24-hour';\n /**\n * Selected date.\n * @default undefined\n */\n value?: T | null;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: T | null;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: T | null) => void;\n /**\n * The event handler that is called whenever a popup calendar closes.\n * @default undefined\n */\n onClose?: () => void;\n}\ninterface DateNotRangePickerProps extends BaseDatePickerProps<Date> {\n /**\n * Whether the value is a range.\n * @default false\n */\n range?: false;\n}\ninterface DateRangePickerProps extends BaseDatePickerProps<[Date, Date]> {\n /**\n * Whether the value is a range.\n * @default false\n */\n range: true;\n}\nexport type DatePickerProps = DateNotRangePickerProps | DateRangePickerProps;\n\nconst StyledPopover = styled(Popover)`\n padding: ${(p) => p.theme.datePickerPadding}em;\n`;\n\nconst TimeContainer = styled.div`\n display: flex;\n justify-content: center;\n margin-top: 0.5em;\n`;\n\nconst Dash = styled.div`\n margin: 0 0.5em;\n line-height: ${(p) => p.theme.baseHeight}em;\n`;\n\nconst StyledTimePicker = styled(TimePicker)`\n width: 2.5em;\n text-align: center;\n`;\n\nconst timePickerStyle = { style: { width: 'auto' } };\n\nconst createDate = (date: Date, time?: Date | null) => {\n const d = new Date(0);\n d.setFullYear(date.getFullYear());\n d.setMonth(date.getMonth());\n d.setDate(date.getDate());\n d.setHours(0);\n d.setMinutes(0);\n if (time) {\n d.setHours(time.getHours());\n d.setMinutes(time.getMinutes());\n }\n return d;\n};\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n (\n {\n left,\n leftHasPadding = false,\n right,\n rightHasPadding = false,\n placeholder,\n disabled = false,\n autoFocus = false,\n autoOpen = false,\n format,\n firstDayOfWeek = 'sunday',\n locale = defaultLocale,\n showTime = false,\n timeNotation = '12-hour',\n range = false,\n value,\n defaultValue,\n onChange,\n onClose = () => {},\n size,\n ...rest\n },\n ref\n ) => {\n const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n const [opened, setOpened] = useState(autoOpen);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const [forwardedValue, setForwardedValue] = useForwardedState<any>({\n value,\n defaultValue,\n onChange,\n });\n\n useEffect(() => {\n if (autoFocus) containerRef.current?.focus();\n }, [autoFocus, containerRef]);\n\n const onCloseRef = useRef(onClose);\n useEffect(() => {\n onCloseRef.current = onClose;\n }, [onClose]);\n\n useEffect(() => {\n if (!opened) onCloseRef.current();\n }, [opened]);\n\n const formattedValue = useFormattedValue({\n forwardedValue,\n format,\n showTime,\n timeNotation,\n });\n\n const closeHandler = useCallback(() => {\n setOpened(false);\n }, []);\n\n useKeyPress(\n (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n 'Escape',\n closeHandler\n );\n const isMinXs = useIsMinWidth('xs');\n\n const valueIsSpecified = useMemo(\n () => formattedValue !== undefined && formattedValue !== null,\n [formattedValue]\n );\n\n const rightHasPaddingValue = useMemo(() => {\n if (valueIsSpecified) return false;\n return right ? rightHasPadding : true;\n }, [right, rightHasPadding, valueIsSpecified]);\n\n const rightValue = useMemo(() => {\n if (valueIsSpecified) {\n return (\n <div aria-hidden>\n <Button\n type='ghost'\n wide='never'\n size='small'\n disabled={disabled}\n onClick={(e) => {\n setForwardedValue(null);\n e.stopPropagation();\n }}\n onKeyDown={(e) => {\n if (disabled) return;\n if (['Enter', ' '].includes(e.key)) {\n setForwardedValue(null);\n if (!containerRef.current) return;\n containerRef.current.focus();\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n aria-label={locale.clearLabel}\n >\n <ClearIcon />\n </Button>\n </div>\n );\n }\n return (\n right || <IconContainer>{opened ? <Up /> : <Down />}</IconContainer>\n );\n }, [\n containerRef,\n disabled,\n locale.clearLabel,\n opened,\n right,\n setForwardedValue,\n valueIsSpecified,\n ]);\n\n const firstTimePickerRef = useRef<HTMLInputElement>(null);\n const secondTimePickerRef = useRef<HTMLInputElement>(null);\n const rangeStartedRef = useRef(false);\n\n useEffect(() => {\n rangeStartedRef.current = false;\n }, [opened]);\n\n const changeHandler = useCallback(\n (date: Date) => {\n setForwardedValue((prev) => {\n if (!range) return createDate(date, prev);\n\n const d = createDate(date);\n const nextValue =\n prev && Array.isArray(prev) && rangeStartedRef.current\n ? [new Date(prev[0].getTime()), createDate(date, prev[1])]\n : [d, d];\n\n rangeStartedRef.current = !rangeStartedRef.current;\n return nextValue.sort(\n (a: Date, b: Date) => a.getTime() - b.getTime()\n );\n });\n },\n [range, setForwardedValue]\n );\n\n const calendarComponent = useMemo(\n () => (\n <DatePickerCalendar\n firstDayOfWeek={firstDayOfWeek}\n locale={locale}\n value={forwardedValue}\n onSelect={(v) => {\n changeHandler(v);\n firstTimePickerRef.current?.focus();\n if (!showTime && (!range || !rangeStartedRef.current)) {\n closeHandler();\n }\n }}\n />\n ),\n [\n changeHandler,\n closeHandler,\n firstDayOfWeek,\n forwardedValue,\n locale,\n range,\n showTime,\n ]\n );\n\n const tabOnInputComplete = useCallback(\n (e) => {\n if (e.target.selectionStart < 5) return;\n secondTimePickerRef.current?.focus();\n setForwardedValue(([from]) => {\n const nextTo = new Date(from.getTime());\n nextTo.setHours(nextTo.getHours() + 1);\n return [from, nextTo];\n });\n },\n [setForwardedValue]\n );\n\n const closeOnInputComplete = useCallback(\n (e) => {\n if (e.target.selectionStart < 5) return;\n closeHandler();\n },\n [closeHandler]\n );\n\n const timeComponent = useMemo(\n () =>\n showTime && forwardedValue ? (\n <TimeContainer>\n {Array.isArray(forwardedValue) ? (\n <>\n <StyledTimePicker\n ref={firstTimePickerRef}\n autoFocus\n disabled={disabled}\n notation={timeNotation}\n containerProps={timePickerStyle}\n value={forwardedValue[0]}\n onChange={(v) => setForwardedValue([v, forwardedValue[1]])}\n onKeyDown={(e) => {\n if (disabled) return;\n if (e.key === 'Enter') {\n setOpened(!opened);\n }\n }}\n onKeyUp={tabOnInputComplete}\n />\n <Dash>–</Dash>\n <StyledTimePicker\n ref={secondTimePickerRef}\n disabled={disabled}\n notation={timeNotation}\n containerProps={timePickerStyle}\n value={forwardedValue[1]}\n onChange={(v) => setForwardedValue([forwardedValue[0], v])}\n onKeyDown={(e) => {\n if (disabled) return;\n if (e.key === 'Enter') {\n setOpened(!opened);\n }\n }}\n onKeyUp={closeOnInputComplete}\n />\n </>\n ) : (\n <StyledTimePicker\n ref={firstTimePickerRef}\n autoFocus\n disabled={disabled}\n notation={timeNotation}\n containerProps={timePickerStyle}\n value={forwardedValue}\n onChange={setForwardedValue}\n onKeyDown={(e) => {\n if (disabled) return;\n if (e.key === 'Enter') {\n setOpened(!opened);\n }\n }}\n onKeyUp={closeOnInputComplete}\n />\n )}\n </TimeContainer>\n ) : null,\n [\n closeOnInputComplete,\n disabled,\n forwardedValue,\n opened,\n setForwardedValue,\n showTime,\n tabOnInputComplete,\n timeNotation,\n ]\n );\n\n return (\n <>\n <SelectContainer\n opened={opened}\n disabled={disabled}\n size={size}\n tabIndex={!disabled ? 0 : -1}\n onClick={() => {\n if (disabled) return;\n setOpened(!opened);\n }}\n onKeyDown={(e) => {\n if (disabled) return;\n if (['Enter', ' '].includes(e.key)) {\n setOpened(!opened);\n e.preventDefault();\n }\n }}\n onMouseDown={(e) => e.preventDefault()}\n role='combobox'\n aria-label={\n forwardedValue\n ? getAccessibilityDateLabel(forwardedValue, locale)\n : undefined\n }\n aria-disabled={disabled}\n {...rest}\n ref={mergedContainerRef}\n >\n {left && (\n <ThemeOverrider\n overrides={(t) => ({\n buttonPaddingHorizontal: 0.8,\n baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n })}\n >\n <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n </ThemeOverrider>\n )}\n\n <Content hasLeft={!!left} hasRight={!!right}>\n {valueIsSpecified ? (\n <Title disabled={disabled} aria-hidden>\n {formattedValue}\n </Title>\n ) : (\n <Placeholder>{placeholder}</Placeholder>\n )}\n </Content>\n\n {rightValue && (\n <ThemeOverrider\n overrides={(t) => ({\n buttonPaddingHorizontal: 0.8,\n baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n })}\n >\n <RightAddon hasPadding={rightHasPaddingValue}>\n {rightValue}\n </RightAddon>\n </ThemeOverrider>\n )}\n </SelectContainer>\n\n {isMinXs ? (\n <StyledPopover\n trigger={containerRef}\n placement='bottom-start'\n visible={opened}\n onClose={closeHandler}\n size={size}\n >\n {calendarComponent}\n {timeComponent}\n </StyledPopover>\n ) : (\n <Modal\n title={placeholder}\n header={null}\n footer={null}\n visible={opened}\n onClose={closeHandler}\n size={size}\n >\n {calendarComponent}\n {timeComponent}\n </Modal>\n )}\n </>\n );\n }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","names":["styled","defaultLocale","getAccessibilityDateLabel","useFormattedValue","Down","Up","useIsMinWidth","ThemeOverrider","useForwardedRef","useForwardedState","useKeyPress","React","forwardRef","useCallback","useEffect","useMemo","useRef","useState","Button","Modal","Popover","SelectContainer","ClearIcon","Content","IconContainer","LeftAddon","Placeholder","RightAddon","Title","TimePicker","DatePickerCalendar","StyledPopover","p","theme","datePickerPadding","TimeContainer","div","Dash","baseHeight","StyledTimePicker","timePickerStyle","style","width","createDate","date","time","d","Date","setFullYear","getFullYear","setMonth","getMonth","setDate","getDate","setHours","setMinutes","getHours","getMinutes","DatePicker","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","autoFocus","autoOpen","format","firstDayOfWeek","locale","showTime","timeNotation","range","value","defaultValue","onChange","onClose","size","rest","ref","containerRef","mergedContainerRef","opened","setOpened","forwardedValue","setForwardedValue","current","focus","onCloseRef","formattedValue","closeHandler","window","undefined","isMinXs","valueIsSpecified","rightHasPaddingValue","rightValue","e","stopPropagation","includes","key","preventDefault","clearLabel","firstTimePickerRef","secondTimePickerRef","rangeStartedRef","changeHandler","prev","nextValue","Array","isArray","getTime","sort","a","b","calendarComponent","v","tabOnInputComplete","target","selectionStart","from","nextTo","closeOnInputComplete","timeComponent","t","buttonPaddingHorizontal","selectToggleListItemHeight","sizes","small","displayName"],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n DatePickerLocale,\n defaultLocale,\n getAccessibilityDateLabel,\n useFormattedValue,\n} from '@os-design/date-picker-utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport { WithSize } from '@os-design/styles';\nimport { ThemeOverrider } from '@os-design/theming';\nimport {\n useForwardedRef,\n useForwardedState,\n useKeyPress,\n} from '@os-design/utils';\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Button from '../Button';\nimport Modal from '../Modal';\nimport Popover from '../Popover';\nimport { SelectContainer } from '../Select';\nimport {\n ClearIcon,\n Content,\n IconContainer,\n LeftAddon,\n Placeholder,\n RightAddon,\n Title,\n} from '../Select/SelectToggle';\nimport TimePicker from '../TimePicker';\nimport DatePickerCalendar from './DatePickerCalendar';\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\ninterface BaseDatePickerProps<T> extends JsxDivProps, WithSize {\n /**\n * The component located on the left side.\n * @default undefined\n */\n left?: React.ReactNode;\n /**\n * Adds padding to the left component.\n * It can be useful when passing an icon or text in the left component.\n * @default false\n */\n leftHasPadding?: boolean;\n /**\n * The component located on the right side.\n * @default undefined\n */\n right?: React.ReactNode;\n /**\n * Adds padding to the right component.\n * It can be useful when passing an icon or text in the right component.\n * @default false\n */\n rightHasPadding?: boolean;\n /**\n * The placeholder of the date picker.\n * @default undefined\n */\n placeholder?: string;\n /**\n * Whether the date picker is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Whether the component have a focus.\n * @default false\n */\n autoFocus?: boolean;\n /**\n * Whether the component opens the popup calendar.\n * @default false\n */\n autoOpen?: boolean;\n /**\n * The format of the date.\n * @default undefined\n */\n format?: (value: T) => string;\n /**\n * The first day of the week.\n * @default sunday\n */\n firstDayOfWeek?: 'sunday' | 'monday';\n /**\n * The locale of the date picker.\n * @default undefined\n */\n locale?: DatePickerLocale;\n /**\n * Whether the time is shown.\n * @default false\n */\n showTime?: boolean;\n /**\n * The time notation.\n * @default 12-hour\n */\n timeNotation?: '12-hour' | '24-hour';\n /**\n * Selected date.\n * @default undefined\n */\n value?: T | null;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: T | null;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: T | null) => void;\n /**\n * The event handler that is called whenever a popup closes.\n * @default undefined\n */\n onClose?: () => void;\n}\ninterface DateNotRangePickerProps extends BaseDatePickerProps<Date> {\n /**\n * Whether the value is a range.\n * @default false\n */\n range?: false;\n}\ninterface DateRangePickerProps extends BaseDatePickerProps<[Date, Date]> {\n /**\n * Whether the value is a range.\n * @default false\n */\n range: true;\n}\nexport type DatePickerProps = DateNotRangePickerProps | DateRangePickerProps;\n\nconst StyledPopover = styled(Popover)`\n padding: ${(p) => p.theme.datePickerPadding}em;\n`;\n\nconst TimeContainer = styled.div`\n display: flex;\n justify-content: center;\n margin-top: 0.5em;\n`;\n\nconst Dash = styled.div`\n margin: 0 0.5em;\n line-height: ${(p) => p.theme.baseHeight}em;\n`;\n\nconst StyledTimePicker = styled(TimePicker)`\n width: 2.5em;\n text-align: center;\n`;\n\nconst timePickerStyle = { style: { width: 'auto' } };\n\nconst createDate = (date: Date, time?: Date | null) => {\n const d = new Date(0);\n d.setFullYear(date.getFullYear());\n d.setMonth(date.getMonth());\n d.setDate(date.getDate());\n d.setHours(0);\n d.setMinutes(0);\n if (time) {\n d.setHours(time.getHours());\n d.setMinutes(time.getMinutes());\n }\n return d;\n};\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n (\n {\n left,\n leftHasPadding = false,\n right,\n rightHasPadding = false,\n placeholder,\n disabled = false,\n autoFocus = false,\n autoOpen = false,\n format,\n firstDayOfWeek = 'sunday',\n locale = defaultLocale,\n showTime = false,\n timeNotation = '12-hour',\n range = false,\n value,\n defaultValue,\n onChange,\n onClose = () => {},\n size,\n ...rest\n },\n ref\n ) => {\n const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n const [opened, setOpened] = useState(autoOpen);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const [forwardedValue, setForwardedValue] = useForwardedState<any>({\n value,\n defaultValue,\n onChange,\n });\n\n useEffect(() => {\n if (autoFocus) containerRef.current?.focus();\n }, [autoFocus, containerRef]);\n\n const onCloseRef = useRef(onClose);\n useEffect(() => {\n onCloseRef.current = onClose;\n }, [onClose]);\n\n useEffect(() => {\n if (!opened) onCloseRef.current();\n }, [opened]);\n\n const formattedValue = useFormattedValue({\n forwardedValue,\n format,\n showTime,\n timeNotation,\n });\n\n const closeHandler = useCallback(() => {\n setOpened(false);\n }, []);\n\n useKeyPress(\n (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n 'Escape',\n closeHandler\n );\n const isMinXs = useIsMinWidth('xs');\n\n const valueIsSpecified = useMemo(\n () => formattedValue !== undefined && formattedValue !== null,\n [formattedValue]\n );\n\n const rightHasPaddingValue = useMemo(() => {\n if (valueIsSpecified) return false;\n return right ? rightHasPadding : true;\n }, [right, rightHasPadding, valueIsSpecified]);\n\n const rightValue = useMemo(() => {\n if (valueIsSpecified) {\n return (\n <div aria-hidden>\n <Button\n type='ghost'\n wide='never'\n size='small'\n disabled={disabled}\n onClick={(e) => {\n setForwardedValue(null);\n e.stopPropagation();\n }}\n onKeyDown={(e) => {\n if (disabled) return;\n if (['Enter', ' '].includes(e.key)) {\n setForwardedValue(null);\n if (!containerRef.current) return;\n containerRef.current.focus();\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n aria-label={locale.clearLabel}\n >\n <ClearIcon />\n </Button>\n </div>\n );\n }\n return (\n right || <IconContainer>{opened ? <Up /> : <Down />}</IconContainer>\n );\n }, [\n containerRef,\n disabled,\n locale.clearLabel,\n opened,\n right,\n setForwardedValue,\n valueIsSpecified,\n ]);\n\n const firstTimePickerRef = useRef<HTMLInputElement>(null);\n const secondTimePickerRef = useRef<HTMLInputElement>(null);\n const rangeStartedRef = useRef(false);\n\n useEffect(() => {\n rangeStartedRef.current = false;\n }, [opened]);\n\n const changeHandler = useCallback(\n (date: Date) => {\n setForwardedValue((prev) => {\n if (!range) return createDate(date, prev);\n\n const d = createDate(date);\n const nextValue =\n prev && Array.isArray(prev) && rangeStartedRef.current\n ? [new Date(prev[0].getTime()), createDate(date, prev[1])]\n : [d, d];\n\n rangeStartedRef.current = !rangeStartedRef.current;\n return nextValue.sort(\n (a: Date, b: Date) => a.getTime() - b.getTime()\n );\n });\n },\n [range, setForwardedValue]\n );\n\n const calendarComponent = useMemo(\n () => (\n <DatePickerCalendar\n firstDayOfWeek={firstDayOfWeek}\n locale={locale}\n value={forwardedValue}\n onSelect={(v) => {\n changeHandler(v);\n firstTimePickerRef.current?.focus();\n if (!showTime && (!range || !rangeStartedRef.current)) {\n closeHandler();\n }\n }}\n />\n ),\n [\n changeHandler,\n closeHandler,\n firstDayOfWeek,\n forwardedValue,\n locale,\n range,\n showTime,\n ]\n );\n\n const tabOnInputComplete = useCallback(\n (e) => {\n if (e.target.selectionStart < 5) return;\n secondTimePickerRef.current?.focus();\n setForwardedValue(([from]) => {\n const nextTo = new Date(from.getTime());\n nextTo.setHours(nextTo.getHours() + 1);\n return [from, nextTo];\n });\n },\n [setForwardedValue]\n );\n\n const closeOnInputComplete = useCallback(\n (e) => {\n if (e.target.selectionStart < 5) return;\n closeHandler();\n },\n [closeHandler]\n );\n\n const timeComponent = useMemo(\n () =>\n showTime && forwardedValue ? (\n <TimeContainer>\n {Array.isArray(forwardedValue) ? (\n <>\n <StyledTimePicker\n ref={firstTimePickerRef}\n autoFocus\n disabled={disabled}\n notation={timeNotation}\n containerProps={timePickerStyle}\n value={forwardedValue[0]}\n onChange={(v) => setForwardedValue([v, forwardedValue[1]])}\n onKeyDown={(e) => {\n if (disabled) return;\n if (e.key === 'Enter') {\n setOpened(!opened);\n }\n }}\n onKeyUp={tabOnInputComplete}\n />\n <Dash>–</Dash>\n <StyledTimePicker\n ref={secondTimePickerRef}\n disabled={disabled}\n notation={timeNotation}\n containerProps={timePickerStyle}\n value={forwardedValue[1]}\n onChange={(v) => setForwardedValue([forwardedValue[0], v])}\n onKeyDown={(e) => {\n if (disabled) return;\n if (e.key === 'Enter') {\n setOpened(!opened);\n }\n }}\n onKeyUp={closeOnInputComplete}\n />\n </>\n ) : (\n <StyledTimePicker\n ref={firstTimePickerRef}\n autoFocus\n disabled={disabled}\n notation={timeNotation}\n containerProps={timePickerStyle}\n value={forwardedValue}\n onChange={setForwardedValue}\n onKeyDown={(e) => {\n if (disabled) return;\n if (e.key === 'Enter') {\n setOpened(!opened);\n }\n }}\n onKeyUp={closeOnInputComplete}\n />\n )}\n </TimeContainer>\n ) : null,\n [\n closeOnInputComplete,\n disabled,\n forwardedValue,\n opened,\n setForwardedValue,\n showTime,\n tabOnInputComplete,\n timeNotation,\n ]\n );\n\n return (\n <>\n <SelectContainer\n opened={opened}\n disabled={disabled}\n size={size}\n tabIndex={!disabled ? 0 : -1}\n onClick={() => {\n if (disabled) return;\n setOpened(!opened);\n }}\n onKeyDown={(e) => {\n if (disabled) return;\n if (['Enter', ' '].includes(e.key)) {\n setOpened(!opened);\n e.preventDefault();\n }\n }}\n onMouseDown={(e) => e.preventDefault()}\n role='combobox'\n aria-label={\n forwardedValue\n ? getAccessibilityDateLabel(forwardedValue, locale)\n : undefined\n }\n aria-disabled={disabled}\n {...rest}\n ref={mergedContainerRef}\n >\n {left && (\n <ThemeOverrider\n overrides={(t) => ({\n buttonPaddingHorizontal: 0.8,\n baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n })}\n >\n <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n </ThemeOverrider>\n )}\n\n <Content hasLeft={!!left} hasRight={!!right}>\n {valueIsSpecified ? (\n <Title disabled={disabled} aria-hidden>\n {formattedValue}\n </Title>\n ) : (\n <Placeholder>{placeholder}</Placeholder>\n )}\n </Content>\n\n {rightValue && (\n <ThemeOverrider\n overrides={(t) => ({\n buttonPaddingHorizontal: 0.8,\n baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n })}\n >\n <RightAddon hasPadding={rightHasPaddingValue}>\n {rightValue}\n </RightAddon>\n </ThemeOverrider>\n )}\n </SelectContainer>\n\n {isMinXs ? (\n <StyledPopover\n trigger={containerRef}\n placement='bottom-start'\n visible={opened}\n onClose={closeHandler}\n size={size}\n >\n {calendarComponent}\n {timeComponent}\n </StyledPopover>\n ) : (\n <Modal\n title={placeholder}\n header={null}\n footer={null}\n visible={opened}\n onClose={closeHandler}\n size={size}\n >\n {calendarComponent}\n {timeComponent}\n </Modal>\n )}\n </>\n );\n }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":"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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,8 @@ const Select = /*#__PURE__*/forwardRef(({
|
|
|
100
100
|
defaultValue,
|
|
101
101
|
onChange,
|
|
102
102
|
onLoadNext = () => {},
|
|
103
|
+
onClose = () => {},
|
|
104
|
+
onBlur = () => {},
|
|
103
105
|
size,
|
|
104
106
|
placement,
|
|
105
107
|
...rest
|
|
@@ -117,6 +119,13 @@ const Select = /*#__PURE__*/forwardRef(({
|
|
|
117
119
|
if (!autoFocus) return;
|
|
118
120
|
containerRef.current?.focus();
|
|
119
121
|
}, [autoFocus, containerRef]);
|
|
122
|
+
const onCloseRef = useRef(onClose);
|
|
123
|
+
useEffect(() => {
|
|
124
|
+
onCloseRef.current = onClose;
|
|
125
|
+
}, [onClose]);
|
|
126
|
+
useEffect(() => {
|
|
127
|
+
if (!opened) onCloseRef.current();
|
|
128
|
+
}, [opened]);
|
|
120
129
|
|
|
121
130
|
/**
|
|
122
131
|
* Detect the width of the container when the select was opened and update
|
|
@@ -147,6 +156,9 @@ const Select = /*#__PURE__*/forwardRef(({
|
|
|
147
156
|
};
|
|
148
157
|
}), [forwardedValue, options]);
|
|
149
158
|
const listBoxId = useMemo(() => `listbox-${Math.random().toString(36).slice(2, 11)}`, []);
|
|
159
|
+
const blurHandler = useCallback(e => {
|
|
160
|
+
if (!opened) onBlur(e);
|
|
161
|
+
}, [onBlur, opened]);
|
|
150
162
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectContainer, _extends({
|
|
151
163
|
opened: opened,
|
|
152
164
|
unbordered: unbordered,
|
|
@@ -165,6 +177,7 @@ const Select = /*#__PURE__*/forwardRef(({
|
|
|
165
177
|
}
|
|
166
178
|
},
|
|
167
179
|
onMouseDown: e => e.preventDefault(),
|
|
180
|
+
onBlur: blurHandler,
|
|
168
181
|
role: "combobox",
|
|
169
182
|
"aria-disabled": disabled,
|
|
170
183
|
"aria-busy": loading,
|
|
@@ -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","onBlur","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","blurHandler","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 onBlur = () => {},\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 const blurHandler = useCallback(\n (e) => {\n if (!opened) onBlur(e);\n },\n [onBlur, opened]\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 onBlur={blurHandler}\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,oFAwMX,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.169",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -30,15 +30,15 @@
|
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@os-design/date-picker-utils": "^1.0.14",
|
|
33
|
-
"@os-design/icons": "^1.0.
|
|
33
|
+
"@os-design/icons": "^1.0.43",
|
|
34
34
|
"@os-design/input-number-utils": "^1.0.17",
|
|
35
35
|
"@os-design/media": "^1.0.16",
|
|
36
36
|
"@os-design/menu-utils": "^1.0.11",
|
|
37
37
|
"@os-design/portal": "^1.0.7",
|
|
38
|
-
"@os-design/styles": "^1.0.
|
|
39
|
-
"@os-design/theming": "^1.0.
|
|
38
|
+
"@os-design/styles": "^1.0.41",
|
|
39
|
+
"@os-design/theming": "^1.0.39",
|
|
40
40
|
"@os-design/time-picker-utils": "^1.0.5",
|
|
41
|
-
"@os-design/utils": "^1.0.
|
|
41
|
+
"@os-design/utils": "^1.0.57",
|
|
42
42
|
"@os-team/password-score": "^1.0.3",
|
|
43
43
|
"facepaint": "^1.2.1",
|
|
44
44
|
"react-focus-lock": "^2.9.1",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"react": ">=18",
|
|
59
59
|
"react-dom": ">=18"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "94430262c8c667c197c9bcf09cdd9b69301c2a8b"
|
|
62
62
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"emotion.d.js","names":[],"sources":["../../src/emotion.d.ts"],"sourcesContent":["import '@emotion/react';\nimport { Theme as BaseTheme } from '@os-design/theming';\n\ndeclare module '@emotion/react' {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n export interface Theme extends BaseTheme {}\n}\n"],"mappings":";;AAAA"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"emotion.d.js","names":[],"sources":["../../src/emotion.d.ts"],"sourcesContent":["import '@emotion/react';\nimport { Theme as BaseTheme } from '@os-design/theming';\n\ndeclare module '@emotion/react' {\n // eslint-disable-next-line @typescript-eslint/no-empty-interface\n export interface Theme extends BaseTheme {}\n}\n"],"mappings":"AAAA,OAAO,gBAAgB"}
|