@adamjanicki/ui 1.1.7 → 1.1.9

package/components/Select/Select.d.ts

@@ -28,6 +28,14 @@ type Props = Omit<React.DetailedHTMLProps<React.SelectHTMLAttributes<HTMLSelectE
      * Name of the select for accessibility purposes
      */
     "aria-label": string;
+    /**
+     * [Optional] The styles to apply to the select element
+     */
+    innerStyle?: React.CSSProperties;
+    /**
+     * [Optional] The class name to apply to the select element
+     */
+    innerClassName?: string;
 };
 declare const _default: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLSelectElement>>;
 export default _default;

package/components/Select/Select.js

@@ -20,12 +20,13 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { classNames } from "../../utils/util";
 var identity = function (x) { return x; };
 var Select = function (_a, ref) {
-    var className = _a.className, options = _a.options, _b = _a.getOptionValue, getOptionValue = _b === void 0 ? identity : _b, _c = _a.getOptionLabel, getOptionLabel = _c === void 0 ? identity : _c, _d = _a.corners, corners = _d === void 0 ? "rounded" : _d, props = __rest(_a, ["className", "options", "getOptionValue", "getOptionLabel", "corners"]);
-    return (_jsx("select", __assign({}, props, { ref: ref, className: classNames("ajui-select-base corners--".concat(corners), className), children: options.map(function (option, index) { return (_jsx("option", { value: getOptionValue(option), children: getOptionLabel(option) }, index)); }) })));
+    var className = _a.className, options = _a.options, _b = _a.getOptionValue, getOptionValue = _b === void 0 ? identity : _b, _c = _a.getOptionLabel, getOptionLabel = _c === void 0 ? identity : _c, _d = _a.corners, corners = _d === void 0 ? "rounded" : _d, _e = _a.style, style = _e === void 0 ? {} : _e, innerStyle = _a.innerStyle, innerClassName = _a.innerClassName, disabled = _a.disabled, props = __rest(_a, ["className", "options", "getOptionValue", "getOptionLabel", "corners", "style", "innerStyle", "innerClassName", "disabled"]);
+    return (_jsxs("div", { className: classNames(disabled ? "ajui-select-disabled" : undefined, className) ||
+            undefined, style: __assign(__assign({}, style), { position: "relative", padding: 0 }), children: [_jsx("select", __assign({}, props, { ref: ref, className: classNames("ajui-select-base corners--".concat(corners), innerClassName), style: innerStyle, disabled: disabled, children: options.map(function (option, index) { return (_jsx("option", { value: getOptionValue(option), children: getOptionLabel(option) }, index)); }) })), _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 64 64", className: "ajui-select-triangle", "aria-hidden": "true", children: _jsx("path", { fill: "currentColor", d: "M 29.175781 50.824219 C 30.738281 52.386719 33.273438 52.386719 34.835938 50.824219 L 58.835938 26.824219 C 60.398438 25.261719 60.398438 22.726562 58.835938 21.164062 C 57.273438 19.601562 54.738281 19.601562 53.175781 21.164062 L 32 42.335938 L 10.824219 21.175781 C 9.261719 19.613281 6.726562 19.613281 5.164062 21.175781 C 3.601562 22.738281 3.601562 25.273438 5.164062 26.835938 L 29.164062 50.835938 Z M 29.175781 50.824219" }) })] }));
 };
 export default forwardRef(Select);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adamjanicki/ui",
-  "version": "1.1.7",
+  "version": "1.1.9",
   "description": "Basic UI components and hooks for React in TypeScript",
   "main": "./index.js",
   "types": "./index.d.ts",

package/style.css

@@ -112,8 +112,8 @@ button:not([disabled]):focus-visible {
   outline: 3px solid var(--ajui-link-color);
   outline-offset: 0;
 }
-.ajui-input-default:focus-within,
-.ajui-select-base:focus-within {
+.ajui-input-default:not([disabled]):focus-within,
+.ajui-select-base:not([disabled]):focus-within {
   outline: 3px solid var(--ajui-focus-ring-color);
   outline-offset: 0;
 }
@@ -294,22 +294,35 @@ a {
 }
 
 /* Select */
+.ajui-select-disabled {
+  opacity: var(--ajui-disabled-opacity);
+  cursor: not-allowed;
+}
+
 .ajui-select-base {
   color: inherit;
   outline: 0px solid transparent;
   border: none;
   background-color: inherit;
-  padding: 0.75rem 0.5rem;
+  padding: 0.75rem 1.75rem 0.75rem 0.5rem;
   font-size: 1rem;
   font-weight: 400;
   transition: outline var(--ajui-default-transition);
   outline: 0px solid transparent;
   box-shadow: inset 0 0 0 1px var(--ajui-select-border);
-}
-
-.ajui-select-base:disabled {
-  opacity: var(--ajui-disabled-opacity);
-  cursor: not-allowed;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
+.ajui-select-triangle {
+  --size: 0.75rem;
+  width: var(--size);
+  height: var(--size);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: calc(var(--size) - 0.25rem);
 }
 
 /* Modal */

package/tmp

@@ -0,0 +1,95 @@
+import React, { forwardRef } from "react";
+import { classNames } from "../../utils/util";
+import { CornerType } from "../../utils/types";
+
+type Props = Omit<
+  React.DetailedHTMLProps<
+    React.SelectHTMLAttributes<HTMLSelectElement>,
+    HTMLSelectElement
+  >,
+  "aria-label"
+> & {
+  /**
+   * Array of options to display in the select
+   */
+  options: string[];
+  /**
+   * Mapper function to get the value of the option
+   *
+   * @param option the option to get the value of
+   * @returns the value of the option
+   */
+  getOptionValue?: (option: string) => string;
+  /**
+   * Mapper function to get the label of the option
+   *
+   * @param option the option to get the label of
+   * @returns the label of the option
+   */
+  getOptionLabel?: (option: string) => string;
+  /**
+   * [Optional] The corner style of the select element.
+   * @default "rounded"
+   */
+  corners?: CornerType;
+  /**
+   * Name of the select for accessibility purposes
+   */
+  "aria-label": string;
+  /**
+   * [Optional] The styles to apply to the select element
+   */
+  innerStyle?: React.CSSProperties;
+  /**
+   * [Optional] The class name to apply to the select element
+   */
+  innerClassName?: string;
+};
+
+const identity = (x: string) => x;
+
+const Select = (
+  {
+    className,
+    options,
+    getOptionValue = identity,
+    getOptionLabel = identity,
+    corners = "rounded",
+    style,
+    innerStyle,
+    innerClassName,
+    ...props
+  }: Props,
+  ref: React.Ref<HTMLSelectElement>
+) => (
+  <div className={classNames("ajui-select-container", className)} style={style}>
+    <select
+      {...props}
+      ref={ref}
+      className={classNames(
+        `ajui-select-base corners--${corners}`,
+        innerClassName
+      )}
+      style={innerStyle}
+    >
+      {options.map((option, index) => (
+        <option key={index} value={getOptionValue(option)}>
+          {getOptionLabel(option)}
+        </option>
+      ))}
+    </select>
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 64 64"
+      className="ajui-select-triangle"
+      aria-hidden="true"
+    >
+      <path
+        fill="currentColor"
+        d="M 29.175781 50.824219 C 30.738281 52.386719 33.273438 52.386719 34.835938 50.824219 L 58.835938 26.824219 C 60.398438 25.261719 60.398438 22.726562 58.835938 21.164062 C 57.273438 19.601562 54.738281 19.601562 53.175781 21.164062 L 32 42.335938 L 10.824219 21.175781 C 9.261719 19.613281 6.726562 19.613281 5.164062 21.175781 C 3.601562 22.738281 3.601562 25.273438 5.164062 26.835938 L 29.164062 50.835938 Z M 29.175781 50.824219"
+      />
+    </svg>
+  </div>
+);
+
+export default forwardRef(Select);