@navikt/ds-react 0.16.18 → 0.17.0
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/cjs/accordion/Accordion.js +5 -1
- package/cjs/accordion/AccordionContent.js +5 -1
- package/cjs/accordion/AccordionHeader.js +5 -1
- package/cjs/accordion/AccordionItem.js +5 -1
- package/cjs/accordion/index.js +5 -1
- package/cjs/alert/Alert.js +5 -1
- package/cjs/alert/index.js +5 -1
- package/cjs/button/Button.js +5 -1
- package/cjs/button/index.js +5 -1
- package/cjs/card/MicroCard.js +5 -1
- package/cjs/card/index.js +5 -1
- package/cjs/form/ConfirmationPanel.js +5 -1
- package/cjs/form/Fieldset/Fieldset.js +5 -1
- package/cjs/form/Select.js +5 -1
- package/cjs/form/Switch.js +5 -1
- package/cjs/form/TextField.js +5 -1
- package/cjs/form/Textarea.js +5 -1
- package/cjs/form/checkbox/Checkbox.js +5 -1
- package/cjs/form/checkbox/CheckboxGroup.js +5 -1
- package/cjs/form/error-summary/ErrorSummary.js +5 -1
- package/cjs/form/error-summary/ErrorSummaryItem.js +5 -1
- package/cjs/form/error-summary/index.js +5 -1
- package/cjs/form/index.js +3 -3
- package/cjs/form/radio/Radio.js +5 -1
- package/cjs/form/radio/RadioGroup.js +5 -1
- package/cjs/form/search/Search.js +102 -0
- package/cjs/form/{search-field/SearchFieldButton.js → search/SearchButton.js} +22 -11
- package/cjs/form/search/index.js +8 -0
- package/cjs/form/search/package.json +6 -0
- package/cjs/form/search/useSearch.js +31 -0
- package/cjs/grid/Cell.js +5 -1
- package/cjs/grid/ContentContainer.js +5 -1
- package/cjs/grid/Grid.js +5 -1
- package/cjs/grid/index.js +5 -1
- package/cjs/guide-panel/Guide.js +5 -1
- package/cjs/guide-panel/GuidePanel.js +5 -1
- package/cjs/guide-panel/index.js +5 -1
- package/cjs/help-text/HelpText.js +5 -1
- package/cjs/help-text/index.js +5 -1
- package/cjs/index.js +5 -1
- package/cjs/link/Link.js +5 -1
- package/cjs/link/index.js +5 -1
- package/cjs/link-panel/LinkPanel.js +5 -1
- package/cjs/link-panel/LinkPanelDescription.js +5 -1
- package/cjs/link-panel/LinkPanelTitle.js +5 -1
- package/cjs/link-panel/index.js +5 -1
- package/cjs/loader/Loader.js +5 -1
- package/cjs/loader/index.js +5 -1
- package/cjs/menu/Menu.js +5 -1
- package/cjs/menu/MenuCollapse.js +5 -1
- package/cjs/menu/MenuItem.js +5 -1
- package/cjs/modal/Modal.js +7 -3
- package/cjs/modal/ModalContent.js +5 -1
- package/cjs/modal/index.js +5 -1
- package/cjs/page-header/PageHeader.js +5 -1
- package/cjs/page-header/index.js +5 -1
- package/cjs/pagination/index.js +5 -1
- package/cjs/panel/Panel.js +5 -1
- package/cjs/panel/index.js +5 -1
- package/cjs/popover/Popover.js +5 -1
- package/cjs/popover/PopoverContent.js +5 -1
- package/cjs/popover/index.js +5 -1
- package/cjs/speech-bubble/Bubble.js +5 -1
- package/cjs/speech-bubble/SpeechBubble.js +5 -1
- package/cjs/speech-bubble/index.js +5 -1
- package/cjs/step-indicator/Step.js +5 -1
- package/cjs/step-indicator/StepIndicator.js +5 -1
- package/cjs/step-indicator/index.js +5 -1
- package/cjs/table/Body.js +5 -1
- package/cjs/table/ColumnHeader.js +5 -1
- package/cjs/table/DataCell.js +5 -1
- package/cjs/table/Header.js +5 -1
- package/cjs/table/HeaderCell.js +5 -1
- package/cjs/table/Row.js +5 -1
- package/cjs/table/Table.js +5 -1
- package/cjs/table/index.js +5 -1
- package/cjs/tag/Tag.js +5 -1
- package/cjs/tag/index.js +5 -1
- package/cjs/toggle-group/ToggleGroup.js +6 -2
- package/cjs/toggle-group/ToggleItem.js +5 -1
- package/cjs/typography/BodyLong.js +5 -1
- package/cjs/typography/BodyShort.js +5 -1
- package/cjs/typography/Detail.js +5 -1
- package/cjs/typography/Heading.js +5 -1
- package/cjs/typography/Ingress.js +5 -1
- package/cjs/typography/Label.js +5 -1
- package/cjs/util/index.js +20 -2
- package/esm/form/index.d.ts +1 -1
- package/esm/form/index.js +1 -1
- package/esm/form/index.js.map +1 -1
- package/esm/form/search/Search.d.ts +62 -0
- package/esm/form/search/Search.js +74 -0
- package/esm/form/search/Search.js.map +1 -0
- package/esm/form/search/SearchButton.d.ts +11 -0
- package/esm/form/search/SearchButton.js +34 -0
- package/esm/form/search/SearchButton.js.map +1 -0
- package/esm/form/search/index.d.ts +1 -0
- package/esm/form/search/index.js +2 -0
- package/esm/form/search/index.js.map +1 -0
- package/esm/form/search/useSearch.d.ts +10 -0
- package/esm/form/search/useSearch.js +25 -0
- package/esm/form/search/useSearch.js.map +1 -0
- package/esm/help-text/HelpText.js.map +1 -1
- package/esm/modal/Modal.d.ts +5 -0
- package/esm/modal/Modal.js +2 -2
- package/esm/modal/Modal.js.map +1 -1
- package/esm/table/ColumnHeader.js.map +1 -1
- package/esm/toggle-group/ToggleGroup.js +1 -1
- package/esm/toggle-group/ToggleGroup.js.map +1 -1
- package/esm/util/index.d.ts +5 -0
- package/esm/util/index.js +13 -0
- package/esm/util/index.js.map +1 -1
- package/package.json +3 -3
- package/src/form/index.ts +1 -1
- package/src/form/search/Search.tsx +235 -0
- package/src/form/search/SearchButton.tsx +51 -0
- package/src/form/search/index.ts +1 -0
- package/src/form/search/search.stories.tsx +91 -0
- package/src/form/search/useSearch.ts +31 -0
- package/src/modal/Modal.tsx +7 -0
- package/src/modal/{stories/modal.stories.tsx → modal.stories.tsx} +9 -5
- package/src/toggle-group/ToggleGroup.stories.tsx +11 -0
- package/src/toggle-group/ToggleGroup.tsx +1 -1
- package/src/util/index.ts +33 -0
- package/cjs/form/search-field/SearchField.js +0 -69
- package/cjs/form/search-field/SearchFieldClearButton.js +0 -50
- package/cjs/form/search-field/SearchFieldInput.js +0 -49
- package/cjs/form/search-field/index.js +0 -19
- package/cjs/form/search-field/package.json +0 -6
- package/esm/form/search-field/SearchField.d.ts +0 -36
- package/esm/form/search-field/SearchField.js +0 -45
- package/esm/form/search-field/SearchField.js.map +0 -1
- package/esm/form/search-field/SearchFieldButton.d.ts +0 -17
- package/esm/form/search-field/SearchFieldButton.js +0 -27
- package/esm/form/search-field/SearchFieldButton.js.map +0 -1
- package/esm/form/search-field/SearchFieldClearButton.d.ts +0 -17
- package/esm/form/search-field/SearchFieldClearButton.js +0 -27
- package/esm/form/search-field/SearchFieldClearButton.js.map +0 -1
- package/esm/form/search-field/SearchFieldInput.d.ts +0 -6
- package/esm/form/search-field/SearchFieldInput.js +0 -26
- package/esm/form/search-field/SearchFieldInput.js.map +0 -1
- package/esm/form/search-field/index.d.ts +0 -2
- package/esm/form/search-field/index.js +0 -3
- package/esm/form/search-field/index.js.map +0 -1
- package/src/form/search-field/SearchField.tsx +0 -132
- package/src/form/search-field/SearchFieldButton.tsx +0 -47
- package/src/form/search-field/SearchFieldClearButton.tsx +0 -49
- package/src/form/search-field/SearchFieldInput.tsx +0 -42
- package/src/form/search-field/index.ts +0 -2
- package/src/form/search-field/stories/search-field-example.tsx +0 -25
- package/src/form/search-field/stories/search-field.stories.mdx +0 -156
- package/src/form/search-field/stories/search-field.stories.tsx +0 -199
- package/src/modal/stories/modal.stories.mdx +0 -32
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
-
}) : (function(o, m, k, k2) {
|
|
6
|
-
if (k2 === undefined) k2 = k;
|
|
7
|
-
o[k2] = m[k];
|
|
8
|
-
}));
|
|
9
|
-
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
-
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
-
}) : function(o, v) {
|
|
12
|
-
o["default"] = v;
|
|
13
|
-
});
|
|
14
|
-
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
-
if (mod && mod.__esModule) return mod;
|
|
16
|
-
var result = {};
|
|
17
|
-
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
-
__setModuleDefault(result, mod);
|
|
19
|
-
return result;
|
|
20
|
-
};
|
|
21
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
22
|
-
var t = {};
|
|
23
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
24
|
-
t[p] = s[p];
|
|
25
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
26
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
27
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
28
|
-
t[p[i]] = s[p[i]];
|
|
29
|
-
}
|
|
30
|
-
return t;
|
|
31
|
-
};
|
|
32
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
33
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
34
|
-
};
|
|
35
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
36
|
-
const react_1 = __importStar(require("react"));
|
|
37
|
-
const classnames_1 = __importDefault(require("classnames"));
|
|
38
|
-
const SearchField_1 = require("./SearchField");
|
|
39
|
-
const SearchFieldInput = (0, react_1.forwardRef)((_a, ref) => {
|
|
40
|
-
var { className } = _a, rest = __rest(_a, ["className"]);
|
|
41
|
-
const searchField = (0, react_1.useContext)(SearchField_1.SearchFieldContext);
|
|
42
|
-
if (searchField === null) {
|
|
43
|
-
console.warn("SearchFieldInput has to be wrapped in <SearchField />");
|
|
44
|
-
return null;
|
|
45
|
-
}
|
|
46
|
-
const { size, inputProps } = searchField;
|
|
47
|
-
return (react_1.default.createElement("input", Object.assign({}, rest, inputProps, { type: "search", role: "searchbox", ref: ref, className: (0, classnames_1.default)(className, "navds-search-field__input", "navds-text-field__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`) })));
|
|
48
|
-
});
|
|
49
|
-
exports.default = SearchFieldInput;
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
-
}) : (function(o, m, k, k2) {
|
|
6
|
-
if (k2 === undefined) k2 = k;
|
|
7
|
-
o[k2] = m[k];
|
|
8
|
-
}));
|
|
9
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
10
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
|
-
};
|
|
12
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
13
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
14
|
-
};
|
|
15
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
16
|
-
exports.SearchField = void 0;
|
|
17
|
-
var SearchField_1 = require("./SearchField");
|
|
18
|
-
Object.defineProperty(exports, "SearchField", { enumerable: true, get: function () { return __importDefault(SearchField_1).default; } });
|
|
19
|
-
__exportStar(require("./SearchField"), exports);
|
|
@@ -1,36 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { FormFieldProps } from "../useFormField";
|
|
3
|
-
import { SearchFieldButtonType } from "./SearchFieldButton";
|
|
4
|
-
import { SearchFieldClearButtonType } from "./SearchFieldClearButton";
|
|
5
|
-
import { SearchFieldInputType } from "./SearchFieldInput";
|
|
6
|
-
export interface SearchFieldContextProps {
|
|
7
|
-
inputProps: {
|
|
8
|
-
id: string;
|
|
9
|
-
"aria-invalid": boolean;
|
|
10
|
-
"aria-describedby"?: string;
|
|
11
|
-
disabled?: boolean;
|
|
12
|
-
};
|
|
13
|
-
size?: "medium" | "small";
|
|
14
|
-
}
|
|
15
|
-
export declare const SearchFieldContext: React.Context<SearchFieldContextProps | null>;
|
|
16
|
-
export interface SearchFieldProps extends FormFieldProps, React.HTMLAttributes<HTMLDivElement> {
|
|
17
|
-
/**
|
|
18
|
-
* SearchFieldInput & SearchFieldButton
|
|
19
|
-
*/
|
|
20
|
-
children: React.ReactNode;
|
|
21
|
-
/**
|
|
22
|
-
* If enabled shows the label and description for screenreaders only
|
|
23
|
-
*/
|
|
24
|
-
hideLabel?: boolean;
|
|
25
|
-
/**
|
|
26
|
-
* SearchField label
|
|
27
|
-
*/
|
|
28
|
-
label: React.ReactNode;
|
|
29
|
-
}
|
|
30
|
-
interface SearchFieldComponent extends React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<HTMLDivElement>> {
|
|
31
|
-
Button: SearchFieldButtonType;
|
|
32
|
-
Clear: SearchFieldClearButtonType;
|
|
33
|
-
Input: SearchFieldInputType;
|
|
34
|
-
}
|
|
35
|
-
declare const SearchField: SearchFieldComponent;
|
|
36
|
-
export default SearchField;
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
|
-
import cl from "classnames";
|
|
13
|
-
import React, { forwardRef } from "react";
|
|
14
|
-
import { BodyShort, Label, omit } from "../..";
|
|
15
|
-
import ErrorMessage from "../ErrorMessage";
|
|
16
|
-
import { useFormField } from "../useFormField";
|
|
17
|
-
import SearchFieldButton from "./SearchFieldButton";
|
|
18
|
-
import SearchFieldClearButton from "./SearchFieldClearButton";
|
|
19
|
-
import SearchFieldInput from "./SearchFieldInput";
|
|
20
|
-
export const SearchFieldContext = React.createContext(null);
|
|
21
|
-
const SearchField = forwardRef((props, ref) => {
|
|
22
|
-
const { inputProps, errorId, showErrorMsg, hasError, size, inputDescriptionId, } = useFormField(props, "searchfield");
|
|
23
|
-
const { className, hideLabel, children, label, description, error } = props, rest = __rest(props, ["className", "hideLabel", "children", "label", "description", "error"]);
|
|
24
|
-
return (React.createElement("div", Object.assign({ ref: ref }, omit(rest, ["id", "error", "errorId", "size", "disabled"]), { className: cl(className, "navds-form-field", `navds-form-field--${size !== null && size !== void 0 ? size : "medium"}`, "navds-search-field", {
|
|
25
|
-
"navds-search-field--error": hasError,
|
|
26
|
-
"navds-search-field--disabled": !!inputProps.disabled,
|
|
27
|
-
}) }),
|
|
28
|
-
React.createElement(Label, { htmlFor: inputProps.id, size: size, as: "label", className: cl("navds-text-field__label", {
|
|
29
|
-
"navds-sr-only": hideLabel,
|
|
30
|
-
}) }, label),
|
|
31
|
-
!!description && (React.createElement(BodyShort, { as: "div", className: cl("navds-text-field__description", {
|
|
32
|
-
"navds-sr-only": hideLabel,
|
|
33
|
-
}), id: inputDescriptionId, size: size }, description)),
|
|
34
|
-
React.createElement("div", { className: "navds-search-field__input-wrapper" },
|
|
35
|
-
React.createElement(SearchFieldContext.Provider, { value: {
|
|
36
|
-
inputProps,
|
|
37
|
-
size,
|
|
38
|
-
} }, children)),
|
|
39
|
-
React.createElement("div", { id: errorId, "aria-relevant": "additions removals", "aria-live": "polite" }, showErrorMsg && React.createElement(ErrorMessage, { size: size }, error))));
|
|
40
|
-
});
|
|
41
|
-
SearchField.Button = SearchFieldButton;
|
|
42
|
-
SearchField.Clear = SearchFieldClearButton;
|
|
43
|
-
SearchField.Input = SearchFieldInput;
|
|
44
|
-
export default SearchField;
|
|
45
|
-
//# sourceMappingURL=SearchField.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SearchField.js","sourceRoot":"","sources":["../../../src/form/search-field/SearchField.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,OAAO,CAAC;AAC/C,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAkB,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/D,OAAO,iBAA4C,MAAM,qBAAqB,CAAC;AAC/E,OAAO,sBAEN,MAAM,0BAA0B,CAAC;AAClC,OAAO,gBAA0C,MAAM,oBAAoB,CAAC;AAY5E,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,CAAC,aAAa,CACnD,IAAI,CACL,CAAC;AA4BF,MAAM,WAAW,GAAG,UAAU,CAC5B,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;IACb,MAAM,EACJ,UAAU,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,IAAI,EACJ,kBAAkB,GACnB,GAAG,YAAY,CAAC,KAAK,EAAE,aAAa,CAAC,CAAC;IAEvC,MAAM,EACJ,SAAS,EACT,SAAS,EACT,QAAQ,EACR,KAAK,EACL,WAAW,EACX,KAAK,KAEH,KAAK,EADJ,IAAI,UACL,KAAK,EARH,uEAQL,CAAQ,CAAC;IAEV,OAAO,CACL,2CACE,GAAG,EAAE,GAAG,IACJ,IAAI,CAAC,IAAI,EAAE,CAAC,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,UAAU,CAAC,CAAC,IAC9D,SAAS,EAAE,EAAE,CACX,SAAS,EACT,kBAAkB,EAClB,qBAAqB,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,QAAQ,EAAE,EACvC,oBAAoB,EACpB;YACE,2BAA2B,EAAE,QAAQ;YACrC,8BAA8B,EAAE,CAAC,CAAC,UAAU,CAAC,QAAQ;SACtD,CACF;QAED,oBAAC,KAAK,IACJ,OAAO,EAAE,UAAU,CAAC,EAAE,EACtB,IAAI,EAAE,IAAI,EACV,EAAE,EAAC,OAAO,EACV,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE;gBACvC,eAAe,EAAE,SAAS;aAC3B,CAAC,IAED,KAAK,CACA;QACP,CAAC,CAAC,WAAW,IAAI,CAChB,oBAAC,SAAS,IACR,EAAE,EAAC,KAAK,EACR,SAAS,EAAE,EAAE,CAAC,+BAA+B,EAAE;gBAC7C,eAAe,EAAE,SAAS;aAC3B,CAAC,EACF,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAE,IAAI,IAET,WAAW,CACF,CACb;QACD,6BAAK,SAAS,EAAC,mCAAmC;YAChD,oBAAC,kBAAkB,CAAC,QAAQ,IAC1B,KAAK,EAAE;oBACL,UAAU;oBACV,IAAI;iBACL,IAEA,QAAQ,CACmB,CAC1B;QACN,6BAAK,EAAE,EAAE,OAAO,mBAAgB,oBAAoB,eAAW,QAAQ,IACpE,YAAY,IAAI,oBAAC,YAAY,IAAC,IAAI,EAAE,IAAI,IAAG,KAAK,CAAgB,CAC7D,CACF,CACP,CAAC;AACJ,CAAC,CACsB,CAAC;AAE1B,WAAW,CAAC,MAAM,GAAG,iBAAiB,CAAC;AACvC,WAAW,CAAC,KAAK,GAAG,sBAAsB,CAAC;AAC3C,WAAW,CAAC,KAAK,GAAG,gBAAgB,CAAC;AAErC,eAAe,WAAW,CAAC"}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { ButtonProps } from "../..";
|
|
3
|
-
export interface SearchFieldButtonProps extends Omit<ButtonProps, "size"> {
|
|
4
|
-
/**
|
|
5
|
-
* Button text
|
|
6
|
-
* @example <Search /> <span>Søk</span>
|
|
7
|
-
*/
|
|
8
|
-
children: React.ReactNode;
|
|
9
|
-
/**
|
|
10
|
-
* Changes design and interactions
|
|
11
|
-
* @default "primary"
|
|
12
|
-
*/
|
|
13
|
-
variant?: "primary" | "secondary";
|
|
14
|
-
}
|
|
15
|
-
export declare type SearchFieldButtonType = React.ForwardRefExoticComponent<SearchFieldButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
16
|
-
declare const SearchFieldButton: SearchFieldButtonType;
|
|
17
|
-
export default SearchFieldButton;
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
|
-
import React, { forwardRef, useContext } from "react";
|
|
13
|
-
import cl from "classnames";
|
|
14
|
-
import { SearchFieldContext } from "./SearchField";
|
|
15
|
-
import { Button } from "../..";
|
|
16
|
-
const SearchFieldButton = forwardRef((_a, ref) => {
|
|
17
|
-
var { className, variant = "primary", disabled } = _a, rest = __rest(_a, ["className", "variant", "disabled"]);
|
|
18
|
-
const searchField = useContext(SearchFieldContext);
|
|
19
|
-
if (searchField === null) {
|
|
20
|
-
console.warn("SearchFieldButton has to be wrapped in <SearchField />");
|
|
21
|
-
return null;
|
|
22
|
-
}
|
|
23
|
-
const { size, inputProps } = searchField;
|
|
24
|
-
return (React.createElement(Button, Object.assign({ ref: ref, className: cl(className, "navds-search-field__button") }, rest, { size: size, variant: variant, disabled: disabled !== null && disabled !== void 0 ? disabled : inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled })));
|
|
25
|
-
});
|
|
26
|
-
export default SearchFieldButton;
|
|
27
|
-
//# sourceMappingURL=SearchFieldButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SearchFieldButton.js","sourceRoot":"","sources":["../../../src/form/search-field/SearchFieldButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,MAAM,EAAe,MAAM,OAAO,CAAC;AAmB5C,MAAM,iBAAiB,GAA0B,UAAU,CACzD,CAAC,EAAqD,EAAE,GAAG,EAAE,EAAE;QAA9D,EAAE,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,OAAW,EAAN,IAAI,cAAnD,oCAAqD,CAAF;IAClD,MAAM,WAAW,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAEnD,IAAI,WAAW,KAAK,IAAI,EAAE;QACxB,OAAO,CAAC,IAAI,CAAC,wDAAwD,CAAC,CAAC;QACvE,OAAO,IAAI,CAAC;KACb;IAED,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,WAAW,CAAC;IAEzC,OAAO,CACL,oBAAC,MAAM,kBACL,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,4BAA4B,CAAC,IAClD,IAAI,IACR,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,IAC1C,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,iBAAiB,CAAC"}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
import { ButtonProps } from "../..";
|
|
3
|
-
export interface SearchFieldClearButtonProps extends Omit<ButtonProps, "size"> {
|
|
4
|
-
/**
|
|
5
|
-
* Button text
|
|
6
|
-
* @example <Close /> <span>Søk</span>
|
|
7
|
-
*/
|
|
8
|
-
children: React.ReactNode;
|
|
9
|
-
/**
|
|
10
|
-
* Changes design and interactions
|
|
11
|
-
* @default "secondary"
|
|
12
|
-
*/
|
|
13
|
-
variant?: "primary" | "secondary";
|
|
14
|
-
}
|
|
15
|
-
export declare type SearchFieldClearButtonType = React.ForwardRefExoticComponent<SearchFieldClearButtonProps & React.RefAttributes<HTMLButtonElement>>;
|
|
16
|
-
declare const SearchFieldClearButton: SearchFieldClearButtonType;
|
|
17
|
-
export default SearchFieldClearButton;
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
|
-
import React, { forwardRef, useContext } from "react";
|
|
13
|
-
import cl from "classnames";
|
|
14
|
-
import { SearchFieldContext } from "./SearchField";
|
|
15
|
-
import { Button } from "../..";
|
|
16
|
-
const SearchFieldClearButton = forwardRef((_a, ref) => {
|
|
17
|
-
var { className, variant = "secondary", disabled } = _a, rest = __rest(_a, ["className", "variant", "disabled"]);
|
|
18
|
-
const searchField = useContext(SearchFieldContext);
|
|
19
|
-
if (searchField === null) {
|
|
20
|
-
console.warn("SearchFieldClearButton has to be wrapped in <SearchField />");
|
|
21
|
-
return null;
|
|
22
|
-
}
|
|
23
|
-
const { size, inputProps } = searchField;
|
|
24
|
-
return (React.createElement(Button, Object.assign({}, rest, { ref: ref, className: cl(className, "navds-search-field__clear-button"), size: size, variant: variant, disabled: disabled !== null && disabled !== void 0 ? disabled : inputProps === null || inputProps === void 0 ? void 0 : inputProps.disabled })));
|
|
25
|
-
});
|
|
26
|
-
export default SearchFieldClearButton;
|
|
27
|
-
//# sourceMappingURL=SearchFieldClearButton.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SearchFieldClearButton.js","sourceRoot":"","sources":["../../../src/form/search-field/SearchFieldClearButton.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,MAAM,EAAe,MAAM,OAAO,CAAC;AAmB5C,MAAM,sBAAsB,GAA+B,UAAU,CACnE,CAAC,EAAuD,EAAE,GAAG,EAAE,EAAE;QAAhE,EAAE,SAAS,EAAE,OAAO,GAAG,WAAW,EAAE,QAAQ,OAAW,EAAN,IAAI,cAArD,oCAAuD,CAAF;IACpD,MAAM,WAAW,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAEnD,IAAI,WAAW,KAAK,IAAI,EAAE;QACxB,OAAO,CAAC,IAAI,CACV,6DAA6D,CAC9D,CAAC;QACF,OAAO,IAAI,CAAC;KACb;IAED,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,WAAW,CAAC;IAEzC,OAAO,CACL,oBAAC,MAAM,oBACD,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CAAC,SAAS,EAAE,kCAAkC,CAAC,EAC5D,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,QAAQ,IAC1C,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,sBAAsB,CAAC"}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import React, { InputHTMLAttributes } from "react";
|
|
2
|
-
export interface SearchFieldInputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
3
|
-
}
|
|
4
|
-
export declare type SearchFieldInputType = React.ForwardRefExoticComponent<SearchFieldInputProps & React.RefAttributes<HTMLInputElement>>;
|
|
5
|
-
declare const SearchFieldInput: SearchFieldInputType;
|
|
6
|
-
export default SearchFieldInput;
|
|
@@ -1,26 +0,0 @@
|
|
|
1
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
-
var t = {};
|
|
3
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
-
t[p] = s[p];
|
|
5
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
-
t[p[i]] = s[p[i]];
|
|
9
|
-
}
|
|
10
|
-
return t;
|
|
11
|
-
};
|
|
12
|
-
import React, { forwardRef, useContext } from "react";
|
|
13
|
-
import cl from "classnames";
|
|
14
|
-
import { SearchFieldContext } from "./SearchField";
|
|
15
|
-
const SearchFieldInput = forwardRef((_a, ref) => {
|
|
16
|
-
var { className } = _a, rest = __rest(_a, ["className"]);
|
|
17
|
-
const searchField = useContext(SearchFieldContext);
|
|
18
|
-
if (searchField === null) {
|
|
19
|
-
console.warn("SearchFieldInput has to be wrapped in <SearchField />");
|
|
20
|
-
return null;
|
|
21
|
-
}
|
|
22
|
-
const { size, inputProps } = searchField;
|
|
23
|
-
return (React.createElement("input", Object.assign({}, rest, inputProps, { type: "search", role: "searchbox", ref: ref, className: cl(className, "navds-search-field__input", "navds-text-field__input", "navds-body-short", `navds-body-${size !== null && size !== void 0 ? size : "medium"}`) })));
|
|
24
|
-
});
|
|
25
|
-
export default SearchFieldInput;
|
|
26
|
-
//# sourceMappingURL=SearchFieldInput.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SearchFieldInput.js","sourceRoot":"","sources":["../../../src/form/search-field/SearchFieldInput.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAuB,UAAU,EAAE,MAAM,OAAO,CAAC;AAC3E,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,gBAAgB,GAAyB,UAAU,CACvD,CAAC,EAAsB,EAAE,GAAG,EAAE,EAAE;QAA/B,EAAE,SAAS,OAAW,EAAN,IAAI,cAApB,aAAsB,CAAF;IACnB,MAAM,WAAW,GAAG,UAAU,CAAC,kBAAkB,CAAC,CAAC;IAEnD,IAAI,WAAW,KAAK,IAAI,EAAE;QACxB,OAAO,CAAC,IAAI,CAAC,uDAAuD,CAAC,CAAC;QACtE,OAAO,IAAI,CAAC;KACb;IAED,MAAM,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,WAAW,CAAC;IAEzC,OAAO,CACL,+CACM,IAAI,EACJ,UAAU,IACd,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,WAAW,EAChB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,SAAS,EACT,2BAA2B,EAC3B,yBAAyB,EACzB,kBAAkB,EAClB,cAAc,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,QAAQ,EAAE,CACjC,IACD,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/form/search-field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAoB,MAAM,eAAe,CAAC;AACzE,cAAc,eAAe,CAAC"}
|
|
@@ -1,132 +0,0 @@
|
|
|
1
|
-
import cl from "classnames";
|
|
2
|
-
import React, { forwardRef } from "react";
|
|
3
|
-
import { BodyShort, Label, omit } from "../..";
|
|
4
|
-
import ErrorMessage from "../ErrorMessage";
|
|
5
|
-
import { FormFieldProps, useFormField } from "../useFormField";
|
|
6
|
-
import SearchFieldButton, { SearchFieldButtonType } from "./SearchFieldButton";
|
|
7
|
-
import SearchFieldClearButton, {
|
|
8
|
-
SearchFieldClearButtonType,
|
|
9
|
-
} from "./SearchFieldClearButton";
|
|
10
|
-
import SearchFieldInput, { SearchFieldInputType } from "./SearchFieldInput";
|
|
11
|
-
|
|
12
|
-
export interface SearchFieldContextProps {
|
|
13
|
-
inputProps: {
|
|
14
|
-
id: string;
|
|
15
|
-
"aria-invalid": boolean;
|
|
16
|
-
"aria-describedby"?: string;
|
|
17
|
-
disabled?: boolean;
|
|
18
|
-
};
|
|
19
|
-
size?: "medium" | "small";
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export const SearchFieldContext = React.createContext<SearchFieldContextProps | null>(
|
|
23
|
-
null
|
|
24
|
-
);
|
|
25
|
-
|
|
26
|
-
export interface SearchFieldProps
|
|
27
|
-
extends FormFieldProps,
|
|
28
|
-
React.HTMLAttributes<HTMLDivElement> {
|
|
29
|
-
/**
|
|
30
|
-
* SearchFieldInput & SearchFieldButton
|
|
31
|
-
*/
|
|
32
|
-
children: React.ReactNode;
|
|
33
|
-
/**
|
|
34
|
-
* If enabled shows the label and description for screenreaders only
|
|
35
|
-
*/
|
|
36
|
-
hideLabel?: boolean;
|
|
37
|
-
/**
|
|
38
|
-
* SearchField label
|
|
39
|
-
*/
|
|
40
|
-
label: React.ReactNode;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
interface SearchFieldComponent
|
|
44
|
-
extends React.ForwardRefExoticComponent<
|
|
45
|
-
SearchFieldProps & React.RefAttributes<HTMLDivElement>
|
|
46
|
-
> {
|
|
47
|
-
Button: SearchFieldButtonType;
|
|
48
|
-
Clear: SearchFieldClearButtonType;
|
|
49
|
-
Input: SearchFieldInputType;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
|
|
53
|
-
(props, ref) => {
|
|
54
|
-
const {
|
|
55
|
-
inputProps,
|
|
56
|
-
errorId,
|
|
57
|
-
showErrorMsg,
|
|
58
|
-
hasError,
|
|
59
|
-
size,
|
|
60
|
-
inputDescriptionId,
|
|
61
|
-
} = useFormField(props, "searchfield");
|
|
62
|
-
|
|
63
|
-
const {
|
|
64
|
-
className,
|
|
65
|
-
hideLabel,
|
|
66
|
-
children,
|
|
67
|
-
label,
|
|
68
|
-
description,
|
|
69
|
-
error,
|
|
70
|
-
...rest
|
|
71
|
-
} = props;
|
|
72
|
-
|
|
73
|
-
return (
|
|
74
|
-
<div
|
|
75
|
-
ref={ref}
|
|
76
|
-
{...omit(rest, ["id", "error", "errorId", "size", "disabled"])}
|
|
77
|
-
className={cl(
|
|
78
|
-
className,
|
|
79
|
-
"navds-form-field",
|
|
80
|
-
`navds-form-field--${size ?? "medium"}`,
|
|
81
|
-
"navds-search-field",
|
|
82
|
-
{
|
|
83
|
-
"navds-search-field--error": hasError,
|
|
84
|
-
"navds-search-field--disabled": !!inputProps.disabled,
|
|
85
|
-
}
|
|
86
|
-
)}
|
|
87
|
-
>
|
|
88
|
-
<Label
|
|
89
|
-
htmlFor={inputProps.id}
|
|
90
|
-
size={size}
|
|
91
|
-
as="label"
|
|
92
|
-
className={cl("navds-text-field__label", {
|
|
93
|
-
"navds-sr-only": hideLabel,
|
|
94
|
-
})}
|
|
95
|
-
>
|
|
96
|
-
{label}
|
|
97
|
-
</Label>
|
|
98
|
-
{!!description && (
|
|
99
|
-
<BodyShort
|
|
100
|
-
as="div"
|
|
101
|
-
className={cl("navds-text-field__description", {
|
|
102
|
-
"navds-sr-only": hideLabel,
|
|
103
|
-
})}
|
|
104
|
-
id={inputDescriptionId}
|
|
105
|
-
size={size}
|
|
106
|
-
>
|
|
107
|
-
{description}
|
|
108
|
-
</BodyShort>
|
|
109
|
-
)}
|
|
110
|
-
<div className="navds-search-field__input-wrapper">
|
|
111
|
-
<SearchFieldContext.Provider
|
|
112
|
-
value={{
|
|
113
|
-
inputProps,
|
|
114
|
-
size,
|
|
115
|
-
}}
|
|
116
|
-
>
|
|
117
|
-
{children}
|
|
118
|
-
</SearchFieldContext.Provider>
|
|
119
|
-
</div>
|
|
120
|
-
<div id={errorId} aria-relevant="additions removals" aria-live="polite">
|
|
121
|
-
{showErrorMsg && <ErrorMessage size={size}>{error}</ErrorMessage>}
|
|
122
|
-
</div>
|
|
123
|
-
</div>
|
|
124
|
-
);
|
|
125
|
-
}
|
|
126
|
-
) as SearchFieldComponent;
|
|
127
|
-
|
|
128
|
-
SearchField.Button = SearchFieldButton;
|
|
129
|
-
SearchField.Clear = SearchFieldClearButton;
|
|
130
|
-
SearchField.Input = SearchFieldInput;
|
|
131
|
-
|
|
132
|
-
export default SearchField;
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef, useContext } from "react";
|
|
2
|
-
import cl from "classnames";
|
|
3
|
-
import { SearchFieldContext } from "./SearchField";
|
|
4
|
-
import { Button, ButtonProps } from "../..";
|
|
5
|
-
|
|
6
|
-
export interface SearchFieldButtonProps extends Omit<ButtonProps, "size"> {
|
|
7
|
-
/**
|
|
8
|
-
* Button text
|
|
9
|
-
* @example <Search /> <span>Søk</span>
|
|
10
|
-
*/
|
|
11
|
-
children: React.ReactNode;
|
|
12
|
-
/**
|
|
13
|
-
* Changes design and interactions
|
|
14
|
-
* @default "primary"
|
|
15
|
-
*/
|
|
16
|
-
variant?: "primary" | "secondary";
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export type SearchFieldButtonType = React.ForwardRefExoticComponent<
|
|
20
|
-
SearchFieldButtonProps & React.RefAttributes<HTMLButtonElement>
|
|
21
|
-
>;
|
|
22
|
-
|
|
23
|
-
const SearchFieldButton: SearchFieldButtonType = forwardRef(
|
|
24
|
-
({ className, variant = "primary", disabled, ...rest }, ref) => {
|
|
25
|
-
const searchField = useContext(SearchFieldContext);
|
|
26
|
-
|
|
27
|
-
if (searchField === null) {
|
|
28
|
-
console.warn("SearchFieldButton has to be wrapped in <SearchField />");
|
|
29
|
-
return null;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
const { size, inputProps } = searchField;
|
|
33
|
-
|
|
34
|
-
return (
|
|
35
|
-
<Button
|
|
36
|
-
ref={ref}
|
|
37
|
-
className={cl(className, "navds-search-field__button")}
|
|
38
|
-
{...rest}
|
|
39
|
-
size={size}
|
|
40
|
-
variant={variant}
|
|
41
|
-
disabled={disabled ?? inputProps?.disabled}
|
|
42
|
-
/>
|
|
43
|
-
);
|
|
44
|
-
}
|
|
45
|
-
);
|
|
46
|
-
|
|
47
|
-
export default SearchFieldButton;
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef, useContext } from "react";
|
|
2
|
-
import cl from "classnames";
|
|
3
|
-
import { SearchFieldContext } from "./SearchField";
|
|
4
|
-
import { Button, ButtonProps } from "../..";
|
|
5
|
-
|
|
6
|
-
export interface SearchFieldClearButtonProps extends Omit<ButtonProps, "size"> {
|
|
7
|
-
/**
|
|
8
|
-
* Button text
|
|
9
|
-
* @example <Close /> <span>Søk</span>
|
|
10
|
-
*/
|
|
11
|
-
children: React.ReactNode;
|
|
12
|
-
/**
|
|
13
|
-
* Changes design and interactions
|
|
14
|
-
* @default "secondary"
|
|
15
|
-
*/
|
|
16
|
-
variant?: "primary" | "secondary";
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export type SearchFieldClearButtonType = React.ForwardRefExoticComponent<
|
|
20
|
-
SearchFieldClearButtonProps & React.RefAttributes<HTMLButtonElement>
|
|
21
|
-
>;
|
|
22
|
-
|
|
23
|
-
const SearchFieldClearButton: SearchFieldClearButtonType = forwardRef(
|
|
24
|
-
({ className, variant = "secondary", disabled, ...rest }, ref) => {
|
|
25
|
-
const searchField = useContext(SearchFieldContext);
|
|
26
|
-
|
|
27
|
-
if (searchField === null) {
|
|
28
|
-
console.warn(
|
|
29
|
-
"SearchFieldClearButton has to be wrapped in <SearchField />"
|
|
30
|
-
);
|
|
31
|
-
return null;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
const { size, inputProps } = searchField;
|
|
35
|
-
|
|
36
|
-
return (
|
|
37
|
-
<Button
|
|
38
|
-
{...rest}
|
|
39
|
-
ref={ref}
|
|
40
|
-
className={cl(className, "navds-search-field__clear-button")}
|
|
41
|
-
size={size}
|
|
42
|
-
variant={variant}
|
|
43
|
-
disabled={disabled ?? inputProps?.disabled}
|
|
44
|
-
/>
|
|
45
|
-
);
|
|
46
|
-
}
|
|
47
|
-
);
|
|
48
|
-
|
|
49
|
-
export default SearchFieldClearButton;
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import React, { forwardRef, InputHTMLAttributes, useContext } from "react";
|
|
2
|
-
import cl from "classnames";
|
|
3
|
-
import { SearchFieldContext } from "./SearchField";
|
|
4
|
-
|
|
5
|
-
export interface SearchFieldInputProps
|
|
6
|
-
extends InputHTMLAttributes<HTMLInputElement> {}
|
|
7
|
-
|
|
8
|
-
export type SearchFieldInputType = React.ForwardRefExoticComponent<
|
|
9
|
-
SearchFieldInputProps & React.RefAttributes<HTMLInputElement>
|
|
10
|
-
>;
|
|
11
|
-
|
|
12
|
-
const SearchFieldInput: SearchFieldInputType = forwardRef(
|
|
13
|
-
({ className, ...rest }, ref) => {
|
|
14
|
-
const searchField = useContext(SearchFieldContext);
|
|
15
|
-
|
|
16
|
-
if (searchField === null) {
|
|
17
|
-
console.warn("SearchFieldInput has to be wrapped in <SearchField />");
|
|
18
|
-
return null;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
const { size, inputProps } = searchField;
|
|
22
|
-
|
|
23
|
-
return (
|
|
24
|
-
<input
|
|
25
|
-
{...rest}
|
|
26
|
-
{...inputProps}
|
|
27
|
-
type="search"
|
|
28
|
-
role="searchbox"
|
|
29
|
-
ref={ref}
|
|
30
|
-
className={cl(
|
|
31
|
-
className,
|
|
32
|
-
"navds-search-field__input",
|
|
33
|
-
"navds-text-field__input",
|
|
34
|
-
"navds-body-short",
|
|
35
|
-
`navds-body-${size ?? "medium"}`
|
|
36
|
-
)}
|
|
37
|
-
/>
|
|
38
|
-
);
|
|
39
|
-
}
|
|
40
|
-
);
|
|
41
|
-
|
|
42
|
-
export default SearchFieldInput;
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import React, { useState } from "react";
|
|
2
|
-
import { Close, Search } from "@navikt/ds-icons";
|
|
3
|
-
import { SearchField } from "../index";
|
|
4
|
-
|
|
5
|
-
export const Example = ({ size = "medium" }: { size: "medium" | "small" }) => {
|
|
6
|
-
const [value, setValue] = useState("");
|
|
7
|
-
|
|
8
|
-
return (
|
|
9
|
-
<SearchField size={size} label="Skriv i søkefeltet for å vise clearbutton">
|
|
10
|
-
<SearchField.Input
|
|
11
|
-
value={value}
|
|
12
|
-
onChange={(e) => setValue(e.target.value)}
|
|
13
|
-
/>
|
|
14
|
-
{!!value && (
|
|
15
|
-
<SearchField.Clear onClick={() => setValue("")}>
|
|
16
|
-
<Close />
|
|
17
|
-
Tøm
|
|
18
|
-
</SearchField.Clear>
|
|
19
|
-
)}
|
|
20
|
-
<SearchField.Button>
|
|
21
|
-
<Search /> Søk
|
|
22
|
-
</SearchField.Button>
|
|
23
|
-
</SearchField>
|
|
24
|
-
);
|
|
25
|
-
};
|