@os-design/core 1.0.179 → 1.0.181
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/PageHeaderInputSearch/index.js +28 -22
- package/dist/cjs/PageHeaderInputSearch/index.js.map +1 -1
- package/dist/esm/PageHeaderInputSearch/index.js +12 -8
- package/dist/esm/PageHeaderInputSearch/index.js.map +1 -1
- package/dist/types/PageHeaderInputSearch/index.d.ts +1 -0
- package/dist/types/PageHeaderInputSearch/index.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -5,22 +5,22 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
7
|
exports["default"] = void 0;
|
|
8
|
-
var _react =
|
|
9
|
-
var _icons = require("@os-design/icons");
|
|
8
|
+
var _react = require("@emotion/react");
|
|
10
9
|
var _styled = _interopRequireDefault(require("@emotion/styled"));
|
|
11
|
-
var
|
|
10
|
+
var _icons = require("@os-design/icons");
|
|
12
11
|
var _theming = require("@os-design/theming");
|
|
13
|
-
var
|
|
14
|
-
var
|
|
12
|
+
var _utils = require("@os-design/utils");
|
|
13
|
+
var _react2 = _interopRequireWildcard(require("react"));
|
|
15
14
|
var _Button = _interopRequireDefault(require("../Button"));
|
|
16
|
-
var
|
|
15
|
+
var _InputSearch = _interopRequireDefault(require("../InputSearch"));
|
|
17
16
|
var _LayoutContext = _interopRequireDefault(require("../Layout/LayoutContext"));
|
|
17
|
+
var _PageHeader = require("../PageHeader");
|
|
18
18
|
var _defaultLocale = _interopRequireDefault(require("./utils/defaultLocale"));
|
|
19
|
-
var _excluded = ["locale", "onClose"];
|
|
19
|
+
var _excluded = ["locale", "autoOpen", "onClose", "loading"];
|
|
20
20
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
21
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
22
21
|
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); }
|
|
23
22
|
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; }
|
|
23
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
24
24
|
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); }
|
|
25
25
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
26
26
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
@@ -31,13 +31,13 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
31
31
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
32
32
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
33
33
|
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
|
|
34
|
-
var fadeIn = (0,
|
|
35
|
-
var fadeOut = (0,
|
|
34
|
+
var fadeIn = (0, _react.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n from { transform: translateY(-100%); }\n to { transform: translateY(0); }\n"])));
|
|
35
|
+
var fadeOut = (0, _react.keyframes)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n from { transform: translateY(0); }\n to { transform: translateY(-100%); }\n"])));
|
|
36
36
|
var visibleStyles = function visibleStyles(p) {
|
|
37
|
-
return p.visible && (0,
|
|
37
|
+
return p.visible && (0, _react.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n animation: ", " ", "ms forwards;\n "])), fadeIn, p.theme.transitionDelay);
|
|
38
38
|
};
|
|
39
39
|
var invisibleStyles = function invisibleStyles(p) {
|
|
40
|
-
return !p.visible && (0,
|
|
40
|
+
return !p.visible && (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n animation: ", " ", "ms forwards;\n "])), fadeOut, p.theme.transitionDelay);
|
|
41
41
|
};
|
|
42
42
|
var Container = (0, _styled["default"])(_PageHeader.PageHeaderContainer, (0, _utils.omitEmotionProps)('visible'))(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n z-index: 102; // After PageHeaderContainer\n ", ";\n ", ";\n"])), visibleStyles, invisibleStyles);
|
|
43
43
|
var CloseButton = (0, _styled["default"])(_Button["default"])(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n margin-left: ", "em;\n"])), function (p) {
|
|
@@ -47,44 +47,50 @@ var CloseButton = (0, _styled["default"])(_Button["default"])(_templateObject6 |
|
|
|
47
47
|
/**
|
|
48
48
|
* The search input for the page header.
|
|
49
49
|
*/
|
|
50
|
-
var PageHeaderInputSearch = /*#__PURE__*/(0,
|
|
50
|
+
var PageHeaderInputSearch = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
|
|
51
51
|
var _ref$locale = _ref.locale,
|
|
52
52
|
locale = _ref$locale === void 0 ? _defaultLocale["default"] : _ref$locale,
|
|
53
|
+
_ref$autoOpen = _ref.autoOpen,
|
|
54
|
+
autoOpen = _ref$autoOpen === void 0 ? false : _ref$autoOpen,
|
|
53
55
|
_ref$onClose = _ref.onClose,
|
|
54
56
|
onClose = _ref$onClose === void 0 ? function () {} : _ref$onClose,
|
|
57
|
+
_ref$loading = _ref.loading,
|
|
58
|
+
loading = _ref$loading === void 0 ? false : _ref$loading,
|
|
55
59
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
56
|
-
var _useState = (0,
|
|
60
|
+
var _useState = (0, _react2.useState)(autoOpen),
|
|
57
61
|
_useState2 = _slicedToArray(_useState, 2),
|
|
58
62
|
visible = _useState2[0],
|
|
59
63
|
setVisible = _useState2[1];
|
|
60
64
|
var _useTheme = (0, _theming.useTheme)(),
|
|
61
65
|
theme = _useTheme.theme;
|
|
62
66
|
var mounted = (0, _utils.useClosable)(visible, theme.transitionDelay);
|
|
63
|
-
var _useContext = (0,
|
|
67
|
+
var _useContext = (0, _react2.useContext)(_LayoutContext["default"]),
|
|
64
68
|
hasNavigation = _useContext.hasNavigation;
|
|
65
|
-
return /*#__PURE__*/
|
|
69
|
+
return /*#__PURE__*/_react2["default"].createElement(_react2["default"].Fragment, null, /*#__PURE__*/_react2["default"].createElement(_Button["default"], {
|
|
66
70
|
type: "ghost",
|
|
67
71
|
wide: "never",
|
|
72
|
+
loading: loading,
|
|
68
73
|
onClick: function onClick() {
|
|
69
74
|
return setVisible(true);
|
|
70
75
|
},
|
|
71
76
|
"aria-label": locale.searchLabel
|
|
72
|
-
}, /*#__PURE__*/
|
|
77
|
+
}, /*#__PURE__*/_react2["default"].createElement(_icons.Search, null)), mounted && /*#__PURE__*/_react2["default"].createElement(_theming.ThemeOverrider, {
|
|
73
78
|
overrides: function overrides(t) {
|
|
74
79
|
return {
|
|
75
80
|
buttonPaddingHorizontal: t.pageHeaderButtonPaddingHorizontal
|
|
76
81
|
};
|
|
77
82
|
}
|
|
78
|
-
}, /*#__PURE__*/
|
|
83
|
+
}, /*#__PURE__*/_react2["default"].createElement(Container, {
|
|
79
84
|
visible: visible,
|
|
80
85
|
rightIsGhostButton: true,
|
|
81
86
|
hasNavigationIndent: hasNavigation
|
|
82
|
-
}, /*#__PURE__*/
|
|
87
|
+
}, /*#__PURE__*/_react2["default"].createElement(_InputSearch["default"], _extends({
|
|
83
88
|
autoFocus: true,
|
|
84
|
-
locale: locale
|
|
89
|
+
locale: locale,
|
|
90
|
+
loading: loading
|
|
85
91
|
}, rest, {
|
|
86
92
|
ref: ref
|
|
87
|
-
})), /*#__PURE__*/
|
|
93
|
+
})), /*#__PURE__*/_react2["default"].createElement(CloseButton, {
|
|
88
94
|
type: "ghost",
|
|
89
95
|
wide: "never",
|
|
90
96
|
onClick: function onClick() {
|
|
@@ -92,7 +98,7 @@ var PageHeaderInputSearch = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
|
|
|
92
98
|
onClose();
|
|
93
99
|
},
|
|
94
100
|
"aria-label": locale.closeLabel
|
|
95
|
-
}, /*#__PURE__*/
|
|
101
|
+
}, /*#__PURE__*/_react2["default"].createElement(_icons.Close, null)))));
|
|
96
102
|
});
|
|
97
103
|
PageHeaderInputSearch.displayName = 'PageHeaderInputSearch';
|
|
98
104
|
var _default = PageHeaderInputSearch;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["fadeIn","keyframes","fadeOut","visibleStyles","p","visible","css","theme","transitionDelay","invisibleStyles","Container","styled","PageHeaderContainer","omitEmotionProps","CloseButton","Button","pageHeaderAddonPaddingHorizontal","PageHeaderInputSearch","forwardRef","ref","locale","defaultLocale","onClose","rest","useState","setVisible","useTheme","mounted","useClosable","useContext","LayoutContext","hasNavigation","searchLabel","t","buttonPaddingHorizontal","pageHeaderButtonPaddingHorizontal","closeLabel","displayName"],"sources":["../../../src/PageHeaderInputSearch/index.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"index.js","names":["fadeIn","keyframes","fadeOut","visibleStyles","p","visible","css","theme","transitionDelay","invisibleStyles","Container","styled","PageHeaderContainer","omitEmotionProps","CloseButton","Button","pageHeaderAddonPaddingHorizontal","PageHeaderInputSearch","forwardRef","ref","locale","defaultLocale","autoOpen","onClose","loading","rest","useState","setVisible","useTheme","mounted","useClosable","useContext","LayoutContext","hasNavigation","searchLabel","t","buttonPaddingHorizontal","pageHeaderButtonPaddingHorizontal","closeLabel","displayName"],"sources":["../../../src/PageHeaderInputSearch/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Close, Search } from '@os-design/icons';\nimport { ThemeOverrider, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useClosable } from '@os-design/utils';\nimport React, { forwardRef, useContext, useState } from 'react';\nimport Button from '../Button';\nimport InputSearch, { InputSearchProps } from '../InputSearch';\nimport LayoutContext from '../Layout/LayoutContext';\nimport { PageHeaderContainer } from '../PageHeader';\nimport defaultLocale, {\n PageHeaderInputSearchLocale,\n} from './utils/defaultLocale';\n\nexport interface PageHeaderInputSearchProps\n extends Omit<InputSearchProps, 'size' | 'locale'> {\n /**\n * The locale.\n * @default undefined\n */\n locale?: PageHeaderInputSearchLocale;\n /**\n * Whether the search input opens on mount.\n * @default false\n */\n autoOpen?: boolean;\n /**\n * The close event handler.\n * @default undefined\n */\n onClose?: () => void;\n}\n\nconst fadeIn = keyframes`\n from { transform: translateY(-100%); }\n to { transform: translateY(0); }\n`;\n\nconst fadeOut = keyframes`\n from { transform: translateY(0); }\n to { transform: translateY(-100%); }\n`;\n\nconst visibleStyles = (p) =>\n p.visible &&\n css`\n animation: ${fadeIn} ${p.theme.transitionDelay}ms forwards;\n `;\n\nconst invisibleStyles = (p) =>\n !p.visible &&\n css`\n animation: ${fadeOut} ${p.theme.transitionDelay}ms forwards;\n `;\n\ninterface ContainerProps {\n visible: boolean;\n}\nconst Container = styled(\n PageHeaderContainer,\n omitEmotionProps('visible')\n)<ContainerProps>`\n z-index: 102; // After PageHeaderContainer\n ${visibleStyles};\n ${invisibleStyles};\n`;\n\nconst CloseButton = styled(Button)`\n margin-left: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n`;\n\n/**\n * The search input for the page header.\n */\nconst PageHeaderInputSearch = forwardRef<\n HTMLInputElement,\n PageHeaderInputSearchProps\n>(\n (\n {\n locale = defaultLocale,\n autoOpen = false,\n onClose = () => {},\n loading = false,\n ...rest\n },\n ref\n ) => {\n const [visible, setVisible] = useState(autoOpen);\n const { theme } = useTheme();\n const mounted = useClosable(visible, theme.transitionDelay);\n const { hasNavigation } = useContext(LayoutContext);\n\n return (\n <>\n <Button\n type='ghost'\n wide='never'\n loading={loading}\n onClick={() => setVisible(true)}\n aria-label={locale.searchLabel}\n >\n <Search />\n </Button>\n\n {mounted && (\n <ThemeOverrider\n overrides={(t) => ({\n buttonPaddingHorizontal: t.pageHeaderButtonPaddingHorizontal,\n })}\n >\n <Container\n visible={visible}\n rightIsGhostButton\n hasNavigationIndent={hasNavigation}\n >\n <InputSearch\n autoFocus\n locale={locale}\n loading={loading}\n {...rest}\n ref={ref}\n />\n <CloseButton\n type='ghost'\n wide='never'\n onClick={() => {\n setVisible(false);\n onClose();\n }}\n aria-label={locale.closeLabel}\n >\n <Close />\n </CloseButton>\n </Container>\n </ThemeOverrider>\n )}\n </>\n );\n }\n);\n\nPageHeaderInputSearch.displayName = 'PageHeaderInputSearch';\n\nexport default PageHeaderInputSearch;\n"],"mappings":"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"}
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
import
|
|
3
|
-
import { Close, Search } from '@os-design/icons';
|
|
2
|
+
import { css, keyframes } from '@emotion/react';
|
|
4
3
|
import styled from '@emotion/styled';
|
|
5
|
-
import {
|
|
4
|
+
import { Close, Search } from '@os-design/icons';
|
|
6
5
|
import { ThemeOverrider, useTheme } from '@os-design/theming';
|
|
7
|
-
import {
|
|
8
|
-
import
|
|
6
|
+
import { omitEmotionProps, useClosable } from '@os-design/utils';
|
|
7
|
+
import React, { forwardRef, useContext, useState } from 'react';
|
|
9
8
|
import Button from '../Button';
|
|
10
|
-
import
|
|
9
|
+
import InputSearch from '../InputSearch';
|
|
11
10
|
import LayoutContext from '../Layout/LayoutContext';
|
|
11
|
+
import { PageHeaderContainer } from '../PageHeader';
|
|
12
12
|
import defaultLocale from './utils/defaultLocale';
|
|
13
13
|
const fadeIn = keyframes`
|
|
14
14
|
from { transform: translateY(-100%); }
|
|
@@ -38,10 +38,12 @@ const CloseButton = styled(Button)`
|
|
|
38
38
|
*/
|
|
39
39
|
const PageHeaderInputSearch = /*#__PURE__*/forwardRef(({
|
|
40
40
|
locale = defaultLocale,
|
|
41
|
+
autoOpen = false,
|
|
41
42
|
onClose = () => {},
|
|
43
|
+
loading = false,
|
|
42
44
|
...rest
|
|
43
45
|
}, ref) => {
|
|
44
|
-
const [visible, setVisible] = useState(
|
|
46
|
+
const [visible, setVisible] = useState(autoOpen);
|
|
45
47
|
const {
|
|
46
48
|
theme
|
|
47
49
|
} = useTheme();
|
|
@@ -52,6 +54,7 @@ const PageHeaderInputSearch = /*#__PURE__*/forwardRef(({
|
|
|
52
54
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
|
|
53
55
|
type: "ghost",
|
|
54
56
|
wide: "never",
|
|
57
|
+
loading: loading,
|
|
55
58
|
onClick: () => setVisible(true),
|
|
56
59
|
"aria-label": locale.searchLabel
|
|
57
60
|
}, /*#__PURE__*/React.createElement(Search, null)), mounted && /*#__PURE__*/React.createElement(ThemeOverrider, {
|
|
@@ -64,7 +67,8 @@ const PageHeaderInputSearch = /*#__PURE__*/forwardRef(({
|
|
|
64
67
|
hasNavigationIndent: hasNavigation
|
|
65
68
|
}, /*#__PURE__*/React.createElement(InputSearch, _extends({
|
|
66
69
|
autoFocus: true,
|
|
67
|
-
locale: locale
|
|
70
|
+
locale: locale,
|
|
71
|
+
loading: loading
|
|
68
72
|
}, rest, {
|
|
69
73
|
ref: ref
|
|
70
74
|
})), /*#__PURE__*/React.createElement(CloseButton, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["
|
|
1
|
+
{"version":3,"file":"index.js","names":["css","keyframes","styled","Close","Search","ThemeOverrider","useTheme","omitEmotionProps","useClosable","React","forwardRef","useContext","useState","Button","InputSearch","LayoutContext","PageHeaderContainer","defaultLocale","fadeIn","fadeOut","visibleStyles","p","visible","theme","transitionDelay","invisibleStyles","Container","CloseButton","pageHeaderAddonPaddingHorizontal","PageHeaderInputSearch","locale","autoOpen","onClose","loading","rest","ref","setVisible","mounted","hasNavigation","searchLabel","t","buttonPaddingHorizontal","pageHeaderButtonPaddingHorizontal","closeLabel","displayName"],"sources":["../../../src/PageHeaderInputSearch/index.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Close, Search } from '@os-design/icons';\nimport { ThemeOverrider, useTheme } from '@os-design/theming';\nimport { omitEmotionProps, useClosable } from '@os-design/utils';\nimport React, { forwardRef, useContext, useState } from 'react';\nimport Button from '../Button';\nimport InputSearch, { InputSearchProps } from '../InputSearch';\nimport LayoutContext from '../Layout/LayoutContext';\nimport { PageHeaderContainer } from '../PageHeader';\nimport defaultLocale, {\n PageHeaderInputSearchLocale,\n} from './utils/defaultLocale';\n\nexport interface PageHeaderInputSearchProps\n extends Omit<InputSearchProps, 'size' | 'locale'> {\n /**\n * The locale.\n * @default undefined\n */\n locale?: PageHeaderInputSearchLocale;\n /**\n * Whether the search input opens on mount.\n * @default false\n */\n autoOpen?: boolean;\n /**\n * The close event handler.\n * @default undefined\n */\n onClose?: () => void;\n}\n\nconst fadeIn = keyframes`\n from { transform: translateY(-100%); }\n to { transform: translateY(0); }\n`;\n\nconst fadeOut = keyframes`\n from { transform: translateY(0); }\n to { transform: translateY(-100%); }\n`;\n\nconst visibleStyles = (p) =>\n p.visible &&\n css`\n animation: ${fadeIn} ${p.theme.transitionDelay}ms forwards;\n `;\n\nconst invisibleStyles = (p) =>\n !p.visible &&\n css`\n animation: ${fadeOut} ${p.theme.transitionDelay}ms forwards;\n `;\n\ninterface ContainerProps {\n visible: boolean;\n}\nconst Container = styled(\n PageHeaderContainer,\n omitEmotionProps('visible')\n)<ContainerProps>`\n z-index: 102; // After PageHeaderContainer\n ${visibleStyles};\n ${invisibleStyles};\n`;\n\nconst CloseButton = styled(Button)`\n margin-left: ${(p) => p.theme.pageHeaderAddonPaddingHorizontal}em;\n`;\n\n/**\n * The search input for the page header.\n */\nconst PageHeaderInputSearch = forwardRef<\n HTMLInputElement,\n PageHeaderInputSearchProps\n>(\n (\n {\n locale = defaultLocale,\n autoOpen = false,\n onClose = () => {},\n loading = false,\n ...rest\n },\n ref\n ) => {\n const [visible, setVisible] = useState(autoOpen);\n const { theme } = useTheme();\n const mounted = useClosable(visible, theme.transitionDelay);\n const { hasNavigation } = useContext(LayoutContext);\n\n return (\n <>\n <Button\n type='ghost'\n wide='never'\n loading={loading}\n onClick={() => setVisible(true)}\n aria-label={locale.searchLabel}\n >\n <Search />\n </Button>\n\n {mounted && (\n <ThemeOverrider\n overrides={(t) => ({\n buttonPaddingHorizontal: t.pageHeaderButtonPaddingHorizontal,\n })}\n >\n <Container\n visible={visible}\n rightIsGhostButton\n hasNavigationIndent={hasNavigation}\n >\n <InputSearch\n autoFocus\n locale={locale}\n loading={loading}\n {...rest}\n ref={ref}\n />\n <CloseButton\n type='ghost'\n wide='never'\n onClick={() => {\n setVisible(false);\n onClose();\n }}\n aria-label={locale.closeLabel}\n >\n <Close />\n </CloseButton>\n </Container>\n </ThemeOverrider>\n )}\n </>\n );\n }\n);\n\nPageHeaderInputSearch.displayName = 'PageHeaderInputSearch';\n\nexport default PageHeaderInputSearch;\n"],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@ import { InputSearchProps } from '../InputSearch';
|
|
|
3
3
|
import { PageHeaderInputSearchLocale } from './utils/defaultLocale';
|
|
4
4
|
export interface PageHeaderInputSearchProps extends Omit<InputSearchProps, 'size' | 'locale'> {
|
|
5
5
|
locale?: PageHeaderInputSearchLocale;
|
|
6
|
+
autoOpen?: boolean;
|
|
6
7
|
onClose?: () => void;
|
|
7
8
|
}
|
|
8
9
|
declare const PageHeaderInputSearch: React.ForwardRefExoticComponent<PageHeaderInputSearchProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/PageHeaderInputSearch/index.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/PageHeaderInputSearch/index.tsx"],"names":[],"mappings":"AAKA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAoB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAG/D,OAAsB,EACpB,2BAA2B,EAC5B,MAAM,uBAAuB,CAAC;AAE/B,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,gBAAgB,EAAE,MAAM,GAAG,QAAQ,CAAC;IAKjD,MAAM,CAAC,EAAE,2BAA2B,CAAC;IAKrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAKnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AA2CD,QAAA,MAAM,qBAAqB,qGAkE1B,CAAC;AAIF,eAAe,qBAAqB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@os-design/core",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.181",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"repository": "git@gitlab.com:os-team/libs/os-design.git",
|
|
6
6
|
"main": "dist/cjs/index.js",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"react": ">=18",
|
|
59
59
|
"react-dom": ">=18"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "54d934347e3bc64add50d5ab4021a94791f9f9dc"
|
|
62
62
|
}
|