@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.
@@ -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)(false),
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":";;;;;;;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;AAqGtD,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,gBAqBEC,GAAG,EACA;EAAA,IApBDC,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;IACjBC,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;IACRC,IAAI,QAAJA,IAAI;IACDC,IAAI;EAIT,uBAA2C,IAAAC,sBAAe,EAACpB,GAAG,CAAC;IAAA;IAAxDqB,YAAY;IAAEC,kBAAkB;EACvC,gBAA4B,IAAAC,eAAQ,EAAC,KAAK,CAAC;IAAA;IAApCC,MAAM;IAAEC,SAAS;EACxB;EACA,yBAA4C,IAAAC,wBAAiB,EAAM;MACjEX,KAAK,EAALA,KAAK;MACLC,YAAY,EAAZA,YAAY;MACZC,QAAQ,EAARA;IACF,CAAC,CAAC;IAAA;IAJKU,cAAc;IAAEC,iBAAiB;EAMxC,IAAAC,gBAAS,EAAC,YAAM;IAAA;IACd,IAAItB,SAAS,EAAE,yBAAAc,YAAY,CAACS,OAAO,0DAApB,sBAAsBC,KAAK,EAAE;EAC9C,CAAC,EAAE,CAACxB,SAAS,EAAEc,YAAY,CAAC,CAAC;EAE7B,IAAMW,cAAc,GAAG,IAAAC,kCAAiB,EAAC;IACvCN,cAAc,EAAdA,cAAc;IACdnB,MAAM,EAANA,MAAM;IACNI,QAAQ,EAARA,QAAQ;IACRC,YAAY,EAAZA;EACF,CAAC,CAAC;EAEF,IAAMqB,YAAY,GAAG,IAAAC,kBAAW,EAAC,YAAM;IACrCV,SAAS,CAAC,KAAK,CAAC;EAClB,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAW,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,OAAOtC,KAAK,GAAGC,eAAe,GAAG,IAAI;EACvC,CAAC,EAAE,CAACD,KAAK,EAAEC,eAAe,EAAEqC,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,EAAEnC,QAAS;QACnB,OAAO,EAAE,iBAACuC,CAAC,EAAK;UACdjB,iBAAiB,CAAC,IAAI,CAAC;UACvBiB,CAAC,CAACC,eAAe,EAAE;QACrB,CAAE;QACF,SAAS,EAAE,mBAACD,CAAC,EAAK;UAChB,IAAIvC,QAAQ,EAAE;UACd,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAACyC,QAAQ,CAACF,CAAC,CAACG,GAAG,CAAC,EAAE;YAClCpB,iBAAiB,CAAC,IAAI,CAAC;YACvB,IAAI,CAACP,YAAY,CAACS,OAAO,EAAE;YAC3BT,YAAY,CAACS,OAAO,CAACC,KAAK,EAAE;YAC5Bc,CAAC,CAACI,cAAc,EAAE;YAClBJ,CAAC,CAACC,eAAe,EAAE;UACrB;QACF,CAAE;QACF,cAAYpC,MAAM,CAACwC;MAAW,gBAE9B,gCAAC,uBAAS,OAAG,CACN,CACL;IAEV;IACA,OACE/C,KAAK,iBAAI,gCAAC,2BAAa,QAAEqB,MAAM,gBAAG,gCAAC,SAAE,OAAG,gBAAG,gCAAC,WAAI,OAAG,CAAiB;EAExE,CAAC,EAAE,CACDH,YAAY,EACZf,QAAQ,EACRI,MAAM,CAACwC,UAAU,EACjB1B,MAAM,EACNrB,KAAK,EACLyB,iBAAiB,EACjBa,gBAAgB,CACjB,CAAC;EAEF,IAAMU,kBAAkB,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EACzD,IAAMC,mBAAmB,GAAG,IAAAD,aAAM,EAAmB,IAAI,CAAC;EAC1D,IAAME,eAAe,GAAG,IAAAF,aAAM,EAAC,KAAK,CAAC;EAErC,IAAAvB,gBAAS,EAAC,YAAM;IACdyB,eAAe,CAACxB,OAAO,GAAG,KAAK;EACjC,CAAC,EAAE,CAACN,MAAM,CAAC,CAAC;EAEZ,IAAM+B,aAAa,GAAG,IAAApB,kBAAW,EAC/B,UAACnD,IAAU,EAAK;IACd4C,iBAAiB,CAAC,UAAC4B,IAAI,EAAK;MAC1B,IAAI,CAAC1C,KAAK,EAAE,OAAO/B,UAAU,CAACC,IAAI,EAAEwE,IAAI,CAAC;MAEzC,IAAMtE,CAAC,GAAGH,UAAU,CAACC,IAAI,CAAC;MAC1B,IAAMyE,SAAS,GACbD,IAAI,IAAIE,KAAK,CAACC,OAAO,CAACH,IAAI,CAAC,IAAIF,eAAe,CAACxB,OAAO,GAClD,CAAC,IAAI3C,IAAI,CAACqE,IAAI,CAAC,CAAC,CAAC,CAACI,OAAO,EAAE,CAAC,EAAE7E,UAAU,CAACC,IAAI,EAAEwE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,GACxD,CAACtE,CAAC,EAAEA,CAAC,CAAC;MAEZoE,eAAe,CAACxB,OAAO,GAAG,CAACwB,eAAe,CAACxB,OAAO;MAClD,OAAO2B,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,CAAC9C,KAAK,EAAEc,iBAAiB,CAAC,CAC3B;EAED,IAAMoC,iBAAiB,GAAG,IAAAtB,cAAO,EAC/B;IAAA,oBACE,gCAAC,8BAAkB;MACjB,cAAc,EAAEjC,cAAe;MAC/B,MAAM,EAAEC,MAAO;MACf,KAAK,EAAEiB,cAAe;MACtB,QAAQ,EAAE,kBAACsC,CAAC,EAAK;QAAA;QACfV,aAAa,CAACU,CAAC,CAAC;QAChB,yBAAAd,kBAAkB,CAACrB,OAAO,0DAA1B,sBAA4BC,KAAK,EAAE;QACnC,IAAI,CAACnB,QAAQ,KAAK,CAACE,KAAK,IAAI,CAACwC,eAAe,CAACxB,OAAO,CAAC,EAAE;UACrDI,YAAY,EAAE;QAChB;MACF;IAAE,EACF;EAAA,CACH,EACD,CACEqB,aAAa,EACbrB,YAAY,EACZzB,cAAc,EACdkB,cAAc,EACdjB,MAAM,EACNI,KAAK,EACLF,QAAQ,CACT,CACF;EAED,IAAMsD,kBAAkB,GAAG,IAAA/B,kBAAW,EACpC,UAACU,CAAC,EAAK;IAAA;IACL,IAAIA,CAAC,CAACsB,MAAM,CAACC,cAAc,GAAG,CAAC,EAAE;IACjC,yBAAAf,mBAAmB,CAACvB,OAAO,0DAA3B,sBAA6BC,KAAK,EAAE;IACpCH,iBAAiB,CAAC,iBAAY;MAAA;QAAVyC,IAAI;MACtB,IAAMC,MAAM,GAAG,IAAInF,IAAI,CAACkF,IAAI,CAACT,OAAO,EAAE,CAAC;MACvCU,MAAM,CAAC5E,QAAQ,CAAC4E,MAAM,CAAC1E,QAAQ,EAAE,GAAG,CAAC,CAAC;MACtC,OAAO,CAACyE,IAAI,EAAEC,MAAM,CAAC;IACvB,CAAC,CAAC;EACJ,CAAC,EACD,CAAC1C,iBAAiB,CAAC,CACpB;EAED,IAAM2C,oBAAoB,GAAG,IAAApC,kBAAW,EACtC,UAACU,CAAC,EAAK;IACL,IAAIA,CAAC,CAACsB,MAAM,CAACC,cAAc,GAAG,CAAC,EAAE;IACjClC,YAAY,EAAE;EAChB,CAAC,EACD,CAACA,YAAY,CAAC,CACf;EAED,IAAMsC,aAAa,GAAG,IAAA9B,cAAO,EAC3B;IAAA,OACE9B,QAAQ,IAAIe,cAAc,gBACxB,gCAAC,aAAa,QACX+B,KAAK,CAACC,OAAO,CAAChC,cAAc,CAAC,gBAC5B,+EACE,gCAAC,gBAAgB;MACf,GAAG,EAAEwB,kBAAmB;MACxB,SAAS;MACT,QAAQ,EAAE7C,QAAS;MACnB,QAAQ,EAAEO,YAAa;MACvB,cAAc,EAAEjC,eAAgB;MAChC,KAAK,EAAE+C,cAAc,CAAC,CAAC,CAAE;MACzB,QAAQ,EAAE,kBAACsC,CAAC;QAAA,OAAKrC,iBAAiB,CAAC,CAACqC,CAAC,EAAEtC,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC;MAAA,CAAC;MAC3D,SAAS,EAAE,mBAACkB,CAAC,EAAK;QAChB,IAAIvC,QAAQ,EAAE;QACd,IAAIuC,CAAC,CAACG,GAAG,KAAK,OAAO,EAAE;UACrBvB,SAAS,CAAC,CAACD,MAAM,CAAC;QACpB;MACF,CAAE;MACF,OAAO,EAAE0C;IAAmB,EAC5B,eACF,gCAAC,IAAI,iBAAS,eACd,gCAAC,gBAAgB;MACf,GAAG,EAAEb,mBAAoB;MACzB,QAAQ,EAAE/C,QAAS;MACnB,QAAQ,EAAEO,YAAa;MACvB,cAAc,EAAEjC,eAAgB;MAChC,KAAK,EAAE+C,cAAc,CAAC,CAAC,CAAE;MACzB,QAAQ,EAAE,kBAACsC,CAAC;QAAA,OAAKrC,iBAAiB,CAAC,CAACD,cAAc,CAAC,CAAC,CAAC,EAAEsC,CAAC,CAAC,CAAC;MAAA,CAAC;MAC3D,SAAS,EAAE,mBAACpB,CAAC,EAAK;QAChB,IAAIvC,QAAQ,EAAE;QACd,IAAIuC,CAAC,CAACG,GAAG,KAAK,OAAO,EAAE;UACrBvB,SAAS,CAAC,CAACD,MAAM,CAAC;QACpB;MACF,CAAE;MACF,OAAO,EAAE+C;IAAqB,EAC9B,CACD,gBAEH,gCAAC,gBAAgB;MACf,GAAG,EAAEpB,kBAAmB;MACxB,SAAS;MACT,QAAQ,EAAE7C,QAAS;MACnB,QAAQ,EAAEO,YAAa;MACvB,cAAc,EAAEjC,eAAgB;MAChC,KAAK,EAAE+C,cAAe;MACtB,QAAQ,EAAEC,iBAAkB;MAC5B,SAAS,EAAE,mBAACiB,CAAC,EAAK;QAChB,IAAIvC,QAAQ,EAAE;QACd,IAAIuC,CAAC,CAACG,GAAG,KAAK,OAAO,EAAE;UACrBvB,SAAS,CAAC,CAACD,MAAM,CAAC;QACpB;MACF,CAAE;MACF,OAAO,EAAE+C;IAAqB,EAEjC,CACa,GACd,IAAI;EAAA,GACV,CACEA,oBAAoB,EACpBjE,QAAQ,EACRqB,cAAc,EACdH,MAAM,EACNI,iBAAiB,EACjBhB,QAAQ,EACRsD,kBAAkB,EAClBrD,YAAY,CACb,CACF;EAED,oBACE,+EACE,gCAAC,uBAAe;IACd,MAAM,EAAE;MAAA,OAAM4D,OAAO,CAACC,GAAG,CAAC,QAAQ,CAAC;IAAA,CAAC;IACpC,MAAM,EAAElD,MAAO;IACf,QAAQ,EAAElB,QAAS;IACnB,IAAI,EAAEY,IAAK;IACX,QAAQ,EAAE,CAACZ,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAE;IAC7B,OAAO,EAAE,mBAAM;MACb,IAAIA,QAAQ,EAAE;MACdmB,SAAS,CAAC,CAACD,MAAM,CAAC;IACpB,CAAE;IACF,SAAS,EAAE,mBAACqB,CAAC,EAAK;MAChB,IAAIvC,QAAQ,EAAE;MACd,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAACyC,QAAQ,CAACF,CAAC,CAACG,GAAG,CAAC,EAAE;QAClCvB,SAAS,CAAC,CAACD,MAAM,CAAC;QAClBqB,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,cACEtB,cAAc,GACV,IAAAgD,0CAAyB,EAAChD,cAAc,EAAEjB,MAAM,CAAC,GACjD4B,SACL;IACD,iBAAehC;EAAS,GACpBa,IAAI;IACR,GAAG,EAAEG;EAAmB,IAEvBrB,IAAI,iBACH,gCAAC,uBAAc;IACb,SAAS,EAAE,mBAAC2E,CAAC;MAAA,OAAM;QACjBC,uBAAuB,EAAE,GAAG;QAC5BpG,UAAU,EAAEmG,CAAC,CAACE,0BAA0B,GAAGF,CAAC,CAACG,KAAK,CAACC;MACrD,CAAC;IAAA;EAAE,gBAEH,gCAAC,uBAAS;IAAC,UAAU,EAAE9E;EAAe,GAAED,IAAI,CAAa,CAE5D,eAED,gCAAC,qBAAO;IAAC,OAAO,EAAE,CAAC,CAACA,IAAK;IAAC,QAAQ,EAAE,CAAC,CAACE;EAAM,GACzCsC,gBAAgB,gBACf,gCAAC,mBAAK;IAAC,QAAQ,EAAEnC,QAAS;IAAC;EAAW,GACnC0B,cAAc,CACT,gBAER,gCAAC,yBAAW,QAAE3B,WAAW,CAC1B,CACO,EAETuC,UAAU,iBACT,gCAAC,uBAAc;IACb,SAAS,EAAE,mBAACgC,CAAC;MAAA,OAAM;QACjBC,uBAAuB,EAAE,GAAG;QAC5BpG,UAAU,EAAEmG,CAAC,CAACE,0BAA0B,GAAGF,CAAC,CAACG,KAAK,CAACC;MACrD,CAAC;IAAA;EAAE,gBAEH,gCAAC,wBAAU;IAAC,UAAU,EAAErC;EAAqB,GAC1CC,UAAU,CACA,CAEhB,CACe,EAEjBL,OAAO,gBACN,gCAAC,aAAa;IACZ,OAAO,EAAElB,YAAa;IACtB,SAAS,EAAC,cAAc;IACxB,OAAO,EAAEG,MAAO;IAChB,OAAO,EAAEU,YAAa;IACtB,IAAI,EAAEhB;EAAK,GAEV8C,iBAAiB,EACjBQ,aAAa,CACA,gBAEhB,gCAAC,iBAAK;IACJ,KAAK,EAAEnE,WAAY;IACnB,MAAM,EAAE,IAAK;IACb,MAAM,EAAE,IAAK;IACb,OAAO,EAAEmB,MAAO;IAChB,OAAO,EAAEU,YAAa;IACtB,IAAI,EAAEhB;EAAK,GAEV8C,iBAAiB,EACjBQ,aAAa,CAEjB,CACA;AAEP,CAAC,CACF;AAED1E,UAAU,CAACmF,WAAW,GAAG,YAAY;AAAC,eAEvBnF,UAAU;AAAA"}
1
+ {"version":3,"file":"index.js","names":["StyledPopover","styled","Popover","p","theme","datePickerPadding","TimeContainer","div","Dash","baseHeight","StyledTimePicker","TimePicker","timePickerStyle","style","width","createDate","date","time","d","Date","setFullYear","getFullYear","setMonth","getMonth","setDate","getDate","setHours","setMinutes","getHours","getMinutes","DatePicker","forwardRef","ref","left","leftHasPadding","right","rightHasPadding","placeholder","disabled","autoFocus","autoOpen","format","firstDayOfWeek","locale","defaultLocale","showTime","timeNotation","range","value","defaultValue","onChange","onClose","size","rest","useForwardedRef","containerRef","mergedContainerRef","useState","opened","setOpened","useForwardedState","forwardedValue","setForwardedValue","useEffect","current","focus","onCloseRef","useRef","formattedValue","useFormattedValue","closeHandler","useCallback","useKeyPress","window","undefined","isMinXs","useIsMinWidth","valueIsSpecified","useMemo","rightHasPaddingValue","rightValue","e","stopPropagation","includes","key","preventDefault","clearLabel","firstTimePickerRef","secondTimePickerRef","rangeStartedRef","changeHandler","prev","nextValue","Array","isArray","getTime","sort","a","b","calendarComponent","v","tabOnInputComplete","target","selectionStart","from","nextTo","closeOnInputComplete","timeComponent","getAccessibilityDateLabel","t","buttonPaddingHorizontal","selectToggleListItemHeight","sizes","small","displayName"],"sources":["../../../src/DatePicker/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport {\n DatePickerLocale,\n defaultLocale,\n getAccessibilityDateLabel,\n useFormattedValue,\n} from '@os-design/date-picker-utils';\nimport { Down, Up } from '@os-design/icons';\nimport { useIsMinWidth } from '@os-design/media';\nimport { WithSize } from '@os-design/styles';\nimport { ThemeOverrider } from '@os-design/theming';\nimport {\n useForwardedRef,\n useForwardedState,\n useKeyPress,\n} from '@os-design/utils';\nimport React, {\n forwardRef,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport Button from '../Button';\nimport Modal from '../Modal';\nimport Popover from '../Popover';\nimport { SelectContainer } from '../Select';\nimport {\n ClearIcon,\n Content,\n IconContainer,\n LeftAddon,\n Placeholder,\n RightAddon,\n Title,\n} from '../Select/SelectToggle';\nimport TimePicker from '../TimePicker';\nimport DatePickerCalendar from './DatePickerCalendar';\n\ntype JsxDivProps = Omit<\n JSX.IntrinsicElements['div'],\n 'value' | 'defaultValue' | 'onChange' | 'ref'\n>;\ninterface BaseDatePickerProps<T> extends JsxDivProps, WithSize {\n /**\n * The component located on the left side.\n * @default undefined\n */\n left?: React.ReactNode;\n /**\n * Adds padding to the left component.\n * It can be useful when passing an icon or text in the left component.\n * @default false\n */\n leftHasPadding?: boolean;\n /**\n * The component located on the right side.\n * @default undefined\n */\n right?: React.ReactNode;\n /**\n * Adds padding to the right component.\n * It can be useful when passing an icon or text in the right component.\n * @default false\n */\n rightHasPadding?: boolean;\n /**\n * The placeholder of the date picker.\n * @default undefined\n */\n placeholder?: string;\n /**\n * Whether the date picker is disabled.\n * @default false\n */\n disabled?: boolean;\n /**\n * Whether the component have a focus.\n * @default false\n */\n autoFocus?: boolean;\n /**\n * Whether the component opens the popup calendar.\n * @default false\n */\n autoOpen?: boolean;\n /**\n * The format of the date.\n * @default undefined\n */\n format?: (value: T) => string;\n /**\n * The first day of the week.\n * @default sunday\n */\n firstDayOfWeek?: 'sunday' | 'monday';\n /**\n * The locale of the date picker.\n * @default undefined\n */\n locale?: DatePickerLocale;\n /**\n * Whether the time is shown.\n * @default false\n */\n showTime?: boolean;\n /**\n * The time notation.\n * @default 12-hour\n */\n timeNotation?: '12-hour' | '24-hour';\n /**\n * Selected date.\n * @default undefined\n */\n value?: T | null;\n /**\n * The default value.\n * @default undefined\n */\n defaultValue?: T | null;\n /**\n * The change event handler.\n * @default undefined\n */\n onChange?: (value: T | null) => void;\n /**\n * The event handler that is called whenever a popup calendar closes.\n * @default undefined\n */\n onClose?: () => void;\n}\ninterface DateNotRangePickerProps extends BaseDatePickerProps<Date> {\n /**\n * Whether the value is a range.\n * @default false\n */\n range?: false;\n}\ninterface DateRangePickerProps extends BaseDatePickerProps<[Date, Date]> {\n /**\n * Whether the value is a range.\n * @default false\n */\n range: true;\n}\nexport type DatePickerProps = DateNotRangePickerProps | DateRangePickerProps;\n\nconst StyledPopover = styled(Popover)`\n padding: ${(p) => p.theme.datePickerPadding}em;\n`;\n\nconst TimeContainer = styled.div`\n display: flex;\n justify-content: center;\n margin-top: 0.5em;\n`;\n\nconst Dash = styled.div`\n margin: 0 0.5em;\n line-height: ${(p) => p.theme.baseHeight}em;\n`;\n\nconst StyledTimePicker = styled(TimePicker)`\n width: 2.5em;\n text-align: center;\n`;\n\nconst timePickerStyle = { style: { width: 'auto' } };\n\nconst createDate = (date: Date, time?: Date | null) => {\n const d = new Date(0);\n d.setFullYear(date.getFullYear());\n d.setMonth(date.getMonth());\n d.setDate(date.getDate());\n d.setHours(0);\n d.setMinutes(0);\n if (time) {\n d.setHours(time.getHours());\n d.setMinutes(time.getMinutes());\n }\n return d;\n};\n\n/**\n * The component to choose a date.\n */\nconst DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(\n (\n {\n left,\n leftHasPadding = false,\n right,\n rightHasPadding = false,\n placeholder,\n disabled = false,\n autoFocus = false,\n autoOpen = false,\n format,\n firstDayOfWeek = 'sunday',\n locale = defaultLocale,\n showTime = false,\n timeNotation = '12-hour',\n range = false,\n value,\n defaultValue,\n onChange,\n onClose = () => {},\n size,\n ...rest\n },\n ref\n ) => {\n const [containerRef, mergedContainerRef] = useForwardedRef(ref);\n const [opened, setOpened] = useState(autoOpen);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const [forwardedValue, setForwardedValue] = useForwardedState<any>({\n value,\n defaultValue,\n onChange,\n });\n\n useEffect(() => {\n if (autoFocus) containerRef.current?.focus();\n }, [autoFocus, containerRef]);\n\n const onCloseRef = useRef(onClose);\n useEffect(() => {\n onCloseRef.current = onClose;\n }, [onClose]);\n\n useEffect(() => {\n if (!opened) onCloseRef.current();\n }, [opened]);\n\n const formattedValue = useFormattedValue({\n forwardedValue,\n format,\n showTime,\n timeNotation,\n });\n\n const closeHandler = useCallback(() => {\n setOpened(false);\n }, []);\n\n useKeyPress(\n (typeof window !== 'undefined' ? window : undefined) as EventTarget,\n 'Escape',\n closeHandler\n );\n const isMinXs = useIsMinWidth('xs');\n\n const valueIsSpecified = useMemo(\n () => formattedValue !== undefined && formattedValue !== null,\n [formattedValue]\n );\n\n const rightHasPaddingValue = useMemo(() => {\n if (valueIsSpecified) return false;\n return right ? rightHasPadding : true;\n }, [right, rightHasPadding, valueIsSpecified]);\n\n const rightValue = useMemo(() => {\n if (valueIsSpecified) {\n return (\n <div aria-hidden>\n <Button\n type='ghost'\n wide='never'\n size='small'\n disabled={disabled}\n onClick={(e) => {\n setForwardedValue(null);\n e.stopPropagation();\n }}\n onKeyDown={(e) => {\n if (disabled) return;\n if (['Enter', ' '].includes(e.key)) {\n setForwardedValue(null);\n if (!containerRef.current) return;\n containerRef.current.focus();\n e.preventDefault();\n e.stopPropagation();\n }\n }}\n aria-label={locale.clearLabel}\n >\n <ClearIcon />\n </Button>\n </div>\n );\n }\n return (\n right || <IconContainer>{opened ? <Up /> : <Down />}</IconContainer>\n );\n }, [\n containerRef,\n disabled,\n locale.clearLabel,\n opened,\n right,\n setForwardedValue,\n valueIsSpecified,\n ]);\n\n const firstTimePickerRef = useRef<HTMLInputElement>(null);\n const secondTimePickerRef = useRef<HTMLInputElement>(null);\n const rangeStartedRef = useRef(false);\n\n useEffect(() => {\n rangeStartedRef.current = false;\n }, [opened]);\n\n const changeHandler = useCallback(\n (date: Date) => {\n setForwardedValue((prev) => {\n if (!range) return createDate(date, prev);\n\n const d = createDate(date);\n const nextValue =\n prev && Array.isArray(prev) && rangeStartedRef.current\n ? [new Date(prev[0].getTime()), createDate(date, prev[1])]\n : [d, d];\n\n rangeStartedRef.current = !rangeStartedRef.current;\n return nextValue.sort(\n (a: Date, b: Date) => a.getTime() - b.getTime()\n );\n });\n },\n [range, setForwardedValue]\n );\n\n const calendarComponent = useMemo(\n () => (\n <DatePickerCalendar\n firstDayOfWeek={firstDayOfWeek}\n locale={locale}\n value={forwardedValue}\n onSelect={(v) => {\n changeHandler(v);\n firstTimePickerRef.current?.focus();\n if (!showTime && (!range || !rangeStartedRef.current)) {\n closeHandler();\n }\n }}\n />\n ),\n [\n changeHandler,\n closeHandler,\n firstDayOfWeek,\n forwardedValue,\n locale,\n range,\n showTime,\n ]\n );\n\n const tabOnInputComplete = useCallback(\n (e) => {\n if (e.target.selectionStart < 5) return;\n secondTimePickerRef.current?.focus();\n setForwardedValue(([from]) => {\n const nextTo = new Date(from.getTime());\n nextTo.setHours(nextTo.getHours() + 1);\n return [from, nextTo];\n });\n },\n [setForwardedValue]\n );\n\n const closeOnInputComplete = useCallback(\n (e) => {\n if (e.target.selectionStart < 5) return;\n closeHandler();\n },\n [closeHandler]\n );\n\n const timeComponent = useMemo(\n () =>\n showTime && forwardedValue ? (\n <TimeContainer>\n {Array.isArray(forwardedValue) ? (\n <>\n <StyledTimePicker\n ref={firstTimePickerRef}\n autoFocus\n disabled={disabled}\n notation={timeNotation}\n containerProps={timePickerStyle}\n value={forwardedValue[0]}\n onChange={(v) => setForwardedValue([v, forwardedValue[1]])}\n onKeyDown={(e) => {\n if (disabled) return;\n if (e.key === 'Enter') {\n setOpened(!opened);\n }\n }}\n onKeyUp={tabOnInputComplete}\n />\n <Dash>–</Dash>\n <StyledTimePicker\n ref={secondTimePickerRef}\n disabled={disabled}\n notation={timeNotation}\n containerProps={timePickerStyle}\n value={forwardedValue[1]}\n onChange={(v) => setForwardedValue([forwardedValue[0], v])}\n onKeyDown={(e) => {\n if (disabled) return;\n if (e.key === 'Enter') {\n setOpened(!opened);\n }\n }}\n onKeyUp={closeOnInputComplete}\n />\n </>\n ) : (\n <StyledTimePicker\n ref={firstTimePickerRef}\n autoFocus\n disabled={disabled}\n notation={timeNotation}\n containerProps={timePickerStyle}\n value={forwardedValue}\n onChange={setForwardedValue}\n onKeyDown={(e) => {\n if (disabled) return;\n if (e.key === 'Enter') {\n setOpened(!opened);\n }\n }}\n onKeyUp={closeOnInputComplete}\n />\n )}\n </TimeContainer>\n ) : null,\n [\n closeOnInputComplete,\n disabled,\n forwardedValue,\n opened,\n setForwardedValue,\n showTime,\n tabOnInputComplete,\n timeNotation,\n ]\n );\n\n return (\n <>\n <SelectContainer\n opened={opened}\n disabled={disabled}\n size={size}\n tabIndex={!disabled ? 0 : -1}\n onClick={() => {\n if (disabled) return;\n setOpened(!opened);\n }}\n onKeyDown={(e) => {\n if (disabled) return;\n if (['Enter', ' '].includes(e.key)) {\n setOpened(!opened);\n e.preventDefault();\n }\n }}\n onMouseDown={(e) => e.preventDefault()}\n role='combobox'\n aria-label={\n forwardedValue\n ? getAccessibilityDateLabel(forwardedValue, locale)\n : undefined\n }\n aria-disabled={disabled}\n {...rest}\n ref={mergedContainerRef}\n >\n {left && (\n <ThemeOverrider\n overrides={(t) => ({\n buttonPaddingHorizontal: 0.8,\n baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n })}\n >\n <LeftAddon hasPadding={leftHasPadding}>{left}</LeftAddon>\n </ThemeOverrider>\n )}\n\n <Content hasLeft={!!left} hasRight={!!right}>\n {valueIsSpecified ? (\n <Title disabled={disabled} aria-hidden>\n {formattedValue}\n </Title>\n ) : (\n <Placeholder>{placeholder}</Placeholder>\n )}\n </Content>\n\n {rightValue && (\n <ThemeOverrider\n overrides={(t) => ({\n buttonPaddingHorizontal: 0.8,\n baseHeight: t.selectToggleListItemHeight / t.sizes.small,\n })}\n >\n <RightAddon hasPadding={rightHasPaddingValue}>\n {rightValue}\n </RightAddon>\n </ThemeOverrider>\n )}\n </SelectContainer>\n\n {isMinXs ? (\n <StyledPopover\n trigger={containerRef}\n placement='bottom-start'\n visible={opened}\n onClose={closeHandler}\n size={size}\n >\n {calendarComponent}\n {timeComponent}\n </StyledPopover>\n ) : (\n <Modal\n title={placeholder}\n header={null}\n footer={null}\n visible={opened}\n onClose={closeHandler}\n size={size}\n >\n {calendarComponent}\n {timeComponent}\n </Modal>\n )}\n </>\n );\n }\n);\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n"],"mappings":"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"}
@@ -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)(false),
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(false);
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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"}
@@ -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(false);
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;CACtC;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,wFA0Vf,CAAC;AAIF,eAAe,UAAU,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,KAMN,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,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,oFA8KX,CAAC;AAIF,eAAe,MAAM,CAAC"}
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.165",
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": "1aeb297d51a0d5c458d90c666fd487c804d13b5c"
61
+ "gitHead": "9dfdc680810b6d537e573e4681cd2fc9c746bc8f"
62
62
  }