@os-design/core 1.0.165 → 1.0.167
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/DatePicker/index.js +13 -5
- package/dist/cjs/DatePicker/index.js.map +1 -1
- package/dist/cjs/Select/index.js +11 -2
- package/dist/cjs/Select/index.js.map +1 -1
- package/dist/esm/DatePicker/index.js +10 -2
- package/dist/esm/DatePicker/index.js.map +1 -1
- package/dist/esm/Select/index.js +8 -2
- package/dist/esm/Select/index.js.map +1 -1
- package/dist/types/DatePicker/index.d.ts +2 -0
- package/dist/types/DatePicker/index.d.ts.map +1 -1
- package/dist/types/Select/index.d.ts +2 -0
- package/dist/types/Select/index.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -19,7 +19,7 @@ var _Select = require("../Select");
|
|
|
19
19
|
var _SelectToggle = require("../Select/SelectToggle");
|
|
20
20
|
var _TimePicker = _interopRequireDefault(require("../TimePicker"));
|
|
21
21
|
var _DatePickerCalendar = _interopRequireDefault(require("./DatePickerCalendar"));
|
|
22
|
-
var _excluded = ["left", "leftHasPadding", "right", "rightHasPadding", "placeholder", "disabled", "autoFocus", "format", "firstDayOfWeek", "locale", "showTime", "timeNotation", "range", "value", "defaultValue", "onChange", "size"];
|
|
22
|
+
var _excluded = ["left", "leftHasPadding", "right", "rightHasPadding", "placeholder", "disabled", "autoFocus", "autoOpen", "format", "firstDayOfWeek", "locale", "showTime", "timeNotation", "range", "value", "defaultValue", "onChange", "onClose", "size"];
|
|
23
23
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
|
|
24
24
|
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
25
|
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; }
|
|
@@ -76,6 +76,8 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
76
76
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
77
77
|
_ref$autoFocus = _ref.autoFocus,
|
|
78
78
|
autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
|
|
79
|
+
_ref$autoOpen = _ref.autoOpen,
|
|
80
|
+
autoOpen = _ref$autoOpen === void 0 ? false : _ref$autoOpen,
|
|
79
81
|
format = _ref.format,
|
|
80
82
|
_ref$firstDayOfWeek = _ref.firstDayOfWeek,
|
|
81
83
|
firstDayOfWeek = _ref$firstDayOfWeek === void 0 ? 'sunday' : _ref$firstDayOfWeek,
|
|
@@ -90,13 +92,15 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
90
92
|
value = _ref.value,
|
|
91
93
|
defaultValue = _ref.defaultValue,
|
|
92
94
|
onChange = _ref.onChange,
|
|
95
|
+
_ref$onClose = _ref.onClose,
|
|
96
|
+
onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
|
|
93
97
|
size = _ref.size,
|
|
94
98
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
95
99
|
var _useForwardedRef = (0, _utils.useForwardedRef)(ref),
|
|
96
100
|
_useForwardedRef2 = _slicedToArray(_useForwardedRef, 2),
|
|
97
101
|
containerRef = _useForwardedRef2[0],
|
|
98
102
|
mergedContainerRef = _useForwardedRef2[1];
|
|
99
|
-
var _useState = (0, _react.useState)(
|
|
103
|
+
var _useState = (0, _react.useState)(autoOpen),
|
|
100
104
|
_useState2 = _slicedToArray(_useState, 2),
|
|
101
105
|
opened = _useState2[0],
|
|
102
106
|
setOpened = _useState2[1];
|
|
@@ -113,6 +117,13 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
113
117
|
var _containerRef$current;
|
|
114
118
|
if (autoFocus) (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.focus();
|
|
115
119
|
}, [autoFocus, containerRef]);
|
|
120
|
+
var onCloseRef = (0, _react.useRef)(onClose);
|
|
121
|
+
(0, _react.useEffect)(function () {
|
|
122
|
+
onCloseRef.current = onClose;
|
|
123
|
+
}, [onClose]);
|
|
124
|
+
(0, _react.useEffect)(function () {
|
|
125
|
+
if (!opened) onCloseRef.current();
|
|
126
|
+
}, [opened]);
|
|
116
127
|
var formattedValue = (0, _datePickerUtils.useFormattedValue)({
|
|
117
128
|
forwardedValue: forwardedValue,
|
|
118
129
|
format: format,
|
|
@@ -259,9 +270,6 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
259
270
|
})) : null;
|
|
260
271
|
}, [closeOnInputComplete, disabled, forwardedValue, opened, setForwardedValue, showTime, tabOnInputComplete, timeNotation]);
|
|
261
272
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Select.SelectContainer, _extends({
|
|
262
|
-
onBlur: function onBlur() {
|
|
263
|
-
return console.log('onBlur');
|
|
264
|
-
},
|
|
265
273
|
opened: opened,
|
|
266
274
|
disabled: disabled,
|
|
267
275
|
size: size,
|
|
@@ -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","format","firstDayOfWeek","locale","defaultLocale","showTime","timeNotation","range","value","defaultValue","onChange","size","rest","useForwardedRef","containerRef","mergedContainerRef","useState","opened","setOpened","useForwardedState","forwardedValue","setForwardedValue","useEffect","current","focus","formattedValue","useFormattedValue","closeHandler","useCallback","useKeyPress","window","undefined","isMinXs","useIsMinWidth","valueIsSpecified","useMemo","rightHasPaddingValue","rightValue","e","stopPropagation","includes","key","preventDefault","clearLabel","firstTimePickerRef","useRef","secondTimePickerRef","rangeStartedRef","changeHandler","prev","nextValue","Array","isArray","getTime","sort","a","b","calendarComponent","v","tabOnInputComplete","target","selectionStart","from","nextTo","closeOnInputComplete","timeComponent","console","log","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 * 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}\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 format,\n firstDayOfWeek = 'sunday',\n locale = defaultLocale,\n showTime = false,\n timeNotation = '12-hour',\n range = false,\n value,\n defaultValue,\n onChange,\n size,\n ...rest\n },\n ref\n ) => {\n const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n const [opened, setOpened] = useState(false);\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 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 onBlur={() => console.log('onBlur')}\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 calendar closes.\n * @default undefined\n */\n onClose?: () => void;\n}\ninterface DateNotRangePickerProps extends BaseDatePickerProps<Date> {\n /**\n * Whether the value is a range.\n * @default false\n */\n range?: false;\n}\ninterface DateRangePickerProps extends BaseDatePickerProps<[Date, Date]> {\n /**\n * Whether the value is a range.\n * @default false\n */\n range: true;\n}\nexport type DatePickerProps = DateNotRangePickerProps | DateRangePickerProps;\n\nconst StyledPopover = styled(Popover)`\n padding: ${(p) => p.theme.datePickerPadding}em;\n`;\n\nconst TimeContainer = styled.div`\n display: flex;\n justify-content: center;\n margin-top: 0.5em;\n`;\n\nconst Dash = styled.div`\n margin: 0 0.5em;\n line-height: ${(p) => p.theme.baseHeight}em;\n`;\n\nconst StyledTimePicker = styled(TimePicker)`\n width: 2.5em;\n text-align: center;\n`;\n\nconst timePickerStyle = { style: { width: 'auto' } };\n\nconst createDate = (date: Date, time?: Date | null) => {\n const d = new Date(0);\n d.setFullYear(date.getFullYear());\n d.setMonth(date.getMonth());\n d.setDate(date.getDate());\n d.setHours(0);\n d.setMinutes(0);\n if (time) {\n d.setHours(time.getHours());\n d.setMinutes(time.getMinutes());\n }\n return d;\n};\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n (\n {\n left,\n leftHasPadding = false,\n right,\n rightHasPadding = false,\n placeholder,\n disabled = false,\n autoFocus = false,\n autoOpen = false,\n format,\n firstDayOfWeek = 'sunday',\n locale = defaultLocale,\n showTime = false,\n timeNotation = '12-hour',\n range = false,\n value,\n defaultValue,\n onChange,\n onClose = () => {},\n size,\n ...rest\n },\n ref\n ) => {\n const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n const [opened, setOpened] = useState(autoOpen);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const [forwardedValue, setForwardedValue] = useForwardedState<any>({\n value,\n defaultValue,\n onChange,\n });\n\n useEffect(() => {\n if (autoFocus) containerRef.current?.focus();\n }, [autoFocus, containerRef]);\n\n const onCloseRef = useRef(onClose);\n useEffect(() => {\n onCloseRef.current = onClose;\n }, [onClose]);\n\n useEffect(() => {\n if (!opened) onCloseRef.current();\n }, [opened]);\n\n const formattedValue = useFormattedValue({\n forwardedValue,\n format,\n showTime,\n timeNotation,\n });\n\n const closeHandler = useCallback(() => {\n setOpened(false);\n }, []);\n\n useKeyPress(\n (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n 'Escape',\n closeHandler\n );\n const isMinXs = useIsMinWidth('xs');\n\n const valueIsSpecified = useMemo(\n () => formattedValue !== undefined && formattedValue !== null,\n [formattedValue]\n );\n\n const rightHasPaddingValue = useMemo(() => {\n if (valueIsSpecified) return false;\n return right ? rightHasPadding : true;\n }, [right, rightHasPadding, valueIsSpecified]);\n\n const rightValue = useMemo(() => {\n if (valueIsSpecified) {\n return (\n <div aria-hidden>\n <Button\n type='ghost'\n wide='never'\n size='small'\n disabled={disabled}\n onClick={(e) => {\n setForwardedValue(null);\n e.stopPropagation();\n }}\n onKeyDown={(e) => {\n if (disabled) return;\n if (['Enter', ' '].includes(e.key)) {\n setForwardedValue(null);\n if (!containerRef.current) return;\n containerRef.current.focus();\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n aria-label={locale.clearLabel}\n >\n <ClearIcon />\n </Button>\n </div>\n );\n }\n return (\n right || <IconContainer>{opened ? <Up /> : <Down />}</IconContainer>\n );\n }, [\n containerRef,\n disabled,\n locale.clearLabel,\n opened,\n right,\n setForwardedValue,\n valueIsSpecified,\n ]);\n\n const firstTimePickerRef = useRef<HTMLInputElement>(null);\n const secondTimePickerRef = useRef<HTMLInputElement>(null);\n const rangeStartedRef = useRef(false);\n\n useEffect(() => {\n rangeStartedRef.current = false;\n }, [opened]);\n\n const changeHandler = useCallback(\n (date: Date) => {\n setForwardedValue((prev) => {\n if (!range) return createDate(date, prev);\n\n const d = createDate(date);\n const nextValue =\n prev && Array.isArray(prev) && rangeStartedRef.current\n ? [new Date(prev[0].getTime()), createDate(date, prev[1])]\n : [d, d];\n\n rangeStartedRef.current = !rangeStartedRef.current;\n return nextValue.sort(\n (a: Date, b: Date) => a.getTime() - b.getTime()\n );\n });\n },\n [range, setForwardedValue]\n );\n\n const calendarComponent = useMemo(\n () => (\n <DatePickerCalendar\n firstDayOfWeek={firstDayOfWeek}\n locale={locale}\n value={forwardedValue}\n onSelect={(v) => {\n changeHandler(v);\n firstTimePickerRef.current?.focus();\n if (!showTime && (!range || !rangeStartedRef.current)) {\n closeHandler();\n }\n }}\n />\n ),\n [\n changeHandler,\n closeHandler,\n firstDayOfWeek,\n forwardedValue,\n locale,\n range,\n showTime,\n ]\n );\n\n const tabOnInputComplete = useCallback(\n (e) => {\n if (e.target.selectionStart < 5) return;\n secondTimePickerRef.current?.focus();\n setForwardedValue(([from]) => {\n const nextTo = new Date(from.getTime());\n nextTo.setHours(nextTo.getHours() + 1);\n return [from, nextTo];\n });\n },\n [setForwardedValue]\n );\n\n const closeOnInputComplete = useCallback(\n (e) => {\n if (e.target.selectionStart < 5) return;\n closeHandler();\n },\n [closeHandler]\n );\n\n const timeComponent = useMemo(\n () =>\n showTime && forwardedValue ? (\n <TimeContainer>\n {Array.isArray(forwardedValue) ? (\n <>\n <StyledTimePicker\n ref={firstTimePickerRef}\n autoFocus\n disabled={disabled}\n notation={timeNotation}\n containerProps={timePickerStyle}\n value={forwardedValue[0]}\n onChange={(v) => setForwardedValue([v, forwardedValue[1]])}\n onKeyDown={(e) => {\n if (disabled) return;\n if (e.key === 'Enter') {\n setOpened(!opened);\n }\n }}\n onKeyUp={tabOnInputComplete}\n />\n <Dash>–</Dash>\n <StyledTimePicker\n ref={secondTimePickerRef}\n disabled={disabled}\n notation={timeNotation}\n containerProps={timePickerStyle}\n value={forwardedValue[1]}\n onChange={(v) => setForwardedValue([forwardedValue[0], v])}\n onKeyDown={(e) => {\n if (disabled) return;\n if (e.key === 'Enter') {\n setOpened(!opened);\n }\n }}\n onKeyUp={closeOnInputComplete}\n />\n </>\n ) : (\n <StyledTimePicker\n ref={firstTimePickerRef}\n autoFocus\n disabled={disabled}\n notation={timeNotation}\n containerProps={timePickerStyle}\n value={forwardedValue}\n onChange={setForwardedValue}\n onKeyDown={(e) => {\n if (disabled) return;\n if (e.key === 'Enter') {\n setOpened(!opened);\n }\n }}\n onKeyUp={closeOnInputComplete}\n />\n )}\n </TimeContainer>\n ) : null,\n [\n closeOnInputComplete,\n disabled,\n forwardedValue,\n opened,\n setForwardedValue,\n showTime,\n tabOnInputComplete,\n timeNotation,\n ]\n );\n\n return (\n <>\n <SelectContainer\n opened={opened}\n disabled={disabled}\n size={size}\n tabIndex={!disabled ? 0 : -1}\n onClick={() => {\n if (disabled) return;\n setOpened(!opened);\n }}\n onKeyDown={(e) => {\n if (disabled) return;\n if (['Enter', ' '].includes(e.key)) {\n setOpened(!opened);\n e.preventDefault();\n }\n }}\n onMouseDown={(e) => e.preventDefault()}\n role='combobox'\n aria-label={\n forwardedValue\n ? getAccessibilityDateLabel(forwardedValue, locale)\n : undefined\n }\n aria-disabled={disabled}\n {...rest}\n ref={mergedContainerRef}\n >\n {left && (\n <ThemeOverrider\n overrides={(t) => ({\n buttonPaddingHorizontal: 0.8,\n baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n })}\n >\n <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n </ThemeOverrider>\n )}\n\n <Content hasLeft={!!left} hasRight={!!right}>\n {valueIsSpecified ? (\n <Title disabled={disabled} aria-hidden>\n {formattedValue}\n </Title>\n ) : (\n <Placeholder>{placeholder}</Placeholder>\n )}\n </Content>\n\n {rightValue && (\n <ThemeOverrider\n overrides={(t) => ({\n buttonPaddingHorizontal: 0.8,\n baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n })}\n >\n <RightAddon hasPadding={rightHasPaddingValue}>\n {rightValue}\n </RightAddon>\n </ThemeOverrider>\n )}\n </SelectContainer>\n\n {isMinXs ? (\n <StyledPopover\n trigger={containerRef}\n placement='bottom-start'\n visible={opened}\n onClose={closeHandler}\n size={size}\n >\n {calendarComponent}\n {timeComponent}\n </StyledPopover>\n ) : (\n <Modal\n title={placeholder}\n header={null}\n footer={null}\n visible={opened}\n onClose={closeHandler}\n size={size}\n >\n {calendarComponent}\n {timeComponent}\n </Modal>\n )}\n </>\n );\n }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":";;;;;;;AAAA;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
|
@@ -18,7 +18,7 @@ var _InputSearch = _interopRequireDefault(require("../InputSearch"));
|
|
|
18
18
|
var _SelectToggle = _interopRequireDefault(require("./SelectToggle"));
|
|
19
19
|
var _SelectList = _interopRequireDefault(require("./SelectList"));
|
|
20
20
|
var _defaultLocale = _interopRequireDefault(require("./utils/defaultLocale"));
|
|
21
|
-
var _excluded = ["options", "left", "leftHasPadding", "right", "rightHasPadding", "placeholder", "searchVisible", "searchProps", "notFoundText", "unbordered", "loading", "disabled", "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", "size", "placement"];
|
|
22
22
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
|
|
23
23
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
24
24
|
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); }
|
|
@@ -93,6 +93,10 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
93
93
|
loading = _ref$loading === void 0 ? false : _ref$loading,
|
|
94
94
|
_ref$disabled = _ref.disabled,
|
|
95
95
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
96
|
+
_ref$autoFocus = _ref.autoFocus,
|
|
97
|
+
autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
|
|
98
|
+
_ref$autoOpen = _ref.autoOpen,
|
|
99
|
+
autoOpen = _ref$autoOpen === void 0 ? false : _ref$autoOpen,
|
|
96
100
|
_ref$clearVisible = _ref.clearVisible,
|
|
97
101
|
clearVisible = _ref$clearVisible === void 0 ? false : _ref$clearVisible,
|
|
98
102
|
_ref$threshold = _ref.threshold,
|
|
@@ -122,7 +126,7 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
122
126
|
width = _useState2[0],
|
|
123
127
|
setWidth = _useState2[1];
|
|
124
128
|
var inputSearchContainerRef = (0, _react.useRef)(null);
|
|
125
|
-
var _useState3 = (0, _react.useState)(
|
|
129
|
+
var _useState3 = (0, _react.useState)(autoOpen),
|
|
126
130
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
127
131
|
opened = _useState4[0],
|
|
128
132
|
setOpened = _useState4[1];
|
|
@@ -134,6 +138,11 @@ var Select = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
134
138
|
_useForwardedState2 = _slicedToArray(_useForwardedState, 2),
|
|
135
139
|
forwardedValue = _useForwardedState2[0],
|
|
136
140
|
setForwardedValue = _useForwardedState2[1];
|
|
141
|
+
(0, _react.useEffect)(function () {
|
|
142
|
+
var _containerRef$current;
|
|
143
|
+
if (!autoFocus) return;
|
|
144
|
+
(_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.focus();
|
|
145
|
+
}, [autoFocus, containerRef]);
|
|
137
146
|
|
|
138
147
|
/**
|
|
139
148
|
* Detect the width of the container when the select was opened and update
|
|
@@ -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","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","resizeHandler","useCallback","window","requestAnimationFrame","current","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","focus","length","displayName"],"sources":["../../../src/Select/index.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useCallback,\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 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 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(false);\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\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","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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"}
|
|
@@ -59,6 +59,7 @@ const DatePicker = /*#__PURE__*/forwardRef(({
|
|
|
59
59
|
placeholder,
|
|
60
60
|
disabled = false,
|
|
61
61
|
autoFocus = false,
|
|
62
|
+
autoOpen = false,
|
|
62
63
|
format,
|
|
63
64
|
firstDayOfWeek = 'sunday',
|
|
64
65
|
locale = defaultLocale,
|
|
@@ -68,11 +69,12 @@ const DatePicker = /*#__PURE__*/forwardRef(({
|
|
|
68
69
|
value,
|
|
69
70
|
defaultValue,
|
|
70
71
|
onChange,
|
|
72
|
+
onClose = () => {},
|
|
71
73
|
size,
|
|
72
74
|
...rest
|
|
73
75
|
}, ref) => {
|
|
74
76
|
const [containerRef, mergedContainerRef] = useForwardedRef(ref);
|
|
75
|
-
const [opened, setOpened] = useState(
|
|
77
|
+
const [opened, setOpened] = useState(autoOpen);
|
|
76
78
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
77
79
|
const [forwardedValue, setForwardedValue] = useForwardedState({
|
|
78
80
|
value,
|
|
@@ -82,6 +84,13 @@ const DatePicker = /*#__PURE__*/forwardRef(({
|
|
|
82
84
|
useEffect(() => {
|
|
83
85
|
if (autoFocus) containerRef.current?.focus();
|
|
84
86
|
}, [autoFocus, containerRef]);
|
|
87
|
+
const onCloseRef = useRef(onClose);
|
|
88
|
+
useEffect(() => {
|
|
89
|
+
onCloseRef.current = onClose;
|
|
90
|
+
}, [onClose]);
|
|
91
|
+
useEffect(() => {
|
|
92
|
+
if (!opened) onCloseRef.current();
|
|
93
|
+
}, [opened]);
|
|
85
94
|
const formattedValue = useFormattedValue({
|
|
86
95
|
forwardedValue,
|
|
87
96
|
format,
|
|
@@ -212,7 +221,6 @@ const DatePicker = /*#__PURE__*/forwardRef(({
|
|
|
212
221
|
onKeyUp: closeOnInputComplete
|
|
213
222
|
})) : null, [closeOnInputComplete, disabled, forwardedValue, opened, setForwardedValue, showTime, tabOnInputComplete, timeNotation]);
|
|
214
223
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SelectContainer, _extends({
|
|
215
|
-
onBlur: () => console.log('onBlur'),
|
|
216
224
|
opened: opened,
|
|
217
225
|
disabled: disabled,
|
|
218
226
|
size: size,
|
|
@@ -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","format","firstDayOfWeek","locale","showTime","timeNotation","range","value","defaultValue","onChange","size","rest","ref","containerRef","mergedContainerRef","opened","setOpened","forwardedValue","setForwardedValue","current","focus","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","console","log","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 * 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}\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 format,\n firstDayOfWeek = 'sunday',\n locale = defaultLocale,\n showTime = false,\n timeNotation = '12-hour',\n range = false,\n value,\n defaultValue,\n onChange,\n size,\n ...rest\n },\n ref\n ) => {\n const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n const [opened, setOpened] = useState(false);\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 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 onBlur={() => console.log('onBlur')}\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 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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"}
|
package/dist/esm/Select/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
import React, { forwardRef, useCallback, useMemo, useRef, useState } from 'react';
|
|
2
|
+
import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
3
3
|
import { transitionStyles } from '@os-design/styles';
|
|
4
4
|
import { omitEmotionProps, useEvent, useForwardedRef, useForwardedState, useResizeObserver, useBrowserLayoutEffect } from '@os-design/utils';
|
|
5
5
|
import styled from '@emotion/styled';
|
|
@@ -88,6 +88,8 @@ const Select = /*#__PURE__*/forwardRef(({
|
|
|
88
88
|
unbordered = false,
|
|
89
89
|
loading = false,
|
|
90
90
|
disabled = false,
|
|
91
|
+
autoFocus = false,
|
|
92
|
+
autoOpen = false,
|
|
91
93
|
clearVisible = false,
|
|
92
94
|
threshold = 10,
|
|
93
95
|
visibleCount = 6,
|
|
@@ -105,12 +107,16 @@ const Select = /*#__PURE__*/forwardRef(({
|
|
|
105
107
|
const [containerRef, mergedContainerRef] = useForwardedRef(ref);
|
|
106
108
|
const [width, setWidth] = useState(0);
|
|
107
109
|
const inputSearchContainerRef = useRef(null);
|
|
108
|
-
const [opened, setOpened] = useState(
|
|
110
|
+
const [opened, setOpened] = useState(autoOpen);
|
|
109
111
|
const [forwardedValue, setForwardedValue] = useForwardedState({
|
|
110
112
|
value,
|
|
111
113
|
defaultValue,
|
|
112
114
|
onChange
|
|
113
115
|
});
|
|
116
|
+
useEffect(() => {
|
|
117
|
+
if (!autoFocus) return;
|
|
118
|
+
containerRef.current?.focus();
|
|
119
|
+
}, [autoFocus, containerRef]);
|
|
114
120
|
|
|
115
121
|
/**
|
|
116
122
|
* Detect the width of the container when the select was opened and update
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","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","clearVisible","threshold","visibleCount","overscanCount","maxSelectedItems","locale","value","defaultValue","onChange","onLoadNext","size","placement","rest","ref","containerRef","mergedContainerRef","setWidth","inputSearchContainerRef","setOpened","forwardedValue","setForwardedValue","resizeHandler","window","requestAnimationFrame","current","nextWidth","getBoundingClientRect","undefined","setAttribute","selectedItems","map","v","option","find","item","title","listBoxId","Math","random","toString","slice","e","includes","key","preventDefault","filter","focus","length","displayName"],"sources":["../../../src/Select/index.tsx"],"sourcesContent":["import React, {\n forwardRef,\n useCallback,\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 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 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(false);\n const [forwardedValue, setForwardedValue] = useForwardedState({\n value,\n defaultValue,\n onChange,\n });\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":["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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"}
|
|
@@ -10,6 +10,7 @@ interface BaseDatePickerProps<T> extends JsxDivProps, WithSize {
|
|
|
10
10
|
placeholder?: string;
|
|
11
11
|
disabled?: boolean;
|
|
12
12
|
autoFocus?: boolean;
|
|
13
|
+
autoOpen?: boolean;
|
|
13
14
|
format?: (value: T) => string;
|
|
14
15
|
firstDayOfWeek?: 'sunday' | 'monday';
|
|
15
16
|
locale?: DatePickerLocale;
|
|
@@ -18,6 +19,7 @@ interface BaseDatePickerProps<T> extends JsxDivProps, WithSize {
|
|
|
18
19
|
value?: T | null;
|
|
19
20
|
defaultValue?: T | null;
|
|
20
21
|
onChange?: (value: T | null) => void;
|
|
22
|
+
onClose?: () => void;
|
|
21
23
|
}
|
|
22
24
|
interface DateNotRangePickerProps extends BaseDatePickerProps<Date> {
|
|
23
25
|
range?: false;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/index.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,gBAAgB,EAIjB,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAO7C,OAAO,KAON,MAAM,OAAO,CAAC;AAiBf,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,UAAU,mBAAmB,CAAC,CAAC,CAAE,SAAQ,WAAW,EAAE,QAAQ;IAK5D,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,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAKpB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC;IAK9B,cAAc,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAKrC,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAK1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAKrC,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IAKjB,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IAKxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/DatePicker/index.tsx"],"names":[],"mappings":"AACA,OAAO,EACL,gBAAgB,EAIjB,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAO7C,OAAO,KAON,MAAM,OAAO,CAAC;AAiBf,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,UAAU,mBAAmB,CAAC,CAAC,CAAE,SAAQ,WAAW,EAAE,QAAQ;IAK5D,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,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAKpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,MAAM,CAAC;IAK9B,cAAc,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAKrC,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAK1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAKrC,KAAK,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IAKjB,YAAY,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC;IAKxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IAKrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AACD,UAAU,uBAAwB,SAAQ,mBAAmB,CAAC,IAAI,CAAC;IAKjE,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AACD,UAAU,oBAAqB,SAAQ,mBAAmB,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAKtE,KAAK,EAAE,IAAI,CAAC;CACb;AACD,oBAAY,eAAe,GAAG,uBAAuB,GAAG,oBAAoB,CAAC;AAyC7E,QAAA,MAAM,UAAU,wFAoWf,CAAC;AAIF,eAAe,UAAU,CAAC"}
|
|
@@ -18,6 +18,8 @@ export interface SelectProps extends JsxDivProps, WithSize, Pick<PopoverProps, '
|
|
|
18
18
|
unbordered?: boolean;
|
|
19
19
|
loading?: boolean;
|
|
20
20
|
disabled?: boolean;
|
|
21
|
+
autoFocus?: boolean;
|
|
22
|
+
autoOpen?: boolean;
|
|
21
23
|
clearVisible?: boolean;
|
|
22
24
|
threshold?: number;
|
|
23
25
|
visibleCount?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/Select/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAON,MAAM,OAAO,CAAC;AACf,OAAO,EAAoB,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAe/D,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,OAAmB,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AACvD,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAC1C,OAAsB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAEpE,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,OAAO,GAAG,cAAc,GAAG,UAAU,GAAG,KAAK,CAC9C,CAAC;AACF,MAAM,WAAW,WACf,SAAQ,WAAW,EACjB,QAAQ,EACR,IAAI,CAAC,YAAY,EAAE,WAAW,CAAC;IAKjC,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;IAKxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMvB,cAAc,CAAC,EAAE,OAAO,CAAC;IAKzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAMxB,eAAe,CAAC,EAAE,OAAO,CAAC;IAK1B,WAAW,CAAC,EAAE,MAAM,CAAC;IAKrB,aAAa,CAAC,EAAE,OAAO,CAAC;IAKxB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAK/B,YAAY,CAAC,EAAE,MAAM,CAAC;IAKtB,UAAU,CAAC,EAAE,OAAO,CAAC;IAKrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAKlB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAKpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,YAAY,CAAC,EAAE,OAAO,CAAC;IAKvB,SAAS,CAAC,EAAE,MAAM,CAAC;IAKnB,YAAY,CAAC,EAAE,MAAM,CAAC;IAKtB,aAAa,CAAC,EAAE,MAAM,CAAC;IAKvB,gBAAgB,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAKlC,MAAM,CAAC,EAAE,YAAY,CAAC;IAKtB,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IAKjB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IAKxB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;IAKrC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;CACzB;AAuCD,UAAU,oBAAoB;IAC5B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,eAAO,MAAM,eAAe;;;;;;;;iCAiB3B,CAAC;AAgCF,QAAA,MAAM,MAAM,oFAqLX,CAAC;AAIF,eAAe,MAAM,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/core",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.167",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"react": ">=18",
|
|
59
59
|
"react-dom": ">=18"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "9dfdc680810b6d537e573e4681cd2fc9c746bc8f"
|
|
62
62
|
}
|