@koobiq/react-components 0.27.0 → 0.27.1

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 (5) hide show
  1. package/dist/components/Autocomplete/Autocomplete.js +26 -10
  2. package/dist/components/SearchInput/SearchInput.js +25 -9
  3. package/dist/components/Select/Select.js +32 -16
  4. package/dist/components/SelectNext/Select.js +32 -16
  5. package/package.json +5 -5
package/dist/components/Autocomplete/Autocomplete.js CHANGED
@@ -3,7 +3,7 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
3
3
  import { forwardRef, useRef, useCallback } from "react";
4
4
  import { useDOMRef, useFilter, useElementSize, mergeProps, clsx } from "@koobiq/react-core";
5
5
  import { IconChevronDownS16 } from "@koobiq/react-icons";
6
- import { useComboBoxState, removeDataAttributes, useSlottedContext, FormContext, useComboBox, FieldErrorContext } from "@koobiq/react-primitives";
6
+ import { useComboBoxState, removeDataAttributes, useSlottedContext, FormContext, useComboBox, Provider, ButtonContext, FieldErrorContext, DEFAULT_SLOT } from "@koobiq/react-primitives";
7
7
  import { PopoverInner } from "../Popover/PopoverInner.js";
8
8
  import s from "./Autocomplete.module.css.js";
9
9
  import { ListInner, List } from "../List/List.js";
@@ -200,15 +200,31 @@ function AutocompleteRender(props, ref) {
200
200
  },
201
201
  slotProps?.input
202
202
  );
203
- return /* @__PURE__ */ jsxs(FormField, { ...rootProps, children: [
204
- /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
205
- /* @__PURE__ */ jsxs("div", { className: s.body, children: [
206
- /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Input, { ...inputProps }) }),
207
- /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
208
- /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
209
- ] }),
210
- /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(ListInner, { ...listProps }) })
211
- ] });
203
+ return /* @__PURE__ */ jsx(
204
+ Provider,
205
+ {
206
+ values: [
207
+ [
208
+ ButtonContext,
209
+ {
210
+ slots: {
211
+ [DEFAULT_SLOT]: {},
212
+ "clear-button": {}
213
+ }
214
+ }
215
+ ]
216
+ ],
217
+ children: /* @__PURE__ */ jsxs(FormField, { ...rootProps, children: [
218
+ /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
219
+ /* @__PURE__ */ jsxs("div", { className: s.body, children: [
220
+ /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Input, { ...inputProps }) }),
221
+ /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
222
+ /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
223
+ ] }),
224
+ /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(ListInner, { ...listProps }) })
225
+ ] })
226
+ }
227
+ );
212
228
  }
213
229
  const AutocompleteComponent = forwardRef(
214
230
  AutocompleteRender
package/dist/components/SearchInput/SearchInput.js CHANGED
@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
3
3
  import { forwardRef } from "react";
4
4
  import { useDOMRef, mergeProps, clsx } from "@koobiq/react-core";
5
5
  import { IconMagnifyingGlass16 } from "@koobiq/react-icons";
6
- import { useSearchFieldState, removeDataAttributes, useSlottedContext, FormContext, useSearchField, FieldErrorContext } from "@koobiq/react-primitives";
6
+ import { useSearchFieldState, removeDataAttributes, useSlottedContext, FormContext, useSearchField, Provider, ButtonContext, FieldErrorContext, DEFAULT_SLOT } from "@koobiq/react-primitives";
7
7
  import s from "./SearchInput.module.css.js";
8
8
  import { useForm } from "../Form/FormContext.js";
9
9
  import { FormFieldClearButton } from "../FormField/FormFieldClearButton/FormFieldClearButton.js";
@@ -122,14 +122,30 @@ const SearchInput = forwardRef(
122
122
  errorMessagePropsAria,
123
123
  slotProps?.errorMessage
124
124
  );
125
- return /* @__PURE__ */ jsxs(FormField, { ...rootProps, children: [
126
- /* @__PURE__ */ jsx(FormField.Label, { ...labelProps, children: label }),
127
- /* @__PURE__ */ jsxs("div", { className: s.body, children: [
128
- /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Input, { ...inputProps }) }),
129
- /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
130
- /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
131
- ] })
132
- ] });
125
+ return /* @__PURE__ */ jsx(
126
+ Provider,
127
+ {
128
+ values: [
129
+ [
130
+ ButtonContext,
131
+ {
132
+ slots: {
133
+ [DEFAULT_SLOT]: {},
134
+ "clear-button": {}
135
+ }
136
+ }
137
+ ]
138
+ ],
139
+ children: /* @__PURE__ */ jsxs(FormField, { ...rootProps, children: [
140
+ /* @__PURE__ */ jsx(FormField.Label, { ...labelProps, children: label }),
141
+ /* @__PURE__ */ jsxs("div", { className: s.body, children: [
142
+ /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Input, { ...inputProps }) }),
143
+ /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
144
+ /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
145
+ ] })
146
+ ] })
147
+ }
148
+ );
133
149
  }
