@navikt/ds-react 0.16.20 → 0.17.2

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.
Files changed (146) hide show
  1. package/cjs/accordion/Accordion.js +5 -1
  2. package/cjs/accordion/AccordionContent.js +5 -1
  3. package/cjs/accordion/AccordionHeader.js +5 -1
  4. package/cjs/accordion/AccordionItem.js +5 -1
  5. package/cjs/accordion/index.js +5 -1
  6. package/cjs/alert/Alert.js +5 -1
  7. package/cjs/alert/index.js +5 -1
  8. package/cjs/button/Button.js +5 -1
  9. package/cjs/button/index.js +5 -1
  10. package/cjs/card/MicroCard.js +5 -1
  11. package/cjs/card/index.js +5 -1
  12. package/cjs/form/ConfirmationPanel.js +5 -1
  13. package/cjs/form/Fieldset/Fieldset.js +5 -1
  14. package/cjs/form/Select.js +5 -1
  15. package/cjs/form/Switch.js +5 -1
  16. package/cjs/form/TextField.js +5 -1
  17. package/cjs/form/Textarea.js +5 -1
  18. package/cjs/form/checkbox/Checkbox.js +5 -1
  19. package/cjs/form/checkbox/CheckboxGroup.js +5 -1
  20. package/cjs/form/error-summary/ErrorSummary.js +5 -1
  21. package/cjs/form/error-summary/ErrorSummaryItem.js +5 -1
  22. package/cjs/form/error-summary/index.js +5 -1
  23. package/cjs/form/index.js +3 -3
  24. package/cjs/form/radio/Radio.js +5 -1
  25. package/cjs/form/radio/RadioGroup.js +5 -1
  26. package/cjs/form/search/Search.js +104 -0
  27. package/cjs/form/{search-field/SearchFieldButton.js → search/SearchButton.js} +19 -11
  28. package/cjs/form/search/index.js +8 -0
  29. package/cjs/form/search/package.json +6 -0
  30. package/cjs/form/search/useSearch.js +31 -0
  31. package/cjs/grid/Cell.js +5 -1
  32. package/cjs/grid/ContentContainer.js +5 -1
  33. package/cjs/grid/Grid.js +5 -1
  34. package/cjs/grid/index.js +5 -1
  35. package/cjs/guide-panel/Guide.js +5 -1
  36. package/cjs/guide-panel/GuidePanel.js +5 -1
  37. package/cjs/guide-panel/index.js +5 -1
  38. package/cjs/help-text/HelpText.js +5 -1
  39. package/cjs/help-text/index.js +5 -1
  40. package/cjs/index.js +5 -1
  41. package/cjs/link/Link.js +5 -1
  42. package/cjs/link/index.js +5 -1
  43. package/cjs/link-panel/LinkPanel.js +5 -1
  44. package/cjs/link-panel/LinkPanelDescription.js +5 -1
  45. package/cjs/link-panel/LinkPanelTitle.js +5 -1
  46. package/cjs/link-panel/index.js +5 -1
  47. package/cjs/loader/Loader.js +5 -1
  48. package/cjs/loader/index.js +5 -1
  49. package/cjs/menu/Menu.js +5 -1
  50. package/cjs/menu/MenuCollapse.js +5 -1
  51. package/cjs/menu/MenuItem.js +5 -1
  52. package/cjs/modal/Modal.js +5 -1
  53. package/cjs/modal/ModalContent.js +5 -1
  54. package/cjs/modal/index.js +5 -1
  55. package/cjs/page-header/PageHeader.js +5 -1
  56. package/cjs/page-header/index.js +5 -1
  57. package/cjs/pagination/index.js +5 -1
  58. package/cjs/panel/Panel.js +5 -1
  59. package/cjs/panel/index.js +5 -1
  60. package/cjs/popover/Popover.js +5 -1
  61. package/cjs/popover/PopoverContent.js +5 -1
  62. package/cjs/popover/index.js +5 -1
  63. package/cjs/speech-bubble/Bubble.js +5 -1
  64. package/cjs/speech-bubble/SpeechBubble.js +5 -1
  65. package/cjs/speech-bubble/index.js +5 -1
  66. package/cjs/step-indicator/Step.js +5 -1
  67. package/cjs/step-indicator/StepIndicator.js +5 -1
  68. package/cjs/step-indicator/index.js +5 -1
  69. package/cjs/table/Body.js +5 -1
  70. package/cjs/table/ColumnHeader.js +5 -1
  71. package/cjs/table/DataCell.js +5 -1
  72. package/cjs/table/Header.js +5 -1
  73. package/cjs/table/HeaderCell.js +5 -1
  74. package/cjs/table/Row.js +5 -1
  75. package/cjs/table/Table.js +5 -1
  76. package/cjs/table/index.js +5 -1
  77. package/cjs/tag/Tag.js +5 -1
  78. package/cjs/tag/index.js +5 -1
  79. package/cjs/toggle-group/ToggleGroup.js +5 -1
  80. package/cjs/toggle-group/ToggleItem.js +5 -1
  81. package/cjs/typography/BodyLong.js +5 -1
  82. package/cjs/typography/BodyShort.js +5 -1
  83. package/cjs/typography/Detail.js +5 -1
  84. package/cjs/typography/Heading.js +5 -1
  85. package/cjs/typography/Ingress.js +5 -1
  86. package/cjs/typography/Label.js +5 -1
  87. package/cjs/util/index.js +20 -2
  88. package/esm/form/index.d.ts +1 -1
  89. package/esm/form/index.js +1 -1
  90. package/esm/form/index.js.map +1 -1
  91. package/esm/form/search/Search.d.ts +61 -0
  92. package/esm/form/search/Search.js +76 -0
  93. package/esm/form/search/Search.js.map +1 -0
  94. package/esm/form/search/SearchButton.d.ts +11 -0
  95. package/esm/form/search/SearchButton.js +31 -0
  96. package/esm/form/search/SearchButton.js.map +1 -0
  97. package/esm/form/search/index.d.ts +1 -0
  98. package/esm/form/search/index.js +2 -0
  99. package/esm/form/search/index.js.map +1 -0
  100. package/esm/form/search/useSearch.d.ts +10 -0
  101. package/esm/form/search/useSearch.js +25 -0
  102. package/esm/form/search/useSearch.js.map +1 -0
  103. package/esm/help-text/HelpText.js.map +1 -1
  104. package/esm/modal/Modal.d.ts +4 -0
  105. package/esm/modal/Modal.js.map +1 -1
  106. package/esm/table/ColumnHeader.js.map +1 -1
  107. package/esm/util/index.d.ts +5 -0
  108. package/esm/util/index.js +13 -0
  109. package/esm/util/index.js.map +1 -1
  110. package/package.json +2 -2
  111. package/src/form/index.ts +1 -1
  112. package/src/form/search/Search.tsx +236 -0
  113. package/src/form/search/SearchButton.tsx +48 -0
  114. package/src/form/search/index.ts +1 -0
  115. package/src/form/search/search.stories.tsx +91 -0
  116. package/src/form/search/useSearch.ts +31 -0
  117. package/src/modal/Modal.tsx +4 -0
  118. package/src/util/index.ts +33 -0
  119. package/cjs/form/search-field/SearchField.js +0 -69
  120. package/cjs/form/search-field/SearchFieldClearButton.js +0 -50
  121. package/cjs/form/search-field/SearchFieldInput.js +0 -49
  122. package/cjs/form/search-field/index.js +0 -19
  123. package/cjs/form/search-field/package.json +0 -6
  124. package/esm/form/search-field/SearchField.d.ts +0 -36
  125. package/esm/form/search-field/SearchField.js +0 -45
  126. package/esm/form/search-field/SearchField.js.map +0 -1
  127. package/esm/form/search-field/SearchFieldButton.d.ts +0 -17
  128. package/esm/form/search-field/SearchFieldButton.js +0 -27
  129. package/esm/form/search-field/SearchFieldButton.js.map +0 -1
  130. package/esm/form/search-field/SearchFieldClearButton.d.ts +0 -17
  131. package/esm/form/search-field/SearchFieldClearButton.js +0 -27
  132. package/esm/form/search-field/SearchFieldClearButton.js.map +0 -1
  133. package/esm/form/search-field/SearchFieldInput.d.ts +0 -6
  134. package/esm/form/search-field/SearchFieldInput.js +0 -26
  135. package/esm/form/search-field/SearchFieldInput.js.map +0 -1
  136. package/esm/form/search-field/index.d.ts +0 -2
  137. package/esm/form/search-field/index.js +0 -3
  138. package/esm/form/search-field/index.js.map +0 -1
  139. package/src/form/search-field/SearchField.tsx +0 -132
  140. package/src/form/search-field/SearchFieldButton.tsx +0 -47
  141. package/src/form/search-field/SearchFieldClearButton.tsx +0 -49
  142. package/src/form/search-field/SearchFieldInput.tsx +0 -42
  143. package/src/form/search-field/index.ts +0 -2
  144. package/src/form/search-field/stories/search-field-example.tsx +0 -25
  145. package/src/form/search-field/stories/search-field.stories.mdx +0 -156
  146. package/src/form/search-field/stories/search-field.stories.tsx +0 -199
@@ -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,2 +0,0 @@
1
- export { default as SearchField, SearchFieldProps } from "./SearchField";
2
- export * from "./SearchField";
@@ -1,3 +0,0 @@
1
- export { default as SearchField } from "./SearchField";
2
- export * from "./SearchField";
3
- //# sourceMappingURL=index.js.map
@@ -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,2 +0,0 @@
1
- export { default as SearchField, SearchFieldProps } from "./SearchField";
2
- export * from "./SearchField";
@@ -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
- };