@stackshift-ui/select 6.0.2 → 6.0.4-beta.0

package/dist/chunk-VCJRWWZ5.mjs

@@ -0,0 +1 @@
+import{DefaultComponent as N,useStackShiftUIComponents as T}from"@stackshift-ui/system";import V from"classnames";import{Fragment as L,jsx as n,jsxs as x}from"react/jsx-runtime";var r="Select",v=({defaultValue:i,variant:c="primary",label:m,labelClass:p,onChange:d,required:g=!1,name:e,items:t,ariaLabel:P,noLabel:y=!1,children:R,className:u,as:b="select",...f})=>{var s;let{[r]:S=N}=T(),o="w-full rounded-global bg-white p-4 text-xs font-semibold leading-none outline-none",l=`${o}`,C=`${o} border border-solid border-primary-foreground`,h=(s={primary:l,outline:C}[c])!=null?s:l;return x(L,{children:[!y&&n("label",{htmlFor:e,className:p,children:m||e}),n(S,{onChange:d,name:e,defaultValue:i,required:g,as:b,className:V(h,u),...f,"data-testid":r,children:t&&t.length>0&&t.map(a=>n("option",{value:a,children:a},a))})]})};v.displayName=r;export{v as a};

package/dist/index.js

@@ -1,2 +1,2 @@
 "use client";
-"use strict";var L=Object.create;var l=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var a in t)l(e,a,{get:t[a],enumerable:!0})},g=(e,t,a,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of R(t))!E.call(e,r)&&r!==a&&l(e,r,{get:()=>t[r],enumerable:!(o=P(t,r))||o.enumerable});return e};var M=(e,t,a)=>(a=e!=null?L(k(e)):{},g(t||!e||!e.__esModule?l(a,"default",{value:e,enumerable:!0}):a,e)),q=e=>g(l({},"__esModule",{value:!0}),e);var w={};H(w,{Select:()=>f});module.exports=q(w);var s=require("@stackshift-ui/system"),b=M(require("classnames")),n=require("react/jsx-runtime"),p="Select",f=({defaultValue:e,variant:t="primary",label:a,labelClass:o,onChange:r,required:S=!1,name:i,items:c,ariaLabel:F,noLabel:C=!1,children:$,className:h,as:N="select",...T})=>{var y;let{[p]:V=s.DefaultComponent}=(0,s.useStackShiftUIComponents)(),d="w-full rounded bg-white p-4 text-xs font-semibold leading-none outline-none",u=`${d}`,v=`${d} border border-solid border-primary-foreground`,x=(y={primary:u,outline:v}[t])!=null?y:u;return(0,n.jsxs)(n.Fragment,{children:[!C&&(0,n.jsx)("label",{htmlFor:i,className:o,children:a||i}),(0,n.jsx)(V,{onChange:r,name:i,defaultValue:e,required:S,as:N,className:(0,b.default)(x,h),...T,"data-testid":p,children:c&&c.length>0&&c.map(m=>(0,n.jsx)("option",{value:m,children:m},m))})]})};f.displayName=p;0&&(module.exports={Select});
+"use strict";var L=Object.create;var l=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var a in t)l(e,a,{get:t[a],enumerable:!0})},y=(e,t,a,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of R(t))!E.call(e,r)&&r!==a&&l(e,r,{get:()=>t[r],enumerable:!(o=P(t,r))||o.enumerable});return e};var M=(e,t,a)=>(a=e!=null?L(k(e)):{},y(t||!e||!e.__esModule?l(a,"default",{value:e,enumerable:!0}):a,e)),q=e=>y(l({},"__esModule",{value:!0}),e);var w={};H(w,{Select:()=>f});module.exports=q(w);var s=require("@stackshift-ui/system"),b=M(require("classnames")),n=require("react/jsx-runtime"),p="Select",f=({defaultValue:e,variant:t="primary",label:a,labelClass:o,onChange:r,required:S=!1,name:i,items:c,ariaLabel:F,noLabel:C=!1,children:$,className:h,as:N="select",...T})=>{var u;let{[p]:V=s.DefaultComponent}=(0,s.useStackShiftUIComponents)(),d="w-full rounded-global bg-white p-4 text-xs font-semibold leading-none outline-none",g=`${d}`,v=`${d} border border-solid border-primary-foreground`,x=(u={primary:g,outline:v}[t])!=null?u:g;return(0,n.jsxs)(n.Fragment,{children:[!C&&(0,n.jsx)("label",{htmlFor:i,className:o,children:a||i}),(0,n.jsx)(V,{onChange:r,name:i,defaultValue:e,required:S,as:N,className:(0,b.default)(x,h),...T,"data-testid":p,children:c&&c.length>0&&c.map(m=>(0,n.jsx)("option",{value:m,children:m},m))})]})};f.displayName=p;0&&(module.exports={Select});