134
150
  );
135
151
  SearchInput.displayName = "SearchInput";
package/dist/components/Select/Select.js CHANGED
@@ -3,7 +3,7 @@ import { jsxs, Fragment, jsx } from "react/jsx-runtime";
3
3
  import { forwardRef, useCallback } from "react";
4
4
  import { useDOMRef, useElementSize, mergeProps } from "@koobiq/react-core";
5
5
  import { IconChevronDownS16 } from "@koobiq/react-icons";
6
- import { useSlottedContext, FormContext, useMultiSelectState, removeDataAttributes, useMultiSelect, FieldErrorContext } from "@koobiq/react-primitives";
6
+ import { useSlottedContext, FormContext, useMultiSelectState, removeDataAttributes, useMultiSelect, Provider, ButtonContext, FieldErrorContext, DEFAULT_SLOT } from "@koobiq/react-primitives";
7
7
  import { PopoverInner } from "../Popover/PopoverInner.js";
8
8
  import s from "./Select.module.css.js";
9
9
  import { SelectList } from "./components/SelectList/SelectList.js";
@@ -185,21 +185,37 @@ function SelectRender(props, ref) {
185
185
  return state2.selectedItems[0].textValue;
186
186
  };
187
187
  const renderValue = renderValueProp || renderDefaultValue;
188
- return /* @__PURE__ */ jsxs(Fragment, { children: [
189
- /* @__PURE__ */ jsxs(FormField, { ...rootProps, children: [
190
- /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
191
- /* @__PURE__ */ jsxs("div", { className: s.body, children: [
192
- /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Select, { ...controlProps, children: renderValue(state, {
193
- isInvalid,
194
- isDisabled: props.isDisabled,
195
- isRequired: props.isRequired
196
- }) }) }),
197
- /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
198
- /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
199
- ] })
200
- ] }),
201
- /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(SelectList, { ...listProps }) })
202
- ] });
188
+ return /* @__PURE__ */ jsxs(
189
+ Provider,
190
+ {
191
+ values: [
192
+ [
193
+ ButtonContext,
194
+ {
195
+ slots: {
196
+ [DEFAULT_SLOT]: {},
197
+ "clear-button": {}
198
+ }
199
+ }
200
+ ]
201
+ ],
202
+ children: [
203
+ /* @__PURE__ */ jsxs(FormField, { ...rootProps, children: [
204
+ /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
205
+ /* @__PURE__ */ jsxs("div", { className: s.body, children: [
206
+ /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Select, { ...controlProps, children: renderValue(state, {
207
+ isInvalid,
208
+ isDisabled: props.isDisabled,
209
+ isRequired: props.isRequired
210
+ }) }) }),
211
+ /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
212
+ /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
213
+ ] })
214
+ ] }),
215
+ /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(SelectList, { ...listProps }) })
216
+ ]
217
+ }
218
+ );
203
219
  }
204
220
  const SelectComponent = forwardRef(SelectRender);
205
221
  const Select = SelectComponent;
package/dist/components/SelectNext/Select.js CHANGED
@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
3
3
  import { forwardRef, useCallback } from "react";
4
4
  import { useDOMRef, useElementSize, mergeProps } from "@koobiq/react-core";
