@adamjanicki/ui 1.1.9 → 1.2.1

package/components/Select/Select.js

@@ -26,7 +26,6 @@ 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, _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" }) })] }));
+    return (_jsxs("div", { className: classNames("ajui-select-container", disabled ? "ajui-select-disabled" : undefined, className) || undefined, 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.9",
+  "version": "1.2.1",
   "description": "Basic UI components and hooks for React in TypeScript",
   "main": "./index.js",
   "types": "./index.d.ts",

package/style.css

@@ -294,12 +294,19 @@ a {
 }
 
 /* Select */
+.ajui-select-container {
+  position: relative;
+  padding: 0;
+  width: fit-content;
+}
+
 .ajui-select-disabled {
   opacity: var(--ajui-disabled-opacity);
   cursor: not-allowed;
 }
 
 .ajui-select-base {
+  width: 100%;
   color: inherit;
   outline: 0px solid transparent;
   border: none;

package/tmp

@@ -1,95 +0,0 @@
-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);