package/dist/index.mjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";import{a as e}from"./chunk-XT3L3TD2.mjs";export{e as Select};
+"use strict";import{a as e}from"./chunk-VCJRWWZ5.mjs";export{e as Select};

package/dist/select.js

@@ -1 +1 @@
-"use strict";var x=Object.create;var l=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var a in t)l(e,a,{get:t[a],enumerable:!0})},u=(e,t,a,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of R(t))!E.call(e,r)&&r!==a&&l(e,r,{get:()=>t[r],enumerable:!(o=P(t,r))||o.enumerable});return e};var M=(e,t,a)=>(a=e!=null?x(k(e)):{},u(t||!e||!e.__esModule?l(a,"default",{value:e,enumerable:!0}):a,e)),q=e=>u(l({},"__esModule",{value:!0}),e);var w={};H(w,{Select:()=>f});module.exports=q(w);var s=require("@stackshift-ui/system"),b=M(require("classnames")),n=require("react/jsx-runtime"),p="Select",f=({defaultValue:e,variant:t="primary",label:a,labelClass:o,onChange:r,required:S=!1,name:i,items:c,ariaLabel:F,noLabel:C=!1,children:$,className:h,as:N="select",...T})=>{var g;let{[p]:V=s.DefaultComponent}=(0,s.useStackShiftUIComponents)(),d="w-full rounded bg-white p-4 text-xs font-semibold leading-none outline-none",y=`${d}`,v=`${d} border border-solid border-primary-foreground`,L=(g={primary:y,outline:v}[t])!=null?g:y;return(0,n.jsxs)(n.Fragment,{children:[!C&&(0,n.jsx)("label",{htmlFor:i,className:o,children:a||i}),(0,n.jsx)(V,{onChange:r,name:i,defaultValue:e,required:S,as:N,className:(0,b.default)(L,h),...T,"data-testid":p,children:c&&c.length>0&&c.map(m=>(0,n.jsx)("option",{value:m,children:m},m))})]})};f.displayName=p;0&&(module.exports={Select});
+"use strict";var x=Object.create;var l=Object.defineProperty;var P=Object.getOwnPropertyDescriptor;var R=Object.getOwnPropertyNames;var k=Object.getPrototypeOf,E=Object.prototype.hasOwnProperty;var H=(e,t)=>{for(var a in t)l(e,a,{get:t[a],enumerable:!0})},u=(e,t,a,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of R(t))!E.call(e,r)&&r!==a&&l(e,r,{get:()=>t[r],enumerable:!(o=P(t,r))||o.enumerable});return e};var M=(e,t,a)=>(a=e!=null?x(k(e)):{},u(t||!e||!e.__esModule?l(a,"default",{value:e,enumerable:!0}):a,e)),q=e=>u(l({},"__esModule",{value:!0}),e);var w={};H(w,{Select:()=>f});module.exports=q(w);var s=require("@stackshift-ui/system"),b=M(require("classnames")),n=require("react/jsx-runtime"),p="Select",f=({defaultValue:e,variant:t="primary",label:a,labelClass:o,onChange:r,required:S=!1,name:i,items:c,ariaLabel:F,noLabel:C=!1,children:$,className:h,as:N="select",...T})=>{var y;let{[p]:V=s.DefaultComponent}=(0,s.useStackShiftUIComponents)(),d="w-full rounded-global bg-white p-4 text-xs font-semibold leading-none outline-none",g=`${d}`,v=`${d} border border-solid border-primary-foreground`,L=(y={primary:g,outline:v}[t])!=null?y:g;return(0,n.jsxs)(n.Fragment,{children:[!C&&(0,n.jsx)("label",{htmlFor:i,className:o,children:a||i}),(0,n.jsx)(V,{onChange:r,name:i,defaultValue:e,required:S,as:N,className:(0,b.default)(L,h),...T,"data-testid":p,children:c&&c.length>0&&c.map(m=>(0,n.jsx)("option",{value:m,children:m},m))})]})};f.displayName=p;0&&(module.exports={Select});