5
5
  import { IconChevronDownS16 } from "@koobiq/react-icons";
6
- import { CollectionBuilder, Collection, useSelectState, removeDataAttributes, useSlottedContext, FormContext, useSelect, FieldErrorContext } from "@koobiq/react-primitives";
6
+ import { CollectionBuilder, Collection, useSelectState, removeDataAttributes, useSlottedContext, FormContext, useSelect, Provider, ButtonContext, FieldErrorContext, DEFAULT_SLOT } from "@koobiq/react-primitives";
7
7
  import { PopoverInner } from "../Popover/PopoverInner.js";
8
8
  import s from "./Select.module.css.js";
9
9
  import { SelectList } from "./components/SelectList/SelectList.js";
@@ -197,21 +197,37 @@ function SelectInner({
197
197
  return state.selectedItems[0].textValue;
198
198
  };
199
199
  const renderValue = renderValueProp || renderDefaultValue;
200
- return /* @__PURE__ */ jsxs(Fragment, { children: [
201
- /* @__PURE__ */ jsxs(FormField, { ...rootProps, children: [
202
- /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
203
- /* @__PURE__ */ jsxs("div", { className: s.body, children: [
204
- /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Select, { ...controlProps, children: renderValue(inState, {
205
- isInvalid,
206
- isDisabled: props.isDisabled,
207
- isRequired: props.isRequired
208
- }) }) }),
209
- /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
210
- /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
211
- ] })
212
- ] }),
213
- /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(SelectList, { ...listProps }) })
214
- ] });
200
+ return /* @__PURE__ */ jsxs(
201
+ Provider,
202
+ {
203
+ values: [
204
+ [
205
+ ButtonContext,
206
+ {
207
+ slots: {
208
+ [DEFAULT_SLOT]: {},
209
+ "clear-button": {}
210
+ }
211
+ }
212
+ ]
213
+ ],
214
+ children: [
215
+ /* @__PURE__ */ jsxs(FormField, { ...rootProps, children: [
216
+ /* @__PURE__ */ jsx(FormField.Label, { ...labelProps }),
217
+ /* @__PURE__ */ jsxs("div", { className: s.body, children: [
218
+ /* @__PURE__ */ jsx(FormField.ControlGroup, { ...groupProps, children: /* @__PURE__ */ jsx(FormField.Select, { ...controlProps, children: renderValue(inState, {
219
+ isInvalid,
220
+ isDisabled: props.isDisabled,
221
+ isRequired: props.isRequired
222
+ }) }) }),
223
+ /* @__PURE__ */ jsx(FieldErrorContext.Provider, { value: validation, children: /* @__PURE__ */ jsx(FormField.Error, { ...errorProps }) }),
224
+ /* @__PURE__ */ jsx(FormField.Caption, { ...captionProps })
225
+ ] })
226
+ ] }),
227
+ /* @__PURE__ */ jsx(PopoverInner, { ...popoverProps, children: /* @__PURE__ */ jsx(SelectList, { ...listProps }) })
228
+ ]
229
+ }
230
+ );
215
231
  }
216
232
  function StandaloneSelect({
217
233
  props: inProps,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@koobiq/react-components",
3
- "version": "0.27.0",
3
+ "version": "0.27.1",
4
4
  "license": "MIT",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -28,10 +28,10 @@
28
28
  "@koobiq/design-tokens": "^3.15.2",
29
29
  "@types/react-transition-group": "^4.4.12",
30
30
  "react-transition-group": "^4.4.5",
31
- "@koobiq/logger": "0.27.0",
32
- "@koobiq/react-icons": "0.27.0",
33
- "@koobiq/react-core": "0.27.0",
34
- "@koobiq/react-primitives": "0.27.0"
31
+ "@koobiq/logger": "0.27.1",
32
+ "@koobiq/react-icons": "0.27.1",
33
+ "@koobiq/react-primitives": "0.27.1",
34
+ "@koobiq/react-core": "0.27.1"
35
35
  },
36
36
  "peerDependencies": {
37
37
  "@koobiq/design-tokens": "^3.15.2",