diff --git a/.eslintignore b/.eslintignore index c58f4a5..0409a0f 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,6 +1,9 @@ # Folders dist/ assets/ +pages/ +components/ +styles/ # Files README.md \ No newline at end of file diff --git a/.eslintrc.json b/.eslintrc.json index 5dcc6f7..8ab688c 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -10,7 +10,8 @@ "plugin:react/recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", - "plugin:react-hooks/recommended" + "plugin:react-hooks/recommended", + "next/core-web-vitals" ], "overrides": [], "parser": "@typescript-eslint/parser", @@ -26,7 +27,7 @@ "version": "detect" } }, - "plugins": ["react", "@typescript-eslint", "import", "prettier"], + "plugins": ["react", "@typescript-eslint", "import", "prettier", "@next/eslint-plugin-next"], "rules": { "indent": ["error", 4], "linebreak-style": ["error", "unix"], diff --git a/.gitignore b/.gitignore index aaeb352..f842aa2 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,7 @@ # dependencies node_modules +/.next/ # test coverage coverage @@ -11,6 +12,7 @@ build dist .rpt2_cache .eslintcache +tsconfig.tsbuildinfo # misc .DS_Store diff --git a/.npmignore b/.npmignore index 8ecbfc0..d050626 100644 --- a/.npmignore +++ b/.npmignore @@ -4,11 +4,17 @@ node_modules .vscode .idea assets +.git +pages +components +styles +.next +.rollup.cache ## Files babel.config.json tsconfig.json rollup.config.js -.git +next.config.js .gitignore .eslintignore .eslintrc.json @@ -20,3 +26,4 @@ package-lock.json yarn.lock tailwind.config.js postcss.config.js +tsconfig.tsbuildinfo diff --git a/.prettierignore b/.prettierignore index c58f4a5..da459fd 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,6 +1,8 @@ # Folders dist/ assets/ +.next/ +.rollup.cache/ # Files README.md \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/DisabledItem.js b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/DisabledItem.js new file mode 100644 index 0000000..71daf11 --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/DisabledItem.js @@ -0,0 +1,10 @@ +import React, { useContext } from "react"; +import { SelectContext } from "./SelectProvider"; +const DisabledItem = ({ children }) => { + const { classNames } = useContext(SelectContext); + return (React.createElement("div", { className: classNames && classNames.listDisabledItem + ? classNames.listDisabledItem + : "px-2 py-2 cursor-not-allowed truncate text-gray-400 select-none" }, children)); +}; +export default DisabledItem; +//# sourceMappingURL=DisabledItem.js.map \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/DisabledItem.js.map b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/DisabledItem.js.map new file mode 100644 index 0000000..88c6b98 --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/DisabledItem.js.map @@ -0,0 +1 @@ +{"version":3,"file":"DisabledItem.js","sourceRoot":"","sources":["DisabledItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMjD,MAAM,YAAY,GAAgC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC/D,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IACjD,OAAO,CACH,6BACI,SAAS,EACL,UAAU,IAAI,UAAU,CAAC,gBAAgB;YACrC,CAAC,CAAC,UAAU,CAAC,gBAAgB;YAC7B,CAAC,CAAC,iEAAiE,IAG1E,QAAQ,CACP,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import React, { useContext } from \"react\";\n\nimport { SelectContext } from \"./SelectProvider\";\n\ninterface DisabledItemProps {\n children: JSX.Element | string;\n}\n\nconst DisabledItem: React.FC = ({ children }) => {\n const { classNames } = useContext(SelectContext);\n return (\n \n {children}\n \n );\n};\n\nexport default DisabledItem;\n"]} \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/DisabledItem.jsx b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/DisabledItem.jsx new file mode 100644 index 0000000..7263b9b --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/DisabledItem.jsx @@ -0,0 +1,12 @@ +import React, { useContext } from "react"; +import { SelectContext } from "./SelectProvider"; +const DisabledItem = ({ children }) => { + const { classNames } = useContext(SelectContext); + return (
+ {children} +
); +}; +export default DisabledItem; +//# sourceMappingURL=DisabledItem.jsx.map \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/DisabledItem.jsx.map b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/DisabledItem.jsx.map new file mode 100644 index 0000000..9b6794b --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/DisabledItem.jsx.map @@ -0,0 +1 @@ +{"version":3,"file":"DisabledItem.jsx","sourceRoot":"","sources":["DisabledItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAMjD,MAAM,YAAY,GAAgC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC/D,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IACjD,OAAO,CACH,CAAC,GAAG,CACA,SAAS,CAAC,CACN,UAAU,IAAI,UAAU,CAAC,gBAAgB;YACrC,CAAC,CAAC,UAAU,CAAC,gBAAgB;YAC7B,CAAC,CAAC,iEAAiE,CAC1E,CAED;YAAA,CAAC,QAAQ,CACb;QAAA,EAAE,GAAG,CAAC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import React, { useContext } from \"react\";\n\nimport { SelectContext } from \"./SelectProvider\";\n\ninterface DisabledItemProps {\n children: JSX.Element | string;\n}\n\nconst DisabledItem: React.FC = ({ children }) => {\n const { classNames } = useContext(SelectContext);\n return (\n \n {children}\n \n );\n};\n\nexport default DisabledItem;\n"]} \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/GroupItem.js b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/GroupItem.js new file mode 100644 index 0000000..93d8169 --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/GroupItem.js @@ -0,0 +1,13 @@ +import React from "react"; +import Item from "./Item"; +import { useSelectContext } from "./SelectProvider"; +const GroupItem = ({ item, primaryColor }) => { + const { classNames, formatGroupLabel } = useSelectContext(); + return (React.createElement(React.Fragment, null, item.options.length > 0 && (React.createElement(React.Fragment, null, + formatGroupLabel ? (React.createElement(React.Fragment, null, formatGroupLabel(item))) : (React.createElement("div", { className: classNames && classNames.listGroupLabel + ? classNames.listGroupLabel + : "pr-2 py-2 cursor-default select-none truncate font-bold text-gray-700" }, item.label)), + item.options.map((item, index) => (React.createElement(Item, { primaryColor: primaryColor, key: index, item: item }))))))); +}; +export default GroupItem; +//# sourceMappingURL=GroupItem.js.map \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/GroupItem.js.map b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/GroupItem.js.map new file mode 100644 index 0000000..0aa3140 --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/GroupItem.js.map @@ -0,0 +1 @@ +{"version":3,"file":"GroupItem.js","sourceRoot":"","sources":["GroupItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAQpD,MAAM,SAAS,GAA6B,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE;IACnE,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE5D,OAAO,CACH,0CACK,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACxB;QACK,gBAAgB,CAAC,CAAC,CAAC,CAChB,0CAAG,gBAAgB,CAAC,IAAI,CAAC,CAAI,CAChC,CAAC,CAAC,CAAC,CACA,6BACI,SAAS,EACL,UAAU,IAAI,UAAU,CAAC,cAAc;gBACnC,CAAC,CAAC,UAAU,CAAC,cAAc;gBAC3B,CAAC,CAAC,uEAAuE,IAGhF,IAAI,CAAC,KAAK,CACT,CACT;QAEA,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,oBAAC,IAAI,IAAC,YAAY,EAAE,YAAY,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,GAAI,CAC/D,CAAC,CACH,CACN,CACF,CACN,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import React from \"react\";\n\nimport Item from \"./Item\";\nimport { useSelectContext } from \"./SelectProvider\";\nimport { GroupOption } from \"./type\";\n\ninterface GroupItemProps {\n item: GroupOption;\n primaryColor: string;\n}\n\nconst GroupItem: React.FC = ({ item, primaryColor }) => {\n const { classNames, formatGroupLabel } = useSelectContext();\n\n return (\n <>\n {item.options.length > 0 && (\n <>\n {formatGroupLabel ? (\n <>{formatGroupLabel(item)}\n ) : (\n \n {item.label}\n \n )}\n\n {item.options.map((item, index) => (\n \n ))}\n \n )}\n \n );\n};\n\nexport default GroupItem;\n"]} \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/GroupItem.jsx b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/GroupItem.jsx new file mode 100644 index 0000000..2b4401c --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/GroupItem.jsx @@ -0,0 +1,19 @@ +import React from "react"; +import Item from "./Item"; +import { useSelectContext } from "./SelectProvider"; +const GroupItem = ({ item, primaryColor }) => { + const { classNames, formatGroupLabel } = useSelectContext(); + return (<> + {item.options.length > 0 && (<> + {formatGroupLabel ? (<>{formatGroupLabel(item)}) : (
+ {item.label} +
)} + + {item.options.map((item, index) => ())} + )} + ); +}; +export default GroupItem; +//# sourceMappingURL=GroupItem.jsx.map \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/GroupItem.jsx.map b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/GroupItem.jsx.map new file mode 100644 index 0000000..1c88052 --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/GroupItem.jsx.map @@ -0,0 +1 @@ +{"version":3,"file":"GroupItem.jsx","sourceRoot":"","sources":["GroupItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAQpD,MAAM,SAAS,GAA6B,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE;IACnE,MAAM,EAAE,UAAU,EAAE,gBAAgB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAE5D,OAAO,CACH,EACI;YAAA,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,GAAG,CAAC,IAAI,CACxB,EACI;oBAAA,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAChB,EAAE,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,CAChC,CAAC,CAAC,CAAC,CACA,CAAC,GAAG,CACA,SAAS,CAAC,CACN,UAAU,IAAI,UAAU,CAAC,cAAc;oBACnC,CAAC,CAAC,UAAU,CAAC,cAAc;oBAC3B,CAAC,CAAC,uEAAuE,CAChF,CAED;4BAAA,CAAC,IAAI,CAAC,KAAK,CACf;wBAAA,EAAE,GAAG,CAAC,CACT,CAED;;oBAAA,CAAC,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC/B,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,EAAG,CAC/D,CAAC,CACN;gBAAA,GAAG,CACN,CACL;QAAA,GAAG,CACN,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC","sourcesContent":["import React from \"react\";\n\nimport Item from \"./Item\";\nimport { useSelectContext } from \"./SelectProvider\";\nimport { GroupOption } from \"./type\";\n\ninterface GroupItemProps {\n item: GroupOption;\n primaryColor: string;\n}\n\nconst GroupItem: React.FC = ({ item, primaryColor }) => {\n const { classNames, formatGroupLabel } = useSelectContext();\n\n return (\n <>\n {item.options.length > 0 && (\n <>\n {formatGroupLabel ? (\n <>{formatGroupLabel(item)}\n ) : (\n \n {item.label}\n \n )}\n\n {item.options.map((item, index) => (\n \n ))}\n \n )}\n \n );\n};\n\nexport default GroupItem;\n"]} \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Icons.js b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Icons.js new file mode 100644 index 0000000..dd75202 --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Icons.js @@ -0,0 +1,14 @@ +import React from "react"; +export const CloseIcon = ({ className = "" }) => { + return (React.createElement("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg" }, + React.createElement("path", { fillRule: "evenodd", d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z", clipRule: "evenodd" }))); +}; +export const ChevronIcon = ({ className = "" }) => { + return (React.createElement("svg", { className: className, fill: "currentColor", viewBox: "0 0 20 20", xmlns: "http://www.w3.org/2000/svg" }, + React.createElement("path", { fillRule: "evenodd", d: "M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z", clipRule: "evenodd" }))); +}; +export const SearchIcon = ({ className = "" }) => { + return (React.createElement("svg", { className: className, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" }, + React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" }))); +}; +//# sourceMappingURL=Icons.js.map \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Icons.js.map b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Icons.js.map new file mode 100644 index 0000000..7c54c62 --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Icons.js.map @@ -0,0 +1 @@ +{"version":3,"file":"Icons.js","sourceRoot":"","sources":["Icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,CAAC,MAAM,SAAS,GAAoB,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE;IAC7D,OAAO,CACH,6BACI,SAAS,EAAE,SAAS,EACpB,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B;QAElC,8BACI,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,oMAAoM,EACtM,QAAQ,EAAC,SAAS,GACpB,CACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAoB,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE;IAC/D,OAAO,CACH,6BACI,SAAS,EAAE,SAAS,EACpB,IAAI,EAAC,cAAc,EACnB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B;QAElC,8BACI,QAAQ,EAAC,SAAS,EAClB,CAAC,EAAC,oHAAoH,EACtH,QAAQ,EAAC,SAAS,GACpB,CACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAoB,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE;IAC9D,OAAO,CACH,6BACI,SAAS,EAAE,SAAS,EACpB,IAAI,EAAC,MAAM,EACX,MAAM,EAAC,cAAc,EACrB,OAAO,EAAC,WAAW,EACnB,KAAK,EAAC,4BAA4B;QAElC,8BACI,aAAa,EAAC,OAAO,EACrB,cAAc,EAAC,OAAO,EACtB,WAAW,EAAE,CAAC,EACd,CAAC,EAAC,6CAA6C,GACjD,CACA,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import React from \"react\";\n\ninterface Props {\n className?: string;\n}\n\nexport const CloseIcon: React.FC = ({ className = \"\" }) => {\n return (\n \n \n \n );\n};\n\nexport const ChevronIcon: React.FC = ({ className = \"\" }) => {\n return (\n \n \n \n );\n};\n\nexport const SearchIcon: React.FC = ({ className = \"\" }) => {\n return (\n \n \n \n );\n};\n"]} \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Icons.jsx b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Icons.jsx new file mode 100644 index 0000000..f40e64a --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Icons.jsx @@ -0,0 +1,17 @@ +import React from "react"; +export const CloseIcon = ({ className = "" }) => { + return ( + + ); +}; +export const ChevronIcon = ({ className = "" }) => { + return ( + + ); +}; +export const SearchIcon = ({ className = "" }) => { + return ( + + ); +}; +//# sourceMappingURL=Icons.jsx.map \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Icons.jsx.map b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Icons.jsx.map new file mode 100644 index 0000000..343e7bb --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Icons.jsx.map @@ -0,0 +1 @@ +{"version":3,"file":"Icons.jsx","sourceRoot":"","sources":["Icons.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,MAAM,CAAC,MAAM,SAAS,GAAoB,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE;IAC7D,OAAO,CACH,CAAC,GAAG,CACA,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,IAAI,CAAC,cAAc,CACnB,OAAO,CAAC,WAAW,CACnB,KAAK,CAAC,4BAA4B,CAElC;YAAA,CAAC,IAAI,CACD,QAAQ,CAAC,SAAS,CAClB,CAAC,CAAC,oMAAoM,CACtM,QAAQ,CAAC,SAAS,EAE1B;QAAA,EAAE,GAAG,CAAC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAoB,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE;IAC/D,OAAO,CACH,CAAC,GAAG,CACA,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,IAAI,CAAC,cAAc,CACnB,OAAO,CAAC,WAAW,CACnB,KAAK,CAAC,4BAA4B,CAElC;YAAA,CAAC,IAAI,CACD,QAAQ,CAAC,SAAS,CAClB,CAAC,CAAC,oHAAoH,CACtH,QAAQ,CAAC,SAAS,EAE1B;QAAA,EAAE,GAAG,CAAC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAoB,CAAC,EAAE,SAAS,GAAG,EAAE,EAAE,EAAE,EAAE;IAC9D,OAAO,CACH,CAAC,GAAG,CACA,SAAS,CAAC,CAAC,SAAS,CAAC,CACrB,IAAI,CAAC,MAAM,CACX,MAAM,CAAC,cAAc,CACrB,OAAO,CAAC,WAAW,CACnB,KAAK,CAAC,4BAA4B,CAElC;YAAA,CAAC,IAAI,CACD,aAAa,CAAC,OAAO,CACrB,cAAc,CAAC,OAAO,CACtB,WAAW,CAAC,CAAC,CAAC,CAAC,CACf,CAAC,CAAC,6CAA6C,EAEvD;QAAA,EAAE,GAAG,CAAC,CACT,CAAC;AACN,CAAC,CAAC","sourcesContent":["import React from \"react\";\n\ninterface Props {\n className?: string;\n}\n\nexport const CloseIcon: React.FC = ({ className = \"\" }) => {\n return (\n \n \n \n );\n};\n\nexport const ChevronIcon: React.FC = ({ className = \"\" }) => {\n return (\n \n \n \n );\n};\n\nexport const SearchIcon: React.FC = ({ className = \"\" }) => {\n return (\n \n \n \n );\n};\n"]} \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Item.js b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Item.js new file mode 100644 index 0000000..246e164 --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Item.js @@ -0,0 +1,46 @@ +import React, { useCallback, useMemo } from "react"; +import { COLORS, DEFAULT_THEME, THEME_DATA } from "../constants"; +import DisabledItem from "./DisabledItem"; +import { useSelectContext } from "./SelectProvider"; +const Item = ({ item, primaryColor }) => { + const { classNames, value, handleValueChange, formatOptionLabel } = useSelectContext(); + const isSelected = useMemo(() => { + return value !== null && !Array.isArray(value) && value.value === item.value; + }, [item.value, value]); + const textHoverColor = useMemo(() => { + if (COLORS.includes(primaryColor)) { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + return THEME_DATA.textHover[primaryColor]; + } + return THEME_DATA.textHover[DEFAULT_THEME]; + }, [primaryColor]); + const bgColor = useMemo(() => { + if (COLORS.includes(primaryColor)) { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + return THEME_DATA.bg[primaryColor]; + } + return THEME_DATA.bg[DEFAULT_THEME]; + }, [primaryColor]); + const bgHoverColor = useMemo(() => { + if (COLORS.includes(primaryColor)) { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + return THEME_DATA.bgHover[primaryColor]; + } + return THEME_DATA.bgHover[DEFAULT_THEME]; + }, [primaryColor]); + const getItemClass = useCallback(() => { + const baseClass = "block transition duration-200 px-2 py-2 cursor-pointer select-none truncate rounded"; + const selectedClass = isSelected + ? `text-white ${bgColor}` + : `text-gray-500 ${bgHoverColor} ${textHoverColor}`; + return classNames && classNames.listItem + ? classNames.listItem({ isSelected }) + : `${baseClass} ${selectedClass}`; + }, [bgColor, bgHoverColor, classNames, isSelected, textHoverColor]); + return (React.createElement(React.Fragment, null, formatOptionLabel ? (React.createElement("div", { onClick: () => handleValueChange(item) }, formatOptionLabel({ ...item, isSelected }))) : (React.createElement(React.Fragment, null, item.disabled ? (React.createElement(DisabledItem, null, item.label)) : (React.createElement("li", { "aria-selected": isSelected, role: "option", onClick: () => handleValueChange(item), className: getItemClass() }, item.label)))))); +}; +export default Item; +//# sourceMappingURL=Item.js.map \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Item.js.map b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Item.js.map new file mode 100644 index 0000000..0954c65 --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Item.js.map @@ -0,0 +1 @@ +{"version":3,"file":"Item.js","sourceRoot":"","sources":["Item.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useMemo } from \"react\";\n\nimport { COLORS, DEFAULT_THEME, THEME_DATA } from \"../constants\";\n\nimport DisabledItem from \"./DisabledItem\";\nimport { useSelectContext } from \"./SelectProvider\";\nimport { Option } from \"./type\";\n\ninterface ItemProps {\n item: Option;\n primaryColor: string;\n}\n\nconst Item: React.FC = ({ item, primaryColor }) => {\n const { classNames, value, handleValueChange, formatOptionLabel } = useSelectContext();\n\n const isSelected = useMemo(() => {\n return value !== null && !Array.isArray(value) && value.value === item.value;\n }, [item.value, value]);\n\n const textHoverColor = useMemo(() => {\n if (COLORS.includes(primaryColor)) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n return THEME_DATA.textHover[primaryColor];\n }\n return THEME_DATA.textHover[DEFAULT_THEME];\n }, [primaryColor]);\n\n const bgColor = useMemo(() => {\n if (COLORS.includes(primaryColor)) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n return THEME_DATA.bg[primaryColor];\n }\n return THEME_DATA.bg[DEFAULT_THEME];\n }, [primaryColor]);\n\n const bgHoverColor = useMemo(() => {\n if (COLORS.includes(primaryColor)) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n return THEME_DATA.bgHover[primaryColor];\n }\n return THEME_DATA.bgHover[DEFAULT_THEME];\n }, [primaryColor]);\n\n const getItemClass = useCallback(() => {\n const baseClass =\n \"block transition duration-200 px-2 py-2 cursor-pointer select-none truncate rounded\";\n const selectedClass = isSelected\n ? `text-white ${bgColor}`\n : `text-gray-500 ${bgHoverColor} ${textHoverColor}`;\n\n return classNames && classNames.listItem\n ? classNames.listItem({ isSelected })\n : `${baseClass} ${selectedClass}`;\n }, [bgColor, bgHoverColor, classNames, isSelected, textHoverColor]);\n\n return (\n <>\n {formatOptionLabel ? (\n
handleValueChange(item)}>\n {formatOptionLabel({ ...item, isSelected })}\n
\n ) : (\n <>\n {item.disabled ? (\n {item.label}\n ) : (\n handleValueChange(item)}\n className={getItemClass()}\n >\n {item.label}\n \n )}\n \n )}\n \n );\n};\n\nexport default Item;\n"]} \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Item.jsx b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Item.jsx new file mode 100644 index 0000000..139f344 --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Item.jsx @@ -0,0 +1,54 @@ +import React, { useCallback, useMemo } from "react"; +import { COLORS, DEFAULT_THEME, THEME_DATA } from "../constants"; +import DisabledItem from "./DisabledItem"; +import { useSelectContext } from "./SelectProvider"; +const Item = ({ item, primaryColor }) => { + const { classNames, value, handleValueChange, formatOptionLabel } = useSelectContext(); + const isSelected = useMemo(() => { + return value !== null && !Array.isArray(value) && value.value === item.value; + }, [item.value, value]); + const textHoverColor = useMemo(() => { + if (COLORS.includes(primaryColor)) { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + return THEME_DATA.textHover[primaryColor]; + } + return THEME_DATA.textHover[DEFAULT_THEME]; + }, [primaryColor]); + const bgColor = useMemo(() => { + if (COLORS.includes(primaryColor)) { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + return THEME_DATA.bg[primaryColor]; + } + return THEME_DATA.bg[DEFAULT_THEME]; + }, [primaryColor]); + const bgHoverColor = useMemo(() => { + if (COLORS.includes(primaryColor)) { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + return THEME_DATA.bgHover[primaryColor]; + } + return THEME_DATA.bgHover[DEFAULT_THEME]; + }, [primaryColor]); + const getItemClass = useCallback(() => { + const baseClass = "block transition duration-200 px-2 py-2 cursor-pointer select-none truncate rounded"; + const selectedClass = isSelected + ? `text-white ${bgColor}` + : `text-gray-500 ${bgHoverColor} ${textHoverColor}`; + return classNames && classNames.listItem + ? classNames.listItem({ isSelected }) + : `${baseClass} ${selectedClass}`; + }, [bgColor, bgHoverColor, classNames, isSelected, textHoverColor]); + return (<> + {formatOptionLabel ? (
handleValueChange(item)}> + {formatOptionLabel({ ...item, isSelected })} +
) : (<> + {item.disabled ? ({item.label}) : (
  • handleValueChange(item)} className={getItemClass()}> + {item.label} +
    • )} + )} + ); +}; +export default Item; +//# sourceMappingURL=Item.jsx.map \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Item.jsx.map b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Item.jsx.map new file mode 100644 index 0000000..46ed784 --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Item.jsx.map @@ -0,0 +1 @@ +{"version":3,"file":"Item.jsx","sourceRoot":"","sources":["Item.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEpD,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAEjE,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAQpD,MAAM,IAAI,GAAwB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,EAAE,EAAE;IACzD,MAAM,EAAE,UAAU,EAAE,KAAK,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,GAAG,gBAAgB,EAAE,CAAC;IAEvF,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC5B,OAAO,KAAK,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC;IACjF,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IAExB,MAAM,cAAc,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,IAAI,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;YAC/B,6DAA6D;YAC7D,aAAa;YACb,OAAO,UAAU,CAAC,SAAS,CAAC,YAAY,CAAC,CAAC;SAC7C;QACD,OAAO,UAAU,CAAC,SAAS,CAAC,aAAa,CAAC,CAAC;IAC/C,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,IAAI,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;YAC/B,6DAA6D;YAC7D,aAAa;YACb,OAAO,UAAU,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC;SACtC;QACD,OAAO,UAAU,CAAC,EAAE,CAAC,aAAa,CAAC,CAAC;IACxC,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,IAAI,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;YAC/B,6DAA6D;YAC7D,aAAa;YACb,OAAO,UAAU,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;SAC3C;QACD,OAAO,UAAU,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;IAC7C,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,MAAM,SAAS,GACX,qFAAqF,CAAC;QAC1F,MAAM,aAAa,GAAG,UAAU;YAC5B,CAAC,CAAC,cAAc,OAAO,EAAE;YACzB,CAAC,CAAC,iBAAiB,YAAY,IAAI,cAAc,EAAE,CAAC;QAExD,OAAO,UAAU,IAAI,UAAU,CAAC,QAAQ;YACpC,CAAC,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,UAAU,EAAE,CAAC;YACrC,CAAC,CAAC,GAAG,SAAS,IAAI,aAAa,EAAE,CAAC;IAC1C,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,cAAc,CAAC,CAAC,CAAC;IAEpE,OAAO,CACH,EACI;YAAA,CAAC,iBAAiB,CAAC,CAAC,CAAC,CACjB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CACxC;oBAAA,CAAC,iBAAiB,CAAC,EAAE,GAAG,IAAI,EAAE,UAAU,EAAE,CAAC,CAC/C;gBAAA,EAAE,GAAG,CAAC,CACT,CAAC,CAAC,CAAC,CACA,EACI;oBAAA,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACb,CAAC,YAAY,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,YAAY,CAAC,CAC5C,CAAC,CAAC,CAAC,CACA,CAAC,EAAE,CACC,aAAa,CAAC,CAAC,UAAU,CAAC,CAC1B,IAAI,CAAC,CAAC,QAAQ,CAAC,CACf,OAAO,CAAC,CAAC,GAAG,EAAE,CAAC,iBAAiB,CAAC,IAAI,CAAC,CAAC,CACvC,SAAS,CAAC,CAAC,YAAY,EAAE,CAAC,CAE1B;4BAAA,CAAC,IAAI,CAAC,KAAK,CACf;wBAAA,EAAE,EAAE,CAAC,CACR,CACL;gBAAA,GAAG,CACN,CACL;QAAA,GAAG,CACN,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC","sourcesContent":["import React, { useCallback, useMemo } from \"react\";\n\nimport { COLORS, DEFAULT_THEME, THEME_DATA } from \"../constants\";\n\nimport DisabledItem from \"./DisabledItem\";\nimport { useSelectContext } from \"./SelectProvider\";\nimport { Option } from \"./type\";\n\ninterface ItemProps {\n item: Option;\n primaryColor: string;\n}\n\nconst Item: React.FC = ({ item, primaryColor }) => {\n const { classNames, value, handleValueChange, formatOptionLabel } = useSelectContext();\n\n const isSelected = useMemo(() => {\n return value !== null && !Array.isArray(value) && value.value === item.value;\n }, [item.value, value]);\n\n const textHoverColor = useMemo(() => {\n if (COLORS.includes(primaryColor)) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n return THEME_DATA.textHover[primaryColor];\n }\n return THEME_DATA.textHover[DEFAULT_THEME];\n }, [primaryColor]);\n\n const bgColor = useMemo(() => {\n if (COLORS.includes(primaryColor)) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n return THEME_DATA.bg[primaryColor];\n }\n return THEME_DATA.bg[DEFAULT_THEME];\n }, [primaryColor]);\n\n const bgHoverColor = useMemo(() => {\n if (COLORS.includes(primaryColor)) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n return THEME_DATA.bgHover[primaryColor];\n }\n return THEME_DATA.bgHover[DEFAULT_THEME];\n }, [primaryColor]);\n\n const getItemClass = useCallback(() => {\n const baseClass =\n \"block transition duration-200 px-2 py-2 cursor-pointer select-none truncate rounded\";\n const selectedClass = isSelected\n ? `text-white ${bgColor}`\n : `text-gray-500 ${bgHoverColor} ${textHoverColor}`;\n\n return classNames && classNames.listItem\n ? classNames.listItem({ isSelected })\n : `${baseClass} ${selectedClass}`;\n }, [bgColor, bgHoverColor, classNames, isSelected, textHoverColor]);\n\n return (\n <>\n {formatOptionLabel ? (\n
    handleValueChange(item)}>\n {formatOptionLabel({ ...item, isSelected })}\n
    \n ) : (\n <>\n {item.disabled ? (\n {item.label}\n ) : (\n handleValueChange(item)}\n className={getItemClass()}\n >\n {item.label}\n \n )}\n \n )}\n \n );\n};\n\nexport default Item;\n"]} \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Options.js b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Options.js new file mode 100644 index 0000000..588fd4a --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Options.js @@ -0,0 +1,70 @@ +import React, { useCallback, useContext, useMemo } from "react"; +import { DEFAULT_THEME } from "../constants"; +import DisabledItem from "./DisabledItem"; +import GroupItem from "./GroupItem"; +import Item from "./Item"; +import { SelectContext } from "./SelectProvider"; +const Options = ({ list, noOptionsMessage, text, isMultiple, value, primaryColor = DEFAULT_THEME }) => { + const { classNames } = useContext(SelectContext); + const filterByText = useCallback(() => { + const filterItem = (item) => { + return item.label.toLowerCase().indexOf(text.toLowerCase()) > -1; + }; + let result = list.map(item => { + if ("options" in item) { + return { + label: item.label, + options: item.options.filter(filterItem) + }; + } + return item; + }); + result = result.filter(item => { + if ("options" in item) { + return item.options.length > 0; + } + return filterItem(item); + }); + return result; + }, [text, list]); + const removeValues = useCallback((array) => { + if (!isMultiple) { + return array; + } + if (Array.isArray(value)) { + const valueId = value.map(item => item.value); + const filterItem = (item) => !valueId.includes(item.value); + let newArray = array.map(item => { + if ("options" in item) { + return { + label: item.label, + options: item.options.filter(filterItem) + }; + } + return item; + }); + newArray = newArray.filter(item => { + if ("options" in item) { + return item.options.length > 0; + } + else { + return filterItem(item); + } + }); + return newArray; + } + return array; + }, [isMultiple, value]); + const filterResult = useMemo(() => { + return removeValues(filterByText()); + }, [filterByText, removeValues]); + return (React.createElement("div", { role: "options", className: classNames && classNames.list ? classNames.list : "max-h-72 overflow-y-auto" }, + filterResult.map((item, index) => (React.createElement(React.Fragment, { key: index }, "options" in item ? (React.createElement(React.Fragment, null, + React.createElement("div", { className: "px-2.5" }, + React.createElement(GroupItem, { primaryColor: primaryColor || DEFAULT_THEME, item: item })), + index + 1 < filterResult.length && React.createElement("hr", { className: "my-1" }))) : (React.createElement("div", { className: "px-2.5" }, + React.createElement(Item, { primaryColor: primaryColor || DEFAULT_THEME, item: item })))))), + filterResult.length === 0 && React.createElement(DisabledItem, null, noOptionsMessage))); +}; +export default Options; +//# sourceMappingURL=Options.js.map \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Options.js.map b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Options.js.map new file mode 100644 index 0000000..d2bcdb6 --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Options.js.map @@ -0,0 +1 @@ +{"version":3,"file":"Options.js","sourceRoot":"","sources":["Options.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useContext, useMemo } from \"react\";\n\nimport { DEFAULT_THEME } from \"../constants\";\n\nimport DisabledItem from \"./DisabledItem\";\nimport GroupItem from \"./GroupItem\";\nimport Item from \"./Item\";\nimport { SelectContext } from \"./SelectProvider\";\nimport { Option, Options as ListOption } from \"./type\";\n\ninterface OptionsProps {\n list: ListOption;\n noOptionsMessage: string;\n text: string;\n isMultiple: boolean;\n value: Option | Option[] | null;\n primaryColor: string;\n}\n\nconst Options: React.FC = ({\n list,\n noOptionsMessage,\n text,\n isMultiple,\n value,\n primaryColor = DEFAULT_THEME\n}) => {\n const { classNames } = useContext(SelectContext);\n const filterByText = useCallback(() => {\n const filterItem = (item: Option) => {\n return item.label.toLowerCase().indexOf(text.toLowerCase()) > -1;\n };\n\n let result = list.map(item => {\n if (\"options\" in item) {\n return {\n label: item.label,\n options: item.options.filter(filterItem)\n };\n }\n return item;\n });\n\n result = result.filter(item => {\n if (\"options\" in item) {\n return item.options.length > 0;\n }\n return filterItem(item);\n });\n\n return result;\n }, [text, list]);\n\n const removeValues = useCallback(\n (array: ListOption) => {\n if (!isMultiple) {\n return array;\n }\n\n if (Array.isArray(value)) {\n const valueId = value.map(item => item.value);\n\n const filterItem = (item: Option) => !valueId.includes(item.value);\n\n let newArray = array.map(item => {\n if (\"options\" in item) {\n return {\n label: item.label,\n options: item.options.filter(filterItem)\n };\n }\n return item;\n });\n\n newArray = newArray.filter(item => {\n if (\"options\" in item) {\n return item.options.length > 0;\n } else {\n return filterItem(item);\n }\n });\n\n return newArray;\n }\n return array;\n },\n [isMultiple, value]\n );\n\n const filterResult = useMemo(() => {\n return removeValues(filterByText());\n }, [filterByText, removeValues]);\n\n return (\n \n {filterResult.map((item, index) => (\n \n {\"options\" in item ? (\n <>\n
    \n \n
    \n\n {index + 1 < filterResult.length &&
    }\n \n ) : (\n
    \n \n
    \n )}\n     \n ))}\n\n {filterResult.length === 0 && {noOptionsMessage}}\n \n );\n};\n\nexport default Options;\n"]} \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Options.jsx b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Options.jsx new file mode 100644 index 0000000..fefc0fd --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Options.jsx @@ -0,0 +1,78 @@ +import React, { useCallback, useContext, useMemo } from "react"; +import { DEFAULT_THEME } from "../constants"; +import DisabledItem from "./DisabledItem"; +import GroupItem from "./GroupItem"; +import Item from "./Item"; +import { SelectContext } from "./SelectProvider"; +const Options = ({ list, noOptionsMessage, text, isMultiple, value, primaryColor = DEFAULT_THEME }) => { + const { classNames } = useContext(SelectContext); + const filterByText = useCallback(() => { + const filterItem = (item) => { + return item.label.toLowerCase().indexOf(text.toLowerCase()) > -1; + }; + let result = list.map(item => { + if ("options" in item) { + return { + label: item.label, + options: item.options.filter(filterItem) + }; + } + return item; + }); + result = result.filter(item => { + if ("options" in item) { + return item.options.length > 0; + } + return filterItem(item); + }); + return result; + }, [text, list]); + const removeValues = useCallback((array) => { + if (!isMultiple) { + return array; + } + if (Array.isArray(value)) { + const valueId = value.map(item => item.value); + const filterItem = (item) => !valueId.includes(item.value); + let newArray = array.map(item => { + if ("options" in item) { + return { + label: item.label, + options: item.options.filter(filterItem) + }; + } + return item; + }); + newArray = newArray.filter(item => { + if ("options" in item) { + return item.options.length > 0; + } + else { + return filterItem(item); + } + }); + return newArray; + } + return array; + }, [isMultiple, value]); + const filterResult = useMemo(() => { + return removeValues(filterByText()); + }, [filterByText, removeValues]); + return (
    + {filterResult.map((item, index) => ( + {"options" in item ? (<> +
    + +
    + + {index + 1 < filterResult.length &&
    } + ) : (
    + +
    )} +     ))} + + {filterResult.length === 0 && {noOptionsMessage}} +
    ); +}; +export default Options; +//# sourceMappingURL=Options.jsx.map \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Options.jsx.map b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Options.jsx.map new file mode 100644 index 0000000..cc69015 --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Options.jsx.map @@ -0,0 +1 @@ +{"version":3,"file":"Options.jsx","sourceRoot":"","sources":["Options.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useContext, useMemo } from \"react\";\n\nimport { DEFAULT_THEME } from \"../constants\";\n\nimport DisabledItem from \"./DisabledItem\";\nimport GroupItem from \"./GroupItem\";\nimport Item from \"./Item\";\nimport { SelectContext } from \"./SelectProvider\";\nimport { Option, Options as ListOption } from \"./type\";\n\ninterface OptionsProps {\n list: ListOption;\n noOptionsMessage: string;\n text: string;\n isMultiple: boolean;\n value: Option | Option[] | null;\n primaryColor: string;\n}\n\nconst Options: React.FC = ({\n list,\n noOptionsMessage,\n text,\n isMultiple,\n value,\n primaryColor = DEFAULT_THEME\n}) => {\n const { classNames } = useContext(SelectContext);\n const filterByText = useCallback(() => {\n const filterItem = (item: Option) => {\n return item.label.toLowerCase().indexOf(text.toLowerCase()) > -1;\n };\n\n let result = list.map(item => {\n if (\"options\" in item) {\n return {\n label: item.label,\n options: item.options.filter(filterItem)\n };\n }\n return item;\n });\n\n result = result.filter(item => {\n if (\"options\" in item) {\n return item.options.length > 0;\n }\n return filterItem(item);\n });\n\n return result;\n }, [text, list]);\n\n const removeValues = useCallback(\n (array: ListOption) => {\n if (!isMultiple) {\n return array;\n }\n\n if (Array.isArray(value)) {\n const valueId = value.map(item => item.value);\n\n const filterItem = (item: Option) => !valueId.includes(item.value);\n\n let newArray = array.map(item => {\n if (\"options\" in item) {\n return {\n label: item.label,\n options: item.options.filter(filterItem)\n };\n }\n return item;\n });\n\n newArray = newArray.filter(item => {\n if (\"options\" in item) {\n return item.options.length > 0;\n } else {\n return filterItem(item);\n }\n });\n\n return newArray;\n }\n return array;\n },\n [isMultiple, value]\n );\n\n const filterResult = useMemo(() => {\n return removeValues(filterByText());\n }, [filterByText, removeValues]);\n\n return (\n \n {filterResult.map((item, index) => (\n \n {\"options\" in item ? (\n <>\n
    \n \n
    \n\n {index + 1 < filterResult.length &&
    }\n \n ) : (\n
    \n \n
    \n )}\n     \n ))}\n\n {filterResult.length === 0 && {noOptionsMessage}}\n \n );\n};\n\nexport default Options;\n"]} \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/SearchInput.js b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/SearchInput.js new file mode 100644 index 0000000..937becd --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/SearchInput.js @@ -0,0 +1,17 @@ +import React, { forwardRef, useContext } from "react"; +import { SearchIcon } from "./Icons"; +import { SelectContext } from "./SelectProvider"; +const SearchInput = forwardRef(function SearchInput({ placeholder = "", value = "", onChange, name = "" }, ref) { + const { classNames } = useContext(SelectContext); + return (React.createElement("div", { className: classNames && classNames.searchContainer + ? classNames.searchContainer + : "relative py-1 px-2.5" }, + React.createElement(SearchIcon, { className: classNames && classNames.searchIcon + ? classNames.searchIcon + : "absolute w-5 h-5 mt-2.5 pb-0.5 ml-2 text-gray-500" }), + React.createElement("input", { ref: ref, className: classNames && classNames.searchBox + ? classNames.searchBox + : "w-full py-2 pl-8 text-sm text-gray-500 bg-gray-100 border border-gray-200 rounded focus:border-gray-200 focus:ring-0 focus:outline-none", type: "text", placeholder: placeholder, value: value, onChange: onChange, name: name }))); +}); +export default SearchInput; +//# sourceMappingURL=SearchInput.js.map \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/SearchInput.js.map b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/SearchInput.js.map new file mode 100644 index 0000000..f626b66 --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/SearchInput.js.map @@ -0,0 +1 @@ +{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AASjD,MAAM,WAAW,GAAG,UAAU,CAAqC,SAAS,WAAW,CACnF,EAAE,WAAW,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,GAAG,EAAE,EAAE,EACrD,GAAG;IAEH,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IACjD,OAAO,CACH,6BACI,SAAS,EACL,UAAU,IAAI,UAAU,CAAC,eAAe;YACpC,CAAC,CAAC,UAAU,CAAC,eAAe;YAC5B,CAAC,CAAC,sBAAsB;QAGhC,oBAAC,UAAU,IACP,SAAS,EACL,UAAU,IAAI,UAAU,CAAC,UAAU;gBAC/B,CAAC,CAAC,UAAU,CAAC,UAAU;gBACvB,CAAC,CAAC,mDAAmD,GAE/D;QACF,+BACI,GAAG,EAAE,GAAG,EACR,SAAS,EACL,UAAU,IAAI,UAAU,CAAC,SAAS;gBAC9B,CAAC,CAAC,UAAU,CAAC,SAAS;gBACtB,CAAC,CAAC,yIAAyI,EAEnJ,IAAI,EAAC,MAAM,EACX,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,GACZ,CACA,CACT,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC","sourcesContent":["import React, { forwardRef, useContext } from \"react\";\n\nimport { SearchIcon } from \"./Icons\";\nimport { SelectContext } from \"./SelectProvider\";\n\ninterface SearchInputProps {\n placeholder?: string;\n value: string;\n onChange: (e: React.ChangeEvent) => void;\n name?: string;\n}\n\nconst SearchInput = forwardRef(function SearchInput(\n { placeholder = \"\", value = \"\", onChange, name = \"\" },\n ref\n) {\n const { classNames } = useContext(SelectContext);\n return (\n \n \n \n \n );\n});\n\nexport default SearchInput;\n"]} \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/SearchInput.jsx b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/SearchInput.jsx new file mode 100644 index 0000000..09f62cb --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/SearchInput.jsx @@ -0,0 +1,18 @@ +import React, { forwardRef, useContext } from "react"; +import { SearchIcon } from "./Icons"; +import { SelectContext } from "./SelectProvider"; +const SearchInput = forwardRef(function SearchInput({ placeholder = "", value = "", onChange, name = "" }, ref) { + const { classNames } = useContext(SelectContext); + return (
    + + +
    ); +}); +export default SearchInput; +//# sourceMappingURL=SearchInput.jsx.map \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/SearchInput.jsx.map b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/SearchInput.jsx.map new file mode 100644 index 0000000..3fece7b --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/SearchInput.jsx.map @@ -0,0 +1 @@ +{"version":3,"file":"SearchInput.jsx","sourceRoot":"","sources":["SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AASjD,MAAM,WAAW,GAAG,UAAU,CAAqC,SAAS,WAAW,CACnF,EAAE,WAAW,GAAG,EAAE,EAAE,KAAK,GAAG,EAAE,EAAE,QAAQ,EAAE,IAAI,GAAG,EAAE,EAAE,EACrD,GAAG;IAEH,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;IACjD,OAAO,CACH,CAAC,GAAG,CACA,SAAS,CAAC,CACN,UAAU,IAAI,UAAU,CAAC,eAAe;YACpC,CAAC,CAAC,UAAU,CAAC,eAAe;YAC5B,CAAC,CAAC,sBAAsB,CAC/B,CAED;YAAA,CAAC,UAAU,CACP,SAAS,CAAC,CACN,UAAU,IAAI,UAAU,CAAC,UAAU;YAC/B,CAAC,CAAC,UAAU,CAAC,UAAU;YACvB,CAAC,CAAC,mDAAmD,CAC5D,EAEL;YAAA,CAAC,KAAK,CACF,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,SAAS,CAAC,CACN,UAAU,IAAI,UAAU,CAAC,SAAS;YAC9B,CAAC,CAAC,UAAU,CAAC,SAAS;YACtB,CAAC,CAAC,yIAAyI,CAClJ,CACD,IAAI,CAAC,MAAM,CACX,WAAW,CAAC,CAAC,WAAW,CAAC,CACzB,KAAK,CAAC,CAAC,KAAK,CAAC,CACb,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,IAAI,CAAC,CAAC,IAAI,CAAC,EAEnB;QAAA,EAAE,GAAG,CAAC,CACT,CAAC;AACN,CAAC,CAAC,CAAC;AAEH,eAAe,WAAW,CAAC","sourcesContent":["import React, { forwardRef, useContext } from \"react\";\n\nimport { SearchIcon } from \"./Icons\";\nimport { SelectContext } from \"./SelectProvider\";\n\ninterface SearchInputProps {\n placeholder?: string;\n value: string;\n onChange: (e: React.ChangeEvent) => void;\n name?: string;\n}\n\nconst SearchInput = forwardRef(function SearchInput(\n { placeholder = \"\", value = \"\", onChange, name = \"\" },\n ref\n) {\n const { classNames } = useContext(SelectContext);\n return (\n \n \n \n \n );\n});\n\nexport default SearchInput;\n"]} \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Select.js b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Select.js new file mode 100644 index 0000000..b3aca3b --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Select.js @@ -0,0 +1,159 @@ +import React, { useCallback, useEffect, useRef, useState } from "react"; +import { COLORS, DEFAULT_THEME, THEME_DATA } from "../constants"; +import useOnClickOutside from "../hooks/use-onclick-outside"; +import { ChevronIcon, CloseIcon } from "./Icons"; +import Options from "./Options"; +import SearchInput from "./SearchInput"; +import SelectProvider from "./SelectProvider"; +import Spinner from "./Spinner"; +const Select = ({ options = [], value = null, onChange, onSearchInputChange, placeholder = "Select...", searchInputPlaceholder = "Search...", isMultiple = false, isClearable = false, isSearchable = false, isDisabled = false, loading = false, menuIsOpen = false, noOptionsMessage = "No options found", primaryColor = DEFAULT_THEME, formatGroupLabel = null, formatOptionLabel = null, classNames }) => { + const [open, setOpen] = useState(menuIsOpen); + const [list, setList] = useState(options); + const [inputValue, setInputValue] = useState(""); + const ref = useRef(null); + const searchBoxRef = useRef(null); + useEffect(() => { + const formatItem = (item) => { + if ("disabled" in item) + return item; + return { + ...item, + disabled: false + }; + }; + setList(options.map(item => { + if ("options" in item) { + return { + label: item.label, + options: item.options.map(formatItem) + }; + } + else { + return formatItem(item); + } + })); + }, [options]); + useEffect(() => { + if (isSearchable) { + if (open) { + searchBoxRef.current?.select(); + } + else { + setInputValue(""); + } + } + }, [open, isSearchable]); + const toggle = useCallback(() => { + if (!isDisabled) { + setOpen(!open); + } + }, [isDisabled, open]); + const closeDropDown = useCallback(() => { + if (open) + setOpen(false); + }, [open]); + useOnClickOutside(ref, () => { + closeDropDown(); + }); + const onPressEnterOrSpace = useCallback((e) => { + e.preventDefault(); + if ((e.code === "Enter" || e.code === "Space") && !isDisabled) { + toggle(); + } + }, [isDisabled, toggle]); + const handleValueChange = useCallback((selected) => { + function update() { + if (!isMultiple && !Array.isArray(value)) { + closeDropDown(); + onChange(selected); + } + if (isMultiple && (Array.isArray(value) || value === null)) { + onChange(value === null ? [selected] : [...value, selected]); + } + } + if (selected !== value) { + update(); + } + }, [closeDropDown, isMultiple, onChange, value]); + const clearValue = useCallback((e) => { + e.stopPropagation(); + onChange(null); + }, [onChange]); + const removeItem = useCallback((e, item) => { + if (isMultiple && Array.isArray(value) && value.length) { + e.stopPropagation(); + const result = value.filter(current => item.value !== current.value); + onChange(result.length ? result : null); + } + }, [isMultiple, onChange, value]); + const getSelectClass = useCallback(() => { + let ringColor = THEME_DATA.ring[DEFAULT_THEME]; + if (COLORS.includes(primaryColor)) { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + ringColor = THEME_DATA.ring[primaryColor]; + } + let borderFocus = THEME_DATA.borderFocus[DEFAULT_THEME]; + if (COLORS.includes(primaryColor)) { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + borderFocus = THEME_DATA.borderFocus[primaryColor]; + } + const baseClass = "flex text-sm text-gray-500 border border-gray-300 rounded shadow-sm transition-all duration-300 focus:outline-none"; + const defaultClass = `${baseClass} ${isDisabled + ? "bg-gray-200" + : `bg-white hover:border-gray-400 ${borderFocus} focus:ring ${ringColor}`}`; + return classNames && classNames.menuButton + ? classNames.menuButton({ isDisabled }) + : defaultClass; + }, [classNames, isDisabled, primaryColor]); + const getTagItemClass = useCallback(() => { + const baseClasse = "bg-gray-200 border rounded-sm flex space-x-1"; + const disabledClass = isDisabled ? "border-gray-500 px-1" : "pl-1"; + return classNames && classNames.tagItem + ? classNames.tagItem({ isDisabled }) + : `${baseClasse} ${disabledClass}`; + }, [classNames, isDisabled]); + return (React.createElement(SelectProvider, { otherData: { + formatGroupLabel, + formatOptionLabel, + classNames + }, value: value, handleValueChange: handleValueChange }, + React.createElement("div", { className: "relative w-full", ref: ref }, + React.createElement("div", { tabIndex: 0, "aria-expanded": open, onKeyDown: onPressEnterOrSpace, onClick: toggle, className: getSelectClass() }, + React.createElement("div", { className: "grow pl-2.5 py-2 pr-2 flex flex-wrap gap-1" }, !isMultiple ? (React.createElement("p", { className: "truncate cursor-default select-none" }, value && !Array.isArray(value) ? value.label : placeholder)) : (React.createElement(React.Fragment, null, + value === null && placeholder, + Array.isArray(value) && + value.map((item, index) => (React.createElement("div", { className: getTagItemClass(), key: index }, + React.createElement("p", { className: classNames && classNames.tagItemText + ? classNames.tagItemText + : "text-gray-600 truncate cursor-default select-none" }, item.label), + !isDisabled && (React.createElement("div", { onClick: e => removeItem(e, item), className: classNames && + classNames.tagItemIconContainer + ? classNames.tagItemIconContainer + : "flex items-center px-1 cursor-pointer rounded-r-sm hover:bg-red-200 hover:text-red-600" }, + React.createElement(CloseIcon, { className: classNames && classNames.tagItemIcon + ? classNames.tagItemIcon + : "w-3 h-3 mt-0.5" }))))))))), + React.createElement("div", { className: "flex flex-none items-center py-1.5" }, + loading && (React.createElement("div", { className: "px-1.5" }, + React.createElement(Spinner, { primaryColor: primaryColor }))), + isClearable && !isDisabled && value !== null && (React.createElement("div", { className: "px-1.5 cursor-pointer", onClick: clearValue }, + React.createElement(CloseIcon, { className: classNames && classNames.closeIcon + ? classNames.closeIcon + : "w-5 h-5 p-0.5" }))), + React.createElement("div", { className: "h-full" }, + React.createElement("span", { className: "w-px h-full inline-block text-white bg-gray-300 text-opacity-0" })), + React.createElement("div", { className: "px-1.5" }, + React.createElement(ChevronIcon, { className: `transition duration-300 w-6 h-6 p-0.5${open ? " transform rotate-90 text-gray-500" : " text-gray-300"}` })))), + open && !isDisabled && (React.createElement("div", { tabIndex: -1, className: classNames && classNames.menu + ? classNames.menu + : "absolute z-10 w-full bg-white shadow-lg border rounded py-1 mt-1.5 text-sm text-gray-700" }, + isSearchable && (React.createElement(SearchInput, { ref: searchBoxRef, value: inputValue, placeholder: searchInputPlaceholder, onChange: e => { + onSearchInputChange(e); + setInputValue(e.target.value); + } })), + React.createElement(Options, { list: list, noOptionsMessage: noOptionsMessage, text: inputValue, isMultiple: isMultiple, value: value, primaryColor: primaryColor || DEFAULT_THEME })))))); +}; +export default Select; +//# sourceMappingURL=Select.js.map \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Select.js.map b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Select.js.map new file mode 100644 index 0000000..2cc1abb --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Select.js.map @@ -0,0 +1 @@ +{"version":3,"file":"Select.js","sourceRoot":"","sources":["Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { COLORS, DEFAULT_THEME, THEME_DATA } from \"../constants\";\nimport useOnClickOutside from \"../hooks/use-onclick-outside\";\n\nimport { ChevronIcon, CloseIcon } from \"./Icons\";\nimport Options from \"./Options\";\nimport SearchInput from \"./SearchInput\";\nimport SelectProvider from \"./SelectProvider\";\nimport Spinner from \"./Spinner\";\nimport { GroupOption, Option, Options as ListOption } from \"./type\";\n\ninterface SelectProps {\n options: ListOption;\n value: Option | Option[] | null;\n onChange: (value: Option | Option[] | null) => void;\n onSearchInputChange: (e: React.ChangeEvent) => void;\n placeholder?: string;\n isMultiple?: boolean;\n isClearable?: boolean;\n isSearchable?: boolean;\n isDisabled?: boolean;\n loading?: boolean;\n menuIsOpen?: boolean;\n searchInputPlaceholder?: string;\n noOptionsMessage?: string;\n primaryColor: string;\n formatGroupLabel?: ((data: GroupOption) => JSX.Element) | null;\n formatOptionLabel?: ((data: Option) => JSX.Element) | null;\n classNames?: {\n menuButton?: ({ isDisabled }: { isDisabled: boolean }) => string;\n menu?: string;\n tagItem?: ({ isDisabled }: { isDisabled: boolean }) => string;\n tagItemText?: string;\n tagItemIconContainer?: string;\n tagItemIcon?: string;\n list?: string;\n listGroupLabel?: string;\n listItem?: ({ isSelected }: { isSelected: boolean }) => string;\n listDisabledItem?: string;\n ChevronIcon?: ({ open }: { open: boolean }) => string;\n searchContainer?: string;\n searchBox?: string;\n searchIcon?: string;\n closeIcon?: string;\n };\n}\n\nconst Select: React.FC = ({\n options = [],\n value = null,\n onChange,\n onSearchInputChange,\n placeholder = \"Select...\",\n searchInputPlaceholder = \"Search...\",\n isMultiple = false,\n isClearable = false,\n isSearchable = false,\n isDisabled = false,\n loading = false,\n menuIsOpen = false,\n noOptionsMessage = \"No options found\",\n primaryColor = DEFAULT_THEME,\n formatGroupLabel = null,\n formatOptionLabel = null,\n classNames\n}) => {\n const [open, setOpen] = useState(menuIsOpen);\n const [list, setList] = useState(options);\n const [inputValue, setInputValue] = useState(\"\");\n const ref = useRef(null);\n const searchBoxRef = useRef(null);\n\n useEffect(() => {\n const formatItem = (item: Option) => {\n if (\"disabled\" in item) return item;\n return {\n ...item,\n disabled: false\n };\n };\n\n setList(\n options.map(item => {\n if (\"options\" in item) {\n return {\n label: item.label,\n options: item.options.map(formatItem)\n };\n } else {\n return formatItem(item);\n }\n })\n );\n }, [options]);\n\n useEffect(() => {\n if (isSearchable) {\n if (open) {\n searchBoxRef.current?.select();\n } else {\n setInputValue(\"\");\n }\n }\n }, [open, isSearchable]);\n\n const toggle = useCallback(() => {\n if (!isDisabled) {\n setOpen(!open);\n }\n }, [isDisabled, open]);\n\n const closeDropDown = useCallback(() => {\n if (open) setOpen(false);\n }, [open]);\n\n useOnClickOutside(ref, () => {\n closeDropDown();\n });\n\n const onPressEnterOrSpace = useCallback(\n (e: React.KeyboardEvent) => {\n e.preventDefault();\n if ((e.code === \"Enter\" || e.code === \"Space\") && !isDisabled) {\n toggle();\n }\n },\n [isDisabled, toggle]\n );\n\n const handleValueChange = useCallback(\n (selected: Option) => {\n function update() {\n if (!isMultiple && !Array.isArray(value)) {\n closeDropDown();\n onChange(selected);\n }\n\n if (isMultiple && (Array.isArray(value) || value === null)) {\n onChange(value === null ? [selected] : [...value, selected]);\n }\n }\n\n if (selected !== value) {\n update();\n }\n },\n [closeDropDown, isMultiple, onChange, value]\n );\n\n const clearValue = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation();\n onChange(null);\n },\n [onChange]\n );\n\n const removeItem = useCallback(\n (e: React.MouseEvent, item: Option) => {\n if (isMultiple && Array.isArray(value) && value.length) {\n e.stopPropagation();\n const result = value.filter(current => item.value !== current.value);\n onChange(result.length ? result : null);\n }\n },\n [isMultiple, onChange, value]\n );\n\n const getSelectClass = useCallback(() => {\n let ringColor = THEME_DATA.ring[DEFAULT_THEME];\n if (COLORS.includes(primaryColor)) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n ringColor = THEME_DATA.ring[primaryColor];\n }\n\n let borderFocus = THEME_DATA.borderFocus[DEFAULT_THEME];\n if (COLORS.includes(primaryColor)) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n borderFocus = THEME_DATA.borderFocus[primaryColor];\n }\n const baseClass =\n \"flex text-sm text-gray-500 border border-gray-300 rounded shadow-sm transition-all duration-300 focus:outline-none\";\n const defaultClass = `${baseClass} ${\n isDisabled\n ? \"bg-gray-200\"\n : `bg-white hover:border-gray-400 ${borderFocus} focus:ring ${ringColor}`\n }`;\n\n return classNames && classNames.menuButton\n ? classNames.menuButton({ isDisabled })\n : defaultClass;\n }, [classNames, isDisabled, primaryColor]);\n\n const getTagItemClass = useCallback(() => {\n const baseClasse = \"bg-gray-200 border rounded-sm flex space-x-1\";\n const disabledClass = isDisabled ? \"border-gray-500 px-1\" : \"pl-1\";\n return classNames && classNames.tagItem\n ? classNames.tagItem({ isDisabled })\n : `${baseClasse} ${disabledClass}`;\n }, [classNames, isDisabled]);\n\n return (\n \n
    \n \n
    \n {!isMultiple ? (\n

    \n {value && !Array.isArray(value) ? value.label : placeholder}\n

    \n ) : (\n <>\n {value === null && placeholder}\n\n {Array.isArray(value) &&\n value.map((item, index) => (\n
    \n \n {item.label}\n

    \n {!isDisabled && (\n removeItem(e, item)}\n className={\n classNames &&\n classNames.tagItemIconContainer\n ? classNames.tagItemIconContainer\n : \"flex items-center px-1 cursor-pointer rounded-r-sm hover:bg-red-200 hover:text-red-600\"\n }\n >\n \n
    \n )}\n
    \n ))}\n \n )}\n
    \n\n
    \n {loading && (\n
    \n \n
    \n )}\n\n {isClearable && !isDisabled && value !== null && (\n
    \n \n
    \n )}\n\n
    \n \n
    \n\n
    \n \n
    \n
    \n \n\n {open && !isDisabled && (\n \n {isSearchable && (\n {\n onSearchInputChange(e);\n setInputValue(e.target.value);\n }}\n />\n )}\n\n \n \n )}\n \n \n );\n};\n\nexport default Select;\n"]} \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Select.jsx b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Select.jsx new file mode 100644 index 0000000..e600929 --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Select.jsx @@ -0,0 +1,184 @@ +import React, { useCallback, useEffect, useRef, useState } from "react"; +import { COLORS, DEFAULT_THEME, THEME_DATA } from "../constants"; +import useOnClickOutside from "../hooks/use-onclick-outside"; +import { ChevronIcon, CloseIcon } from "./Icons"; +import Options from "./Options"; +import SearchInput from "./SearchInput"; +import SelectProvider from "./SelectProvider"; +import Spinner from "./Spinner"; +const Select = ({ options = [], value = null, onChange, onSearchInputChange, placeholder = "Select...", searchInputPlaceholder = "Search...", isMultiple = false, isClearable = false, isSearchable = false, isDisabled = false, loading = false, menuIsOpen = false, noOptionsMessage = "No options found", primaryColor = DEFAULT_THEME, formatGroupLabel = null, formatOptionLabel = null, classNames }) => { + const [open, setOpen] = useState(menuIsOpen); + const [list, setList] = useState(options); + const [inputValue, setInputValue] = useState(""); + const ref = useRef(null); + const searchBoxRef = useRef(null); + useEffect(() => { + const formatItem = (item) => { + if ("disabled" in item) + return item; + return { + ...item, + disabled: false + }; + }; + setList(options.map(item => { + if ("options" in item) { + return { + label: item.label, + options: item.options.map(formatItem) + }; + } + else { + return formatItem(item); + } + })); + }, [options]); + useEffect(() => { + if (isSearchable) { + if (open) { + searchBoxRef.current?.select(); + } + else { + setInputValue(""); + } + } + }, [open, isSearchable]); + const toggle = useCallback(() => { + if (!isDisabled) { + setOpen(!open); + } + }, [isDisabled, open]); + const closeDropDown = useCallback(() => { + if (open) + setOpen(false); + }, [open]); + useOnClickOutside(ref, () => { + closeDropDown(); + }); + const onPressEnterOrSpace = useCallback((e) => { + e.preventDefault(); + if ((e.code === "Enter" || e.code === "Space") && !isDisabled) { + toggle(); + } + }, [isDisabled, toggle]); + const handleValueChange = useCallback((selected) => { + function update() { + if (!isMultiple && !Array.isArray(value)) { + closeDropDown(); + onChange(selected); + } + if (isMultiple && (Array.isArray(value) || value === null)) { + onChange(value === null ? [selected] : [...value, selected]); + } + } + if (selected !== value) { + update(); + } + }, [closeDropDown, isMultiple, onChange, value]); + const clearValue = useCallback((e) => { + e.stopPropagation(); + onChange(null); + }, [onChange]); + const removeItem = useCallback((e, item) => { + if (isMultiple && Array.isArray(value) && value.length) { + e.stopPropagation(); + const result = value.filter(current => item.value !== current.value); + onChange(result.length ? result : null); + } + }, [isMultiple, onChange, value]); + const getSelectClass = useCallback(() => { + let ringColor = THEME_DATA.ring[DEFAULT_THEME]; + if (COLORS.includes(primaryColor)) { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + ringColor = THEME_DATA.ring[primaryColor]; + } + let borderFocus = THEME_DATA.borderFocus[DEFAULT_THEME]; + if (COLORS.includes(primaryColor)) { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + borderFocus = THEME_DATA.borderFocus[primaryColor]; + } + const baseClass = "flex text-sm text-gray-500 border border-gray-300 rounded shadow-sm transition-all duration-300 focus:outline-none"; + const defaultClass = `${baseClass} ${isDisabled + ? "bg-gray-200" + : `bg-white hover:border-gray-400 ${borderFocus} focus:ring ${ringColor}`}`; + return classNames && classNames.menuButton + ? classNames.menuButton({ isDisabled }) + : defaultClass; + }, [classNames, isDisabled, primaryColor]); + const getTagItemClass = useCallback(() => { + const baseClasse = "bg-gray-200 border rounded-sm flex space-x-1"; + const disabledClass = isDisabled ? "border-gray-500 px-1" : "pl-1"; + return classNames && classNames.tagItem + ? classNames.tagItem({ isDisabled }) + : `${baseClasse} ${disabledClass}`; + }, [classNames, isDisabled]); + return ( +
    +
    +
    + {!isMultiple ? (

    + {value && !Array.isArray(value) ? value.label : placeholder} +

    ) : (<> + {value === null && placeholder} + + {Array.isArray(value) && + value.map((item, index) => (
    +

    + {item.label} +

    + {!isDisabled && (
    removeItem(e, item)} className={classNames && + classNames.tagItemIconContainer + ? classNames.tagItemIconContainer + : "flex items-center px-1 cursor-pointer rounded-r-sm hover:bg-red-200 hover:text-red-600"}> + +
    )} +
    ))} + )} +
    + +
    + {loading && (
    + +
    )} + + {isClearable && !isDisabled && value !== null && (
    + +
    )} + +
    + +
    + +
    + +
    +
    +
    + + {open && !isDisabled && (
    + {isSearchable && ( { + onSearchInputChange(e); + setInputValue(e.target.value); + }}/>)} + + +
    )} +
    +     ); +}; +export default Select; +//# sourceMappingURL=Select.jsx.map \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Select.jsx.map b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Select.jsx.map new file mode 100644 index 0000000..6ff517d --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Select.jsx.map @@ -0,0 +1 @@ +{"version":3,"file":"Select.jsx","sourceRoot":"","sources":["Select.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { COLORS, DEFAULT_THEME, THEME_DATA } from \"../constants\";\nimport useOnClickOutside from \"../hooks/use-onclick-outside\";\n\nimport { ChevronIcon, CloseIcon } from \"./Icons\";\nimport Options from \"./Options\";\nimport SearchInput from \"./SearchInput\";\nimport SelectProvider from \"./SelectProvider\";\nimport Spinner from \"./Spinner\";\nimport { GroupOption, Option, Options as ListOption } from \"./type\";\n\ninterface SelectProps {\n options: ListOption;\n value: Option | Option[] | null;\n onChange: (value: Option | Option[] | null) => void;\n onSearchInputChange: (e: React.ChangeEvent) => void;\n placeholder?: string;\n isMultiple?: boolean;\n isClearable?: boolean;\n isSearchable?: boolean;\n isDisabled?: boolean;\n loading?: boolean;\n menuIsOpen?: boolean;\n searchInputPlaceholder?: string;\n noOptionsMessage?: string;\n primaryColor: string;\n formatGroupLabel?: ((data: GroupOption) => JSX.Element) | null;\n formatOptionLabel?: ((data: Option) => JSX.Element) | null;\n classNames?: {\n menuButton?: ({ isDisabled }: { isDisabled: boolean }) => string;\n menu?: string;\n tagItem?: ({ isDisabled }: { isDisabled: boolean }) => string;\n tagItemText?: string;\n tagItemIconContainer?: string;\n tagItemIcon?: string;\n list?: string;\n listGroupLabel?: string;\n listItem?: ({ isSelected }: { isSelected: boolean }) => string;\n listDisabledItem?: string;\n ChevronIcon?: ({ open }: { open: boolean }) => string;\n searchContainer?: string;\n searchBox?: string;\n searchIcon?: string;\n closeIcon?: string;\n };\n}\n\nconst Select: React.FC = ({\n options = [],\n value = null,\n onChange,\n onSearchInputChange,\n placeholder = \"Select...\",\n searchInputPlaceholder = \"Search...\",\n isMultiple = false,\n isClearable = false,\n isSearchable = false,\n isDisabled = false,\n loading = false,\n menuIsOpen = false,\n noOptionsMessage = \"No options found\",\n primaryColor = DEFAULT_THEME,\n formatGroupLabel = null,\n formatOptionLabel = null,\n classNames\n}) => {\n const [open, setOpen] = useState(menuIsOpen);\n const [list, setList] = useState(options);\n const [inputValue, setInputValue] = useState(\"\");\n const ref = useRef(null);\n const searchBoxRef = useRef(null);\n\n useEffect(() => {\n const formatItem = (item: Option) => {\n if (\"disabled\" in item) return item;\n return {\n ...item,\n disabled: false\n };\n };\n\n setList(\n options.map(item => {\n if (\"options\" in item) {\n return {\n label: item.label,\n options: item.options.map(formatItem)\n };\n } else {\n return formatItem(item);\n }\n })\n );\n }, [options]);\n\n useEffect(() => {\n if (isSearchable) {\n if (open) {\n searchBoxRef.current?.select();\n } else {\n setInputValue(\"\");\n }\n }\n }, [open, isSearchable]);\n\n const toggle = useCallback(() => {\n if (!isDisabled) {\n setOpen(!open);\n }\n }, [isDisabled, open]);\n\n const closeDropDown = useCallback(() => {\n if (open) setOpen(false);\n }, [open]);\n\n useOnClickOutside(ref, () => {\n closeDropDown();\n });\n\n const onPressEnterOrSpace = useCallback(\n (e: React.KeyboardEvent) => {\n e.preventDefault();\n if ((e.code === \"Enter\" || e.code === \"Space\") && !isDisabled) {\n toggle();\n }\n },\n [isDisabled, toggle]\n );\n\n const handleValueChange = useCallback(\n (selected: Option) => {\n function update() {\n if (!isMultiple && !Array.isArray(value)) {\n closeDropDown();\n onChange(selected);\n }\n\n if (isMultiple && (Array.isArray(value) || value === null)) {\n onChange(value === null ? [selected] : [...value, selected]);\n }\n }\n\n if (selected !== value) {\n update();\n }\n },\n [closeDropDown, isMultiple, onChange, value]\n );\n\n const clearValue = useCallback(\n (e: React.MouseEvent) => {\n e.stopPropagation();\n onChange(null);\n },\n [onChange]\n );\n\n const removeItem = useCallback(\n (e: React.MouseEvent, item: Option) => {\n if (isMultiple && Array.isArray(value) && value.length) {\n e.stopPropagation();\n const result = value.filter(current => item.value !== current.value);\n onChange(result.length ? result : null);\n }\n },\n [isMultiple, onChange, value]\n );\n\n const getSelectClass = useCallback(() => {\n let ringColor = THEME_DATA.ring[DEFAULT_THEME];\n if (COLORS.includes(primaryColor)) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n ringColor = THEME_DATA.ring[primaryColor];\n }\n\n let borderFocus = THEME_DATA.borderFocus[DEFAULT_THEME];\n if (COLORS.includes(primaryColor)) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n borderFocus = THEME_DATA.borderFocus[primaryColor];\n }\n const baseClass =\n \"flex text-sm text-gray-500 border border-gray-300 rounded shadow-sm transition-all duration-300 focus:outline-none\";\n const defaultClass = `${baseClass} ${\n isDisabled\n ? \"bg-gray-200\"\n : `bg-white hover:border-gray-400 ${borderFocus} focus:ring ${ringColor}`\n }`;\n\n return classNames && classNames.menuButton\n ? classNames.menuButton({ isDisabled })\n : defaultClass;\n }, [classNames, isDisabled, primaryColor]);\n\n const getTagItemClass = useCallback(() => {\n const baseClasse = \"bg-gray-200 border rounded-sm flex space-x-1\";\n const disabledClass = isDisabled ? \"border-gray-500 px-1\" : \"pl-1\";\n return classNames && classNames.tagItem\n ? classNames.tagItem({ isDisabled })\n : `${baseClasse} ${disabledClass}`;\n }, [classNames, isDisabled]);\n\n return (\n \n
    \n \n
    \n {!isMultiple ? (\n

    \n {value && !Array.isArray(value) ? value.label : placeholder}\n

    \n ) : (\n <>\n {value === null && placeholder}\n\n {Array.isArray(value) &&\n value.map((item, index) => (\n
    \n \n {item.label}\n

    \n {!isDisabled && (\n removeItem(e, item)}\n className={\n classNames &&\n classNames.tagItemIconContainer\n ? classNames.tagItemIconContainer\n : \"flex items-center px-1 cursor-pointer rounded-r-sm hover:bg-red-200 hover:text-red-600\"\n }\n >\n \n
    \n )}\n
    \n ))}\n \n )}\n
    \n\n
    \n {loading && (\n
    \n \n
    \n )}\n\n {isClearable && !isDisabled && value !== null && (\n
    \n \n
    \n )}\n\n
    \n \n
    \n\n
    \n \n
    \n
    \n \n\n {open && !isDisabled && (\n \n {isSearchable && (\n {\n onSearchInputChange(e);\n setInputValue(e.target.value);\n }}\n />\n )}\n\n \n \n )}\n \n \n );\n};\n\nexport default Select;\n"]} \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/SelectProvider.js b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/SelectProvider.js new file mode 100644 index 0000000..4d0301c --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/SelectProvider.js @@ -0,0 +1,31 @@ +import React, { createContext, useContext, useMemo } from "react"; +export const SelectContext = createContext({ + value: null, + handleValueChange: selected => { + console.log("selected:", selected); + }, + formatGroupLabel: null, + formatOptionLabel: null, + classNames: undefined +}); +export const useSelectContext = () => { + return useContext(SelectContext); +}; +const SelectProvider = ({ value, handleValueChange, otherData, children }) => { + const store = useMemo(() => { + return { + value, + handleValueChange, + formatGroupLabel: otherData && typeof otherData.formatGroupLabel === "function" + ? otherData.formatGroupLabel + : null, + formatOptionLabel: otherData && typeof otherData.formatOptionLabel === "function" + ? otherData.formatOptionLabel + : null, + classNames: otherData?.classNames || undefined + }; + }, [handleValueChange, otherData, value]); + return React.createElement(SelectContext.Provider, { value: store }, children); +}; +export default SelectProvider; +//# sourceMappingURL=SelectProvider.js.map \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/SelectProvider.js.map b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/SelectProvider.js.map new file mode 100644 index 0000000..c0ff2cf --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/SelectProvider.js.map @@ -0,0 +1 @@ +{"version":3,"file":"SelectProvider.js","sourceRoot":"","sources":["SelectProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAuBlE,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAQ;IAC9C,KAAK,EAAE,IAAI;IACX,iBAAiB,EAAE,QAAQ,CAAC,EAAE;QAC1B,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;IACvC,CAAC;IACD,gBAAgB,EAAE,IAAI;IACtB,iBAAiB,EAAE,IAAI;IACvB,UAAU,EAAE,SAAS;CACxB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAU,EAAE;IACxC,OAAO,UAAU,CAAC,aAAa,CAAC,CAAC;AACrC,CAAC,CAAC;AAEF,MAAM,cAAc,GAAoB,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC1F,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACvB,OAAO;YACH,KAAK;YACL,iBAAiB;YACjB,gBAAgB,EACZ,SAAS,IAAI,OAAO,SAAS,CAAC,gBAAgB,KAAK,UAAU;gBACzD,CAAC,CAAC,SAAS,CAAC,gBAAgB;gBAC5B,CAAC,CAAC,IAAI;YACd,iBAAiB,EACb,SAAS,IAAI,OAAO,SAAS,CAAC,iBAAiB,KAAK,UAAU;gBAC1D,CAAC,CAAC,SAAS,CAAC,iBAAiB;gBAC7B,CAAC,CAAC,IAAI;YACd,UAAU,EAAE,SAAS,EAAE,UAAU,IAAI,SAAS;SACjD,CAAC;IACN,CAAC,EAAE,CAAC,iBAAiB,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAE1C,OAAO,oBAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IAAG,QAAQ,CAA0B,CAAC;AACrF,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import React, { createContext, useContext, useMemo } from \"react\";\n\nimport { ClassNames, GroupOption, Option } from \"./type\";\n\ninterface Store {\n value: Option | Option[] | null;\n handleValueChange: (selected: Option) => void;\n formatGroupLabel: ((data: GroupOption) => JSX.Element) | null;\n formatOptionLabel: ((data: Option) => JSX.Element) | null;\n classNames?: ClassNames;\n}\n\ninterface Props {\n value: Option | Option[] | null;\n handleValueChange: (selected: Option) => void;\n children: JSX.Element;\n otherData: {\n formatGroupLabel: ((data: GroupOption) => JSX.Element) | null;\n formatOptionLabel: ((data: Option) => JSX.Element) | null;\n classNames?: ClassNames;\n };\n}\n\nexport const SelectContext = createContext({\n value: null,\n handleValueChange: selected => {\n console.log(\"selected:\", selected);\n },\n formatGroupLabel: null,\n formatOptionLabel: null,\n classNames: undefined\n});\n\nexport const useSelectContext = (): Store => {\n return useContext(SelectContext);\n};\n\nconst SelectProvider: React.FC = ({ value, handleValueChange, otherData, children }) => {\n const store = useMemo(() => {\n return {\n value,\n handleValueChange,\n formatGroupLabel:\n otherData && typeof otherData.formatGroupLabel === \"function\"\n ? otherData.formatGroupLabel\n : null,\n formatOptionLabel:\n otherData && typeof otherData.formatOptionLabel === \"function\"\n ? otherData.formatOptionLabel\n : null,\n classNames: otherData?.classNames || undefined\n };\n }, [handleValueChange, otherData, value]);\n\n return {children};\n};\n\nexport default SelectProvider;\n"]} \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/SelectProvider.jsx b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/SelectProvider.jsx new file mode 100644 index 0000000..9ccf282 --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/SelectProvider.jsx @@ -0,0 +1,31 @@ +import React, { createContext, useContext, useMemo } from "react"; +export const SelectContext = createContext({ + value: null, + handleValueChange: selected => { + console.log("selected:", selected); + }, + formatGroupLabel: null, + formatOptionLabel: null, + classNames: undefined +}); +export const useSelectContext = () => { + return useContext(SelectContext); +}; +const SelectProvider = ({ value, handleValueChange, otherData, children }) => { + const store = useMemo(() => { + return { + value, + handleValueChange, + formatGroupLabel: otherData && typeof otherData.formatGroupLabel === "function" + ? otherData.formatGroupLabel + : null, + formatOptionLabel: otherData && typeof otherData.formatOptionLabel === "function" + ? otherData.formatOptionLabel + : null, + classNames: otherData?.classNames || undefined + }; + }, [handleValueChange, otherData, value]); + return {children}; +}; +export default SelectProvider; +//# sourceMappingURL=SelectProvider.jsx.map \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/SelectProvider.jsx.map b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/SelectProvider.jsx.map new file mode 100644 index 0000000..ad8bb10 --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/SelectProvider.jsx.map @@ -0,0 +1 @@ +{"version":3,"file":"SelectProvider.jsx","sourceRoot":"","sources":["SelectProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAuBlE,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAQ;IAC9C,KAAK,EAAE,IAAI;IACX,iBAAiB,EAAE,QAAQ,CAAC,EAAE;QAC1B,OAAO,CAAC,GAAG,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;IACvC,CAAC;IACD,gBAAgB,EAAE,IAAI;IACtB,iBAAiB,EAAE,IAAI;IACvB,UAAU,EAAE,SAAS;CACxB,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAU,EAAE;IACxC,OAAO,UAAU,CAAC,aAAa,CAAC,CAAC;AACrC,CAAC,CAAC;AAEF,MAAM,cAAc,GAAoB,CAAC,EAAE,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,EAAE;IAC1F,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACvB,OAAO;YACH,KAAK;YACL,iBAAiB;YACjB,gBAAgB,EACZ,SAAS,IAAI,OAAO,SAAS,CAAC,gBAAgB,KAAK,UAAU;gBACzD,CAAC,CAAC,SAAS,CAAC,gBAAgB;gBAC5B,CAAC,CAAC,IAAI;YACd,iBAAiB,EACb,SAAS,IAAI,OAAO,SAAS,CAAC,iBAAiB,KAAK,UAAU;gBAC1D,CAAC,CAAC,SAAS,CAAC,iBAAiB;gBAC7B,CAAC,CAAC,IAAI;YACd,UAAU,EAAE,SAAS,EAAE,UAAU,IAAI,SAAS;SACjD,CAAC;IACN,CAAC,EAAE,CAAC,iBAAiB,EAAE,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAE1C,OAAO,CAAC,aAAa,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,aAAa,CAAC,QAAQ,CAAC,CAAC;AACrF,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC","sourcesContent":["import React, { createContext, useContext, useMemo } from \"react\";\n\nimport { ClassNames, GroupOption, Option } from \"./type\";\n\ninterface Store {\n value: Option | Option[] | null;\n handleValueChange: (selected: Option) => void;\n formatGroupLabel: ((data: GroupOption) => JSX.Element) | null;\n formatOptionLabel: ((data: Option) => JSX.Element) | null;\n classNames?: ClassNames;\n}\n\ninterface Props {\n value: Option | Option[] | null;\n handleValueChange: (selected: Option) => void;\n children: JSX.Element;\n otherData: {\n formatGroupLabel: ((data: GroupOption) => JSX.Element) | null;\n formatOptionLabel: ((data: Option) => JSX.Element) | null;\n classNames?: ClassNames;\n };\n}\n\nexport const SelectContext = createContext({\n value: null,\n handleValueChange: selected => {\n console.log(\"selected:\", selected);\n },\n formatGroupLabel: null,\n formatOptionLabel: null,\n classNames: undefined\n});\n\nexport const useSelectContext = (): Store => {\n return useContext(SelectContext);\n};\n\nconst SelectProvider: React.FC = ({ value, handleValueChange, otherData, children }) => {\n const store = useMemo(() => {\n return {\n value,\n handleValueChange,\n formatGroupLabel:\n otherData && typeof otherData.formatGroupLabel === \"function\"\n ? otherData.formatGroupLabel\n : null,\n formatOptionLabel:\n otherData && typeof otherData.formatOptionLabel === \"function\"\n ? otherData.formatOptionLabel\n : null,\n classNames: otherData?.classNames || undefined\n };\n }, [handleValueChange, otherData, value]);\n\n return {children};\n};\n\nexport default SelectProvider;\n"]} \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Spinner.js b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Spinner.js new file mode 100644 index 0000000..d66cb05 --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Spinner.js @@ -0,0 +1,17 @@ +import React, { useMemo } from "react"; +import { COLORS, DEFAULT_THEME, THEME_DATA } from "../constants"; +const Spinner = ({ primaryColor = DEFAULT_THEME }) => { + const spinnerColor = useMemo(() => { + if (COLORS.includes(primaryColor)) { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + return THEME_DATA.text[primaryColor]; + } + return THEME_DATA.text[DEFAULT_THEME]; + }, [primaryColor]); + return (React.createElement("svg", { className: `animate-spin mr-0.5 h-5 w-5 ${spinnerColor}`, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, + React.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), + React.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }))); +}; +export default Spinner; +//# sourceMappingURL=Spinner.js.map \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Spinner.js.map b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Spinner.js.map new file mode 100644 index 0000000..5b33bd7 --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Spinner.js.map @@ -0,0 +1 @@ +{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAMjE,MAAM,OAAO,GAAoB,CAAC,EAAE,YAAY,GAAG,aAAa,EAAE,EAAE,EAAE;IAClE,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,IAAI,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;YAC/B,6DAA6D;YAC7D,aAAa;YACb,OAAO,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SACxC;QACD,OAAO,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC1C,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACH,6BACI,SAAS,EAAE,+BAA+B,YAAY,EAAE,EACxD,KAAK,EAAC,4BAA4B,EAClC,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,WAAW;QAEnB,gCACI,SAAS,EAAC,YAAY,EACtB,EAAE,EAAC,IAAI,EACP,EAAE,EAAC,IAAI,EACP,CAAC,EAAC,IAAI,EACN,MAAM,EAAC,cAAc,EACrB,WAAW,EAAC,GAAG,GACjB;QACF,8BACI,SAAS,EAAC,YAAY,EACtB,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,iHAAiH,GACrH,CACA,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import React, { useMemo } from \"react\";\n\nimport { COLORS, DEFAULT_THEME, THEME_DATA } from \"../constants\";\n\ninterface Props {\n primaryColor?: string;\n}\n\nconst Spinner: React.FC = ({ primaryColor = DEFAULT_THEME }) => {\n const spinnerColor = useMemo(() => {\n if (COLORS.includes(primaryColor)) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n return THEME_DATA.text[primaryColor];\n }\n return THEME_DATA.text[DEFAULT_THEME];\n }, [primaryColor]);\n\n return (\n \n \n \n \n );\n};\n\nexport default Spinner;\n"]} \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Spinner.jsx b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Spinner.jsx new file mode 100644 index 0000000..b0019a4 --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Spinner.jsx @@ -0,0 +1,18 @@ +import React, { useMemo } from "react"; +import { COLORS, DEFAULT_THEME, THEME_DATA } from "../constants"; +const Spinner = ({ primaryColor = DEFAULT_THEME }) => { + const spinnerColor = useMemo(() => { + if (COLORS.includes(primaryColor)) { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + return THEME_DATA.text[primaryColor]; + } + return THEME_DATA.text[DEFAULT_THEME]; + }, [primaryColor]); + return ( + + + ); +}; +export default Spinner; +//# sourceMappingURL=Spinner.jsx.map \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Spinner.jsx.map b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Spinner.jsx.map new file mode 100644 index 0000000..98e1be6 --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/Spinner.jsx.map @@ -0,0 +1 @@ +{"version":3,"file":"Spinner.jsx","sourceRoot":"","sources":["Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAMjE,MAAM,OAAO,GAAoB,CAAC,EAAE,YAAY,GAAG,aAAa,EAAE,EAAE,EAAE;IAClE,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,IAAI,MAAM,CAAC,QAAQ,CAAC,YAAY,CAAC,EAAE;YAC/B,6DAA6D;YAC7D,aAAa;YACb,OAAO,UAAU,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;SACxC;QACD,OAAO,UAAU,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAC1C,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC;IAEnB,OAAO,CACH,CAAC,GAAG,CACA,SAAS,CAAC,CAAC,+BAA+B,YAAY,EAAE,CAAC,CACzD,KAAK,CAAC,4BAA4B,CAClC,IAAI,CAAC,MAAM,CACX,OAAO,CAAC,WAAW,CAEnB;YAAA,CAAC,MAAM,CACH,SAAS,CAAC,YAAY,CACtB,EAAE,CAAC,IAAI,CACP,EAAE,CAAC,IAAI,CACP,CAAC,CAAC,IAAI,CACN,MAAM,CAAC,cAAc,CACrB,WAAW,CAAC,GAAG,EAEnB;YAAA,CAAC,IAAI,CACD,SAAS,CAAC,YAAY,CACtB,IAAI,CAAC,cAAc,CACnB,CAAC,CAAC,iHAAiH,EAE3H;QAAA,EAAE,GAAG,CAAC,CACT,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC","sourcesContent":["import React, { useMemo } from \"react\";\n\nimport { COLORS, DEFAULT_THEME, THEME_DATA } from \"../constants\";\n\ninterface Props {\n primaryColor?: string;\n}\n\nconst Spinner: React.FC = ({ primaryColor = DEFAULT_THEME }) => {\n const spinnerColor = useMemo(() => {\n if (COLORS.includes(primaryColor)) {\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n return THEME_DATA.text[primaryColor];\n }\n return THEME_DATA.text[DEFAULT_THEME];\n }, [primaryColor]);\n\n return (\n \n \n \n \n );\n};\n\nexport default Spinner;\n"]} \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/type.js b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/type.js new file mode 100644 index 0000000..c698029 --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/type.js @@ -0,0 +1,2 @@ +export {}; +//# sourceMappingURL=type.js.map \ No newline at end of file diff --git a/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/type.js.map b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/type.js.map new file mode 100644 index 0000000..5258758 --- /dev/null +++ b/.rollup.cache/Users/onesine/Workspace/lab react/packages/react-tailwindcss-select/src/components/type.js.map @@ -0,0 +1 @@ +{"version":3,"file":"type.js","sourceRoot":"","sources":["type.ts"],"names":[],"mappings":"","sourcesContent":["export interface Option {\n value: string;\n label: string;\n disabled?: boolean;\n isSelected?: boolean;\n}\n\nexport interface GroupOption {\n label: string;\n options: Option[];\n}\n\nexport type Options = Array