package/dist/select.mjs

@@ -1 +1 @@
-import{a}from"./chunk-XT3L3TD2.mjs";export{a as Select};
+import{a}from"./chunk-VCJRWWZ5.mjs";export{a as Select};

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@stackshift-ui/select",
   "description": "",
-  "version": "6.0.2",
+  "version": "6.0.4-beta.0",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist/**"
+    "dist/**",
+    "src"
   ],
   "author": "WebriQ <info@webriq.com>",
   "devDependencies": {
@@ -28,13 +29,13 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/typescript-config": "6.0.2",
-    "@stackshift-ui/eslint-config": "6.0.2"
+    "@stackshift-ui/eslint-config": "6.0.2",
+    "@stackshift-ui/typescript-config": "6.0.2"
   },
   "dependencies": {
     "classnames": "^2.5.1",
     "@stackshift-ui/scripts": "6.0.2",
-    "@stackshift-ui/system": "6.0.2"
+    "@stackshift-ui/system": "6.0.3"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",

package/src/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+// component exports
+export * from "./select";

package/src/select.test.tsx

@@ -0,0 +1,20 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { Select } from "./select";
+
+describe.concurrent("select", () => {
+  afterEach(cleanup);
+
+  test("Common: Select - test if renders without errors", ({ expect }) => {
+    const clx = "select-class";
+    render(
+      <Select
+        className={clx}
+        name="stackshift-select"
+        ariaLabel="stackshift select"
+        items={["Option 1", "Option 2", "Option 3"]}
+      />,
+    );
+    expect(screen.getByTestId("select").classList).toContain(clx);
+  });
+});

package/src/select.tsx

@@ -0,0 +1,86 @@
+import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
+import cn from "classnames";
+import type { ElementType, HTMLProps, ReactNode } from "react";
+
+type StyleVariants<T extends string> = Record<T, string>;
+type Variant = "primary" | "outline";
+
+export interface SelectProps extends Omit<HTMLProps<HTMLSelectElement>, "as"> {
+  defaultValue?: string;
+  variant?: Variant;
+  label?: string;
+  labelClass?: string;
+  onChange?: () => void;
+  required?: boolean;
+  name: string;
+  items: string[];
+  ariaLabel: string;
+  noLabel?: boolean;
+  [key: string]: any;
+  children?: ReactNode;
+  className?: string;
+  as?: ElementType;
+}
+
+const displayName = "Select";
+
+export const Select: React.FC<SelectProps> = ({
+  defaultValue,
+  variant = "primary",
+  label,
+  labelClass,
+  onChange,
+  required = false,
+  name,
+  items,
+  ariaLabel,
+  noLabel = false,
+  children,
+  className,
+  as = "select",
+  ...props
+}) => {
+  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
+
+  const commonStyle =
+    "w-full rounded-global bg-white p-4 text-xs font-semibold leading-none outline-none";
+  const primary = `${commonStyle}`;
+  const outline = `${commonStyle} border border-solid border-primary-foreground`;
+
+  const variants: StyleVariants<Variant> = {
+    primary,
+    outline,
+  };
+  const variantClass = variants[variant] ?? primary;
+
+  return (
+    <>
+      {!noLabel && (
+        <label htmlFor={name} className={labelClass}>
+          {label || name}
+        </label>
+      )}
+      <Component
+        onChange={onChange}
+        name={name}
+        defaultValue={defaultValue}
+        required={required}
+        as={as}
+        className={cn(variantClass, className)}
+        {...props}
+        data-testid={displayName}>
+        {items &&
+          items.length > 0 &&
+          items.map(opt => {
+            return (
+              <option value={opt} key={opt}>
+                {opt}
+              </option>
+            );
+          })}
+      </Component>
+    </>
+  );
+};
+
+Select.displayName = displayName;