@kadoui/react 1.9.12 → 1.10.13
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/components/AccessNavigation/AccessNavigation.d.ts +4 -2
- package/dist/components/AccessNavigation/AccessNavigation.d.ts.map +1 -1
- package/dist/components/AccessNavigation/AccessNavigation.js +26 -6
- package/dist/components/SelectBox/SelectBox.d.ts +13 -0
- package/dist/components/SelectBox/SelectBox.d.ts.map +1 -0
- package/dist/components/SelectBox/SelectBox.js +12 -0
- package/dist/components/SelectBox/SelectBoxContext.d.ts +10 -0
- package/dist/components/SelectBox/SelectBoxContext.d.ts.map +1 -0
- package/dist/components/SelectBox/SelectBoxContext.js +3 -0
- package/dist/components/SelectBox/SelectBoxField.d.ts +7 -0
- package/dist/components/SelectBox/SelectBoxField.d.ts.map +1 -0
- package/dist/components/SelectBox/SelectBoxField.js +8 -0
- package/dist/components/SelectBox/SelectBoxInput.d.ts +5 -0
- package/dist/components/SelectBox/SelectBoxInput.d.ts.map +1 -0
- package/dist/components/SelectBox/SelectBoxInput.js +4 -0
- package/dist/components/SelectBox/SelectBoxList.d.ts +5 -0
- package/dist/components/SelectBox/SelectBoxList.d.ts.map +1 -0
- package/dist/components/SelectBox/SelectBoxList.js +8 -0
- package/dist/components/SelectBox/SelectBoxOptions.d.ts +19 -0
- package/dist/components/SelectBox/SelectBoxOptions.d.ts.map +1 -0
- package/dist/components/SelectBox/SelectBoxOptions.js +43 -0
- package/dist/components/SelectBox/SelectBoxRoot.d.ts +5 -0
- package/dist/components/SelectBox/SelectBoxRoot.d.ts.map +1 -0
- package/dist/components/SelectBox/SelectBoxRoot.js +24 -0
- package/dist/components/SelectBox/types.d.ts +5 -0
- package/dist/components/SelectBox/types.d.ts.map +1 -0
- package/dist/components/SelectBox/types.js +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +1 -0
- package/package.json +1 -1
- package/.github/workflows/publish.yaml +0 -31
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import { HTMLAttributes } from "react";
|
|
1
|
+
import { HTMLAttributes, RefObject } from "react";
|
|
2
2
|
export type AccessNavigationPropsT = HTMLAttributes<HTMLDivElement> & {
|
|
3
|
+
ref?: RefObject<HTMLDivElement | null>;
|
|
4
|
+
focusOnMount?: boolean;
|
|
3
5
|
direction?: "y" | "x";
|
|
4
6
|
};
|
|
5
|
-
export declare function AccessNavigation({ direction, dir, onKeyDown, ...p }: AccessNavigationPropsT): import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
export declare function AccessNavigation({ ref, focusOnMount, direction, dir, onKeyDown, ...p }: AccessNavigationPropsT): import("react/jsx-runtime").JSX.Element;
|
|
6
8
|
//# sourceMappingURL=AccessNavigation.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AccessNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/AccessNavigation/AccessNavigation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAiB,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"AccessNavigation.d.ts","sourceRoot":"","sources":["../../../src/components/AccessNavigation/AccessNavigation.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAiB,SAAS,EAAqB,MAAM,OAAO,CAAC;AAIpF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IACpE,GAAG,CAAC,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;IACvC,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;CACvB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,GAAG,EACH,YAAY,EACZ,SAAe,EACf,GAAG,EACH,SAAS,EACT,GAAG,CAAC,EACL,EAAE,sBAAsB,2CAkExB"}
|
|
@@ -1,26 +1,46 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useEffect, useRef } from "react";
|
|
3
4
|
import { selectAccessibleChildren } from "../../utils";
|
|
4
|
-
export function AccessNavigation({ direction = "y", dir, onKeyDown, ...p }) {
|
|
5
|
+
export function AccessNavigation({ ref, focusOnMount, direction = "y", dir, onKeyDown, ...p }) {
|
|
6
|
+
const accessNavigationRef = ref || useRef(null);
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
if (!accessNavigationRef.current)
|
|
9
|
+
return;
|
|
10
|
+
const focusableChildren = selectAccessibleChildren(accessNavigationRef.current);
|
|
11
|
+
if (focusOnMount) {
|
|
12
|
+
focusableChildren[0]?.focus();
|
|
13
|
+
}
|
|
14
|
+
}, []);
|
|
5
15
|
const handleKeyDown = (ev) => {
|
|
6
16
|
const focusableChildren = selectAccessibleChildren(ev.currentTarget);
|
|
7
17
|
if (!focusableChildren.length) {
|
|
8
18
|
return;
|
|
9
19
|
}
|
|
10
|
-
const currentDir = (dir ||
|
|
20
|
+
const currentDir = (dir ||
|
|
21
|
+
document.documentElement.getAttribute("dir") ||
|
|
22
|
+
"ltr");
|
|
11
23
|
const currentIndex = focusableChildren.findIndex((item) => item === document.activeElement);
|
|
12
|
-
if (ev.key ===
|
|
24
|
+
if (ev.key ===
|
|
25
|
+
(direction === "y"
|
|
26
|
+
? "ArrowDown"
|
|
27
|
+
: currentDir === "ltr"
|
|
28
|
+
? "ArrowRight"
|
|
29
|
+
: "ArrowLeft")) {
|
|
13
30
|
ev.preventDefault();
|
|
14
|
-
const nextIndex = currentIndex === -1 || currentIndex === focusableChildren.length - 1
|
|
31
|
+
const nextIndex = currentIndex === -1 || currentIndex === focusableChildren.length - 1
|
|
32
|
+
? 0
|
|
33
|
+
: currentIndex + 1;
|
|
15
34
|
focusableChildren[nextIndex]?.focus();
|
|
16
35
|
}
|
|
17
|
-
if (ev.key ===
|
|
36
|
+
if (ev.key ===
|
|
37
|
+
(direction === "y" ? "ArrowUp" : currentDir === "ltr" ? "ArrowLeft" : "ArrowRight")) {
|
|
18
38
|
ev.preventDefault();
|
|
19
39
|
const prevIndex = currentIndex <= 0 ? focusableChildren.length - 1 : currentIndex - 1;
|
|
20
40
|
focusableChildren[prevIndex]?.focus();
|
|
21
41
|
}
|
|
22
42
|
};
|
|
23
|
-
return (_jsx("div", { dir: dir, onKeyDown: ev => {
|
|
43
|
+
return (_jsx("div", { dir: dir, ref: accessNavigationRef, onKeyDown: (ev) => {
|
|
24
44
|
onKeyDown?.(ev);
|
|
25
45
|
handleKeyDown(ev);
|
|
26
46
|
}, ...p }));
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import SelectBoxList from "./SelectBoxList";
|
|
2
|
+
import SelectBoxField from "./SelectBoxField";
|
|
3
|
+
import SelectBoxInput from "./SelectBoxInput";
|
|
4
|
+
import { SelectBoxRoot } from "./SelectBoxRoot";
|
|
5
|
+
import SelectBoxOptions from "./SelectBoxOptions";
|
|
6
|
+
export * from "./types";
|
|
7
|
+
export declare const SelectBox: typeof SelectBoxRoot & {
|
|
8
|
+
Input: typeof SelectBoxInput;
|
|
9
|
+
Field: typeof SelectBoxField;
|
|
10
|
+
List: typeof SelectBoxList;
|
|
11
|
+
Options: typeof SelectBoxOptions;
|
|
12
|
+
};
|
|
13
|
+
//# sourceMappingURL=SelectBox.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectBox.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/SelectBox.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,iBAAiB,CAAC;AAC5C,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAElD,cAAc,SAAS,CAAC;AAExB,eAAO,MAAM,SAAS;;;;;CAKpB,CAAC"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import SelectBoxList from "./SelectBoxList";
|
|
2
|
+
import SelectBoxField from "./SelectBoxField";
|
|
3
|
+
import SelectBoxInput from "./SelectBoxInput";
|
|
4
|
+
import { SelectBoxRoot } from "./SelectBoxRoot";
|
|
5
|
+
import SelectBoxOptions from "./SelectBoxOptions";
|
|
6
|
+
export * from "./types";
|
|
7
|
+
export const SelectBox = Object.assign(SelectBoxRoot, {
|
|
8
|
+
Input: SelectBoxInput,
|
|
9
|
+
Field: SelectBoxField,
|
|
10
|
+
List: SelectBoxList,
|
|
11
|
+
Options: SelectBoxOptions,
|
|
12
|
+
});
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import { Dispatch, SetStateAction } from "react";
|
|
2
|
+
type SelectBoxContextT = {
|
|
3
|
+
inputFocused: boolean;
|
|
4
|
+
setInputFocused: Dispatch<SetStateAction<boolean>>;
|
|
5
|
+
inputSearch: string;
|
|
6
|
+
setInputSearch: Dispatch<SetStateAction<string>>;
|
|
7
|
+
};
|
|
8
|
+
export declare const SelectBoxContext: import("react").Context<SelectBoxContextT>;
|
|
9
|
+
export {};
|
|
10
|
+
//# sourceMappingURL=SelectBoxContext.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectBoxContext.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/SelectBoxContext.ts"],"names":[],"mappings":"AAEA,OAAO,EAAiB,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEhE,KAAK,iBAAiB,GAAG;IACvB,YAAY,EAAE,OAAO,CAAC;IACtB,eAAe,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IACnD,WAAW,EAAE,MAAM,CAAC;IACpB,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC;CAClD,CAAC;AAEF,eAAO,MAAM,gBAAgB,4CAAyC,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { InputHTMLAttributes } from "react";
|
|
2
|
+
type SelectBoxFieldPropsT = InputHTMLAttributes<HTMLInputElement> & {
|
|
3
|
+
search?: boolean;
|
|
4
|
+
};
|
|
5
|
+
export default function SelectBoxField({ search, ...p }: SelectBoxFieldPropsT): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export {};
|
|
7
|
+
//# sourceMappingURL=SelectBoxField.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectBoxField.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/SelectBoxField.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAO,MAAM,OAAO,CAAC;AAIjD,KAAK,oBAAoB,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IAClE,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,EAAE,oBAAoB,2CAY5E"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { use } from "react";
|
|
4
|
+
import { SelectBoxContext } from "./SelectBoxContext";
|
|
5
|
+
export default function SelectBoxField({ search, ...p }) {
|
|
6
|
+
const { setInputFocused, inputSearch, setInputSearch } = use(SelectBoxContext);
|
|
7
|
+
return (_jsx("input", { onFocus: () => setInputFocused(true), value: search ? inputSearch : undefined, onChange: search ? (e) => setInputSearch(e.target.value) : undefined, readOnly: !search, ...p }));
|
|
8
|
+
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { LabelHTMLAttributes } from "react";
|
|
2
|
+
type SelectBoxInputPropsT = LabelHTMLAttributes<HTMLLabelElement>;
|
|
3
|
+
export default function SelectBoxInput(p: SelectBoxInputPropsT): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export {};
|
|
5
|
+
//# sourceMappingURL=SelectBoxInput.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectBoxInput.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/SelectBoxInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAE5C,KAAK,oBAAoB,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAElE,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,CAAC,EAAE,oBAAoB,2CAE7D"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { HTMLAttributes } from "react";
|
|
2
|
+
type SelectBoxListPropsT = HTMLAttributes<HTMLDivElement>;
|
|
3
|
+
export default function SelectBoxList(p: SelectBoxListPropsT): import("react/jsx-runtime").JSX.Element | null;
|
|
4
|
+
export {};
|
|
5
|
+
//# sourceMappingURL=SelectBoxList.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectBoxList.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/SelectBoxList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAO,MAAM,OAAO,CAAC;AAI5C,KAAK,mBAAmB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE1D,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,CAAC,EAAE,mBAAmB,kDAI3D"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { use } from "react";
|
|
4
|
+
import { SelectBoxContext } from "./SelectBoxContext";
|
|
5
|
+
export default function SelectBoxList(p) {
|
|
6
|
+
const { inputFocused } = use(SelectBoxContext);
|
|
7
|
+
return inputFocused ? _jsx("div", { ...p }) : null;
|
|
8
|
+
}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { ButtonHTMLAttributes, Dispatch, SetStateAction } from "react";
|
|
2
|
+
import { SelectBoxOptionT } from "./types";
|
|
3
|
+
type WithMultiSelect = {
|
|
4
|
+
multiSelect: true;
|
|
5
|
+
optionValue: SelectBoxOptionT[];
|
|
6
|
+
setOptionValue: Dispatch<SetStateAction<SelectBoxOptionT[]>>;
|
|
7
|
+
};
|
|
8
|
+
type WithSingleSelect = {
|
|
9
|
+
multiSelect?: false;
|
|
10
|
+
optionValue: SelectBoxOptionT | null;
|
|
11
|
+
setOptionValue: Dispatch<SetStateAction<SelectBoxOptionT | null>>;
|
|
12
|
+
};
|
|
13
|
+
type MergedSelectMode = WithMultiSelect | WithSingleSelect;
|
|
14
|
+
type SelectBoxOptionsPropsT = ButtonHTMLAttributes<HTMLButtonElement> & MergedSelectMode & {
|
|
15
|
+
options: SelectBoxOptionT[];
|
|
16
|
+
};
|
|
17
|
+
export default function SelectBoxOptions({ options, multiSelect, optionValue, setOptionValue, ...p }: SelectBoxOptionsPropsT): import("react/jsx-runtime").JSX.Element[];
|
|
18
|
+
export {};
|
|
19
|
+
//# sourceMappingURL=SelectBoxOptions.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectBoxOptions.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/SelectBoxOptions.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,QAAQ,EAAE,cAAc,EAAO,MAAM,OAAO,CAAC;AAE5E,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAG3C,KAAK,eAAe,GAAG;IACrB,WAAW,EAAE,IAAI,CAAC;IAClB,WAAW,EAAE,gBAAgB,EAAE,CAAC;IAChC,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC;CAC9D,CAAC;AAEF,KAAK,gBAAgB,GAAG;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,WAAW,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACrC,cAAc,EAAE,QAAQ,CAAC,cAAc,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC,CAAC;CACnE,CAAC;AAEF,KAAK,gBAAgB,GAAG,eAAe,GAAG,gBAAgB,CAAC;AAE3D,KAAK,sBAAsB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GACnE,gBAAgB,GAAG;IACjB,OAAO,EAAE,gBAAgB,EAAE,CAAC;CAC7B,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EACvC,OAAO,EACP,WAAW,EACX,WAAW,EACX,cAAc,EACd,GAAG,CAAC,EACL,EAAE,sBAAsB,6CA+CxB"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { use } from "react";
|
|
4
|
+
import { SelectBoxContext } from "./SelectBoxContext";
|
|
5
|
+
export default function SelectBoxOptions({ options, multiSelect, optionValue, setOptionValue, ...p }) {
|
|
6
|
+
const { setInputFocused, inputSearch, setInputSearch } = use(SelectBoxContext);
|
|
7
|
+
const filteredOptions = [];
|
|
8
|
+
const otherOptions = [];
|
|
9
|
+
options.forEach((item) => {
|
|
10
|
+
if (item.name.toLowerCase().includes(inputSearch.toLowerCase().trim())) {
|
|
11
|
+
filteredOptions.push(item);
|
|
12
|
+
}
|
|
13
|
+
else {
|
|
14
|
+
otherOptions.push(item);
|
|
15
|
+
}
|
|
16
|
+
});
|
|
17
|
+
const currentOptions = [...filteredOptions, ...otherOptions];
|
|
18
|
+
return currentOptions.map((item) => {
|
|
19
|
+
const isSelected = multiSelect
|
|
20
|
+
? optionValue.some((v) => v.value === item.value)
|
|
21
|
+
: optionValue?.value === item.value;
|
|
22
|
+
return (_jsx("button", { type: "button", "data-state": isSelected, onClick: () => {
|
|
23
|
+
if (multiSelect) {
|
|
24
|
+
if (isSelected) {
|
|
25
|
+
setOptionValue(optionValue.filter((v) => v.value !== item.value));
|
|
26
|
+
}
|
|
27
|
+
else {
|
|
28
|
+
setOptionValue([...optionValue, item]);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
else {
|
|
32
|
+
if (isSelected) {
|
|
33
|
+
setOptionValue(null);
|
|
34
|
+
}
|
|
35
|
+
else {
|
|
36
|
+
setOptionValue(item);
|
|
37
|
+
setInputSearch(item.name);
|
|
38
|
+
setInputFocused(false);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}, ...p, children: item.name }, item.value));
|
|
42
|
+
});
|
|
43
|
+
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { AccessNavigationPropsT } from "../AccessNavigation/AccessNavigation";
|
|
2
|
+
type SelectBoxRootPropsT = Omit<AccessNavigationPropsT, "direction">;
|
|
3
|
+
export declare function SelectBoxRoot({ ref, ...p }: SelectBoxRootPropsT): import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export {};
|
|
5
|
+
//# sourceMappingURL=SelectBoxRoot.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectBoxRoot.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/SelectBoxRoot.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEL,sBAAsB,EACvB,MAAM,sCAAsC,CAAC;AAE9C,KAAK,mBAAmB,GAAG,IAAI,CAAC,sBAAsB,EAAE,WAAW,CAAC,CAAC;AAErE,wBAAgB,aAAa,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,EAAE,mBAAmB,2CAgC/D"}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import { useEffect } from "react";
|
|
4
|
+
import { useRef, useState } from "react";
|
|
5
|
+
import { SelectBoxContext } from "./SelectBoxContext";
|
|
6
|
+
import { AccessNavigation, } from "../AccessNavigation/AccessNavigation";
|
|
7
|
+
export function SelectBoxRoot({ ref, ...p }) {
|
|
8
|
+
const [inputFocused, setInputFocused] = useState(false);
|
|
9
|
+
const [inputSearch, setInputSearch] = useState("");
|
|
10
|
+
const selectBoxRootRef = ref || useRef(null);
|
|
11
|
+
useEffect(() => {
|
|
12
|
+
const handleClickOutside = (event) => {
|
|
13
|
+
if (selectBoxRootRef.current &&
|
|
14
|
+
!selectBoxRootRef.current.contains(event.target)) {
|
|
15
|
+
setInputFocused(false);
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
document.addEventListener("click", handleClickOutside);
|
|
19
|
+
return () => {
|
|
20
|
+
document.removeEventListener("click", handleClickOutside);
|
|
21
|
+
};
|
|
22
|
+
}, []);
|
|
23
|
+
return (_jsx(SelectBoxContext, { value: { inputFocused, setInputFocused, inputSearch, setInputSearch }, children: _jsx(AccessNavigation, { ref: selectBoxRootRef, ...p }) }));
|
|
24
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/SelectBox/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -16,6 +16,7 @@ export * from "./components/Portal/Portal";
|
|
|
16
16
|
export * from "./components/Progress/Progress";
|
|
17
17
|
export * from "./components/QrCode/QrCode";
|
|
18
18
|
export * from "./components/Rating/Rating";
|
|
19
|
+
export * from "./components/SelectBox/SelectBox";
|
|
19
20
|
export * from "./components/Sheet/Sheet";
|
|
20
21
|
export * from "./components/ShowMore/ShowMore";
|
|
21
22
|
export * from "./components/Spoiler/Spoiler";
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gDAAgD,CAAC;AAC/D,cAAc,kCAAkC,CAAC;AACjD,cAAc,0BAA0B,CAAC;AACzC,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oCAAoC,CAAC;AACnD,cAAc,0CAA0C,CAAC;AACzD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC;AACnD,cAAc,wCAAwC,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,gDAAgD,CAAC;AAC/D,cAAc,kCAAkC,CAAC;AACjD,cAAc,0BAA0B,CAAC;AACzC,cAAc,sCAAsC,CAAC;AACrD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,oCAAoC,CAAC;AACnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,oCAAoC,CAAC;AACnD,cAAc,0CAA0C,CAAC;AACzD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,kCAAkC,CAAC;AACjD,cAAc,0BAA0B,CAAC;AACzC,cAAc,gCAAgC,CAAC;AAC/C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,wBAAwB,CAAC;AACvC,cAAc,wBAAwB,CAAC;AACvC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC;AACnD,cAAc,wCAAwC,CAAC"}
|
package/dist/index.js
CHANGED
|
@@ -16,6 +16,7 @@ export * from "./components/Portal/Portal";
|
|
|
16
16
|
export * from "./components/Progress/Progress";
|
|
17
17
|
export * from "./components/QrCode/QrCode";
|
|
18
18
|
export * from "./components/Rating/Rating";
|
|
19
|
+
export * from "./components/SelectBox/SelectBox";
|
|
19
20
|
export * from "./components/Sheet/Sheet";
|
|
20
21
|
export * from "./components/ShowMore/ShowMore";
|
|
21
22
|
export * from "./components/Spoiler/Spoiler";
|
package/package.json
CHANGED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
name: Publish package (on release)
|
|
2
|
-
|
|
3
|
-
on:
|
|
4
|
-
push:
|
|
5
|
-
branches:
|
|
6
|
-
- main
|
|
7
|
-
|
|
8
|
-
jobs:
|
|
9
|
-
publish:
|
|
10
|
-
runs-on: ubuntu-latest
|
|
11
|
-
|
|
12
|
-
steps:
|
|
13
|
-
- name: Checkout code
|
|
14
|
-
uses: actions/checkout@v4
|
|
15
|
-
|
|
16
|
-
- name: Setup Node.js
|
|
17
|
-
uses: actions/setup-node@v4
|
|
18
|
-
with:
|
|
19
|
-
node-version: "20"
|
|
20
|
-
registry-url: "https://registry.npmjs.org/"
|
|
21
|
-
|
|
22
|
-
- name: Install dependencies
|
|
23
|
-
run: npm ci
|
|
24
|
-
|
|
25
|
-
- name: Build
|
|
26
|
-
run: npm run build
|
|
27
|
-
|
|
28
|
-
- name: Publish to npm
|
|
29
|
-
env:
|
|
30
|
-
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
|
|
31
|
-
run: npm publish --access public
|