@spark-web/select 1.0.13 → 3.0.0-rc.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # @spark-web/select
 
+## 3.0.0-rc.0
+
+### Major Changes
+
+- rc versio
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/text-input@4.0.0-rc.0
+  - @spark-web/field@4.0.0-rc.0
+  - @spark-web/theme@4.0.0-rc.0
+  - @spark-web/icon@2.0.0-rc.0
+  - @spark-web/box@2.0.0-rc.0
+
+## 2.0.0
+
+### Minor Changes
+
+- [#382](https://github.com/brighte-labs/spark-web/pull/382)
+  [`955bf5d`](https://github.com/brighte-labs/spark-web/commit/955bf5d7698bfdf45e7f317aa3e726c81d3444c0)
+  Thanks [@dilipt-brighte](https://github.com/dilipt-brighte)! - Updates React
+  version to latest (18.2.0)
+
+### Patch Changes
+
+- Updated dependencies
+  [[`955bf5d`](https://github.com/brighte-labs/spark-web/commit/955bf5d7698bfdf45e7f317aa3e726c81d3444c0)]:
+  - @spark-web/box@1.2.0
+  - @spark-web/field@3.1.0
+  - @spark-web/icon@1.3.0
+  - @spark-web/text-input@3.0.0
+  - @spark-web/theme@3.2.0
+
 ## 1.0.13
 
 ### Patch Changes

package/dist/spark-web-select.cjs.d.ts

@@ -1 +1,2 @@
-export * from "./declarations/src/index";
+export * from "../src/index";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLXNlbGVjdC5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uL3NyYy9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9

package/dist/spark-web-select.cjs.js

@@ -1,7 +1,16 @@
-'use strict';
+"use strict";
+// this file might look strange and you might be wondering what it's for
+// it's lets you import your source files by importing this entrypoint
+// as you would import it if it was built with preconstruct build
+// this file is slightly different to some others though
+// it has a require hook which compiles your code with Babel
+// this means that you don't have to set up @babel/register or anything like that
+// but you can still require this module and it'll be compiled
 
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./spark-web-select.cjs.prod.js");
-} else {
-  module.exports = require("./spark-web-select.cjs.dev.js");
-}
+// this bit of code imports the require hook and registers it
+let unregister = require("../../../node_modules/@preconstruct/hook").___internalHook(typeof __dirname === 'undefined' ? undefined : __dirname, "../../..", "..");
+
+// this re-exports the source file
+module.exports = require("../src/index.ts");
+
+unregister();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/select",
-  "version": "1.0.13",
+  "version": "3.0.0-rc.0",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -15,21 +15,21 @@
     "README.md"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.19.0",
-    "@emotion/css": "^11.9.0",
-    "@spark-web/box": "^1.1.0",
-    "@spark-web/icon": "^1.2.2",
-    "@spark-web/text-input": "^2.0.4",
-    "@spark-web/theme": "^3.1.0"
+    "@babel/runtime": "^7.25.0",
+    "@emotion/react": "^11.13.5",
+    "@spark-web/box": "^2.0.0-rc.0",
+    "@spark-web/icon": "^2.0.0-rc.0",
+    "@spark-web/text-input": "^4.0.0-rc.0",
+    "@spark-web/theme": "^4.0.0-rc.0"
   },
   "devDependencies": {
-    "@spark-web/field": "^3.0.6",
-    "@spark-web/utils": "^1.2.3",
-    "@types/react": "^17.0.12",
-    "react": "^17.0.2"
+    "@spark-web/field": "^4.0.0-rc.0",
+    "@spark-web/utils": "^2.0.0-rc.0",
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0"
   },
   "peerDependencies": {
-    "@spark-web/field": "^3.0.6",
+    "@spark-web/field": "^4.0.0-rc.0",
     "react": ">=17.0.2"
   },
   "engines": {

package/dist/declarations/src/index.d.ts

@@ -1,2 +0,0 @@
-export { Select } from './select';
-export type { SelectProps } from './select';

package/dist/declarations/src/select.d.ts

@@ -1,34 +0,0 @@
-import type { DataAttributeMap } from '@spark-web/utils/internal';
-import type { SelectHTMLAttributes } from 'react';
-export declare type Option = {
-    /** Whether or not the option is disabled. */
-    disabled?: boolean;
-    /** Label for the option. */
-    label: string;
-    /** Value of the option. */
-    value: string | number;
-};
-export declare type Group = {
-    /** List of options for the group. */
-    options: Array<Option>;
-    /** Label for the group. */
-    label: string;
-};
-export declare type OptionsOrGroups = Array<Option | Group>;
-export declare type NativeSelectProps = Pick<SelectHTMLAttributes<HTMLSelectElement>, 'defaultValue' | 'name' | 'onBlur' | 'onChange' | 'required' | 'value'>;
-export declare type SelectProps = NativeSelectProps & {
-    /** Sets data attributes for the element. */
-    data?: DataAttributeMap;
-    /** The values that can be selected by the input. */
-    options: OptionsOrGroups;
-    /** Placeholder text for when the input does not have an initial value. */
-    placeholder?: string;
-};
-export declare const Select: import("react").ForwardRefExoticComponent<NativeSelectProps & {
-    /** Sets data attributes for the element. */
-    data?: DataAttributeMap | undefined;
-    /** The values that can be selected by the input. */
-    options: OptionsOrGroups;
-    /** Placeholder text for when the input does not have an initial value. */
-    placeholder?: string | undefined;
-} & import("react").RefAttributes<HTMLSelectElement>>;

package/dist/spark-web-select.cjs.dev.js

@@ -1,118 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var css = require('@emotion/css');
-var box = require('@spark-web/box');
-var field = require('@spark-web/field');
-var icon = require('@spark-web/icon');
-var textInput = require('@spark-web/text-input');
-var theme = require('@spark-web/theme');
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-
-var Select = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
-  var data = _ref.data,
-      defaultValue = _ref.defaultValue,
-      name = _ref.name,
-      onBlur = _ref.onBlur,
-      onChange = _ref.onChange,
-      optionsOrGroups = _ref.options,
-      placeholder = _ref.placeholder,
-      required = _ref.required,
-      value = _ref.value;
-
-  var _useFieldContext = field.useFieldContext(),
-      _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
-      _useFieldContext2$ = _useFieldContext2[0],
-      disabled = _useFieldContext2$.disabled,
-      invalid = _useFieldContext2$.invalid,
-      a11yProps = _useFieldContext2[1];
-
-  var _useSelectStyles = useSelectStyles({
-    disabled: disabled,
-    invalid: invalid
-  }),
-      _useSelectStyles2 = _slicedToArray(_useSelectStyles, 2),
-      boxProps = _useSelectStyles2[0],
-      inputStyles = _useSelectStyles2[1];
-
-  var mapOptions = react.useCallback(function (opt) {
-    return /*#__PURE__*/jsxRuntime.jsx("option", {
-      value: opt.value,
-      disabled: opt.disabled,
-      children: opt.label
-    }, opt.value);
-  }, []);
-  return /*#__PURE__*/jsxRuntime.jsxs(textInput.InputContainer, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(Indicator, {}), /*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread(_objectSpread({}, boxProps), a11yProps), {}, {
-      as: "select",
-      className: css.css(inputStyles),
-      data: data,
-      defaultValue: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : placeholder) ? '' : undefined,
-      disabled: disabled,
-      name: name,
-      onBlur: onBlur,
-      onChange: onChange,
-      ref: forwardedRef,
-      required: required,
-      value: value,
-      width: "full",
-      children: [!value || placeholder ? /*#__PURE__*/jsxRuntime.jsx("option", {
-        value: "",
-        disabled: true,
-        children: placeholder
-      }) : null, optionsOrGroups.map(function (optionOrGroup) {
-        if ('options' in optionOrGroup) {
-          return /*#__PURE__*/jsxRuntime.jsx("optgroup", {
-            label: optionOrGroup.label,
-            children: optionOrGroup.options.map(function (option) {
-              return mapOptions(option);
-            })
-          }, optionOrGroup.label);
-        }
-
-        return mapOptions(optionOrGroup);
-      })]
-    }))]
-  });
-});
-Select.displayName = 'Select';
-
-var Indicator = function Indicator() {
-  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    right: 0,
-    display: "flex",
-    alignItems: "center",
-    padding: "medium",
-    className: css.css({
-      pointerEvents: 'none'
-    }),
-    children: /*#__PURE__*/jsxRuntime.jsx(icon.ChevronDownIcon, {
-      size: "xxsmall",
-      tone: "placeholder"
-    })
-  });
-};
-
-function useSelectStyles(props) {
-  var _useInputStyles = textInput.useInputStyles(props),
-      _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
-      boxProps = _useInputStyles2[0],
-      inputStyles = _useInputStyles2[1];
-
-  var theme$1 = theme.useTheme();
-  return [boxProps, _objectSpread(_objectSpread({}, inputStyles), {}, {
-    // Prevent text going underneath the chevron icon
-    paddingRight: theme$1.sizing.xxsmall + // size of chevron icon
-    theme$1.spacing.medium * 2 // paddingX value
-
-  })];
-}
-
-exports.Select = Select;

package/dist/spark-web-select.cjs.prod.js

@@ -1,118 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
-var css = require('@emotion/css');
-var box = require('@spark-web/box');
-var field = require('@spark-web/field');
-var icon = require('@spark-web/icon');
-var textInput = require('@spark-web/text-input');
-var theme = require('@spark-web/theme');
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-
-var Select = /*#__PURE__*/react.forwardRef(function (_ref, forwardedRef) {
-  var data = _ref.data,
-      defaultValue = _ref.defaultValue,
-      name = _ref.name,
-      onBlur = _ref.onBlur,
-      onChange = _ref.onChange,
-      optionsOrGroups = _ref.options,
-      placeholder = _ref.placeholder,
-      required = _ref.required,
-      value = _ref.value;
-
-  var _useFieldContext = field.useFieldContext(),
-      _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
-      _useFieldContext2$ = _useFieldContext2[0],
-      disabled = _useFieldContext2$.disabled,
-      invalid = _useFieldContext2$.invalid,
-      a11yProps = _useFieldContext2[1];
-
-  var _useSelectStyles = useSelectStyles({
-    disabled: disabled,
-    invalid: invalid
-  }),
-      _useSelectStyles2 = _slicedToArray(_useSelectStyles, 2),
-      boxProps = _useSelectStyles2[0],
-      inputStyles = _useSelectStyles2[1];
-
-  var mapOptions = react.useCallback(function (opt) {
-    return /*#__PURE__*/jsxRuntime.jsx("option", {
-      value: opt.value,
-      disabled: opt.disabled,
-      children: opt.label
-    }, opt.value);
-  }, []);
-  return /*#__PURE__*/jsxRuntime.jsxs(textInput.InputContainer, {
-    children: [/*#__PURE__*/jsxRuntime.jsx(Indicator, {}), /*#__PURE__*/jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread(_objectSpread({}, boxProps), a11yProps), {}, {
-      as: "select",
-      className: css.css(inputStyles),
-      data: data,
-      defaultValue: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : placeholder) ? '' : undefined,
-      disabled: disabled,
-      name: name,
-      onBlur: onBlur,
-      onChange: onChange,
-      ref: forwardedRef,
-      required: required,
-      value: value,
-      width: "full",
-      children: [!value || placeholder ? /*#__PURE__*/jsxRuntime.jsx("option", {
-        value: "",
-        disabled: true,
-        children: placeholder
-      }) : null, optionsOrGroups.map(function (optionOrGroup) {
-        if ('options' in optionOrGroup) {
-          return /*#__PURE__*/jsxRuntime.jsx("optgroup", {
-            label: optionOrGroup.label,
-            children: optionOrGroup.options.map(function (option) {
-              return mapOptions(option);
-            })
-          }, optionOrGroup.label);
-        }
-
-        return mapOptions(optionOrGroup);
-      })]
-    }))]
-  });
-});
-Select.displayName = 'Select';
-
-var Indicator = function Indicator() {
-  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    right: 0,
-    display: "flex",
-    alignItems: "center",
-    padding: "medium",
-    className: css.css({
-      pointerEvents: 'none'
-    }),
-    children: /*#__PURE__*/jsxRuntime.jsx(icon.ChevronDownIcon, {
-      size: "xxsmall",
-      tone: "placeholder"
-    })
-  });
-};
-
-function useSelectStyles(props) {
-  var _useInputStyles = textInput.useInputStyles(props),
-      _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
-      boxProps = _useInputStyles2[0],
-      inputStyles = _useInputStyles2[1];
-
-  var theme$1 = theme.useTheme();
-  return [boxProps, _objectSpread(_objectSpread({}, inputStyles), {}, {
-    // Prevent text going underneath the chevron icon
-    paddingRight: theme$1.sizing.xxsmall + // size of chevron icon
-    theme$1.spacing.medium * 2 // paddingX value
-
-  })];
-}
-
-exports.Select = Select;

package/dist/spark-web-select.esm.js

@@ -1,114 +0,0 @@
-import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
-import _slicedToArray from '@babel/runtime/helpers/esm/slicedToArray';
-import { css } from '@emotion/css';
-import { Box } from '@spark-web/box';
-import { useFieldContext } from '@spark-web/field';
-import { ChevronDownIcon } from '@spark-web/icon';
-import { InputContainer, useInputStyles } from '@spark-web/text-input';
-import { useTheme } from '@spark-web/theme';
-import { forwardRef, useCallback } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
-
-var Select = /*#__PURE__*/forwardRef(function (_ref, forwardedRef) {
-  var data = _ref.data,
-      defaultValue = _ref.defaultValue,
-      name = _ref.name,
-      onBlur = _ref.onBlur,
-      onChange = _ref.onChange,
-      optionsOrGroups = _ref.options,
-      placeholder = _ref.placeholder,
-      required = _ref.required,
-      value = _ref.value;
-
-  var _useFieldContext = useFieldContext(),
-      _useFieldContext2 = _slicedToArray(_useFieldContext, 2),
-      _useFieldContext2$ = _useFieldContext2[0],
-      disabled = _useFieldContext2$.disabled,
-      invalid = _useFieldContext2$.invalid,
-      a11yProps = _useFieldContext2[1];
-
-  var _useSelectStyles = useSelectStyles({
-    disabled: disabled,
-    invalid: invalid
-  }),
-      _useSelectStyles2 = _slicedToArray(_useSelectStyles, 2),
-      boxProps = _useSelectStyles2[0],
-      inputStyles = _useSelectStyles2[1];
-
-  var mapOptions = useCallback(function (opt) {
-    return /*#__PURE__*/jsx("option", {
-      value: opt.value,
-      disabled: opt.disabled,
-      children: opt.label
-    }, opt.value);
-  }, []);
-  return /*#__PURE__*/jsxs(InputContainer, {
-    children: [/*#__PURE__*/jsx(Indicator, {}), /*#__PURE__*/jsxs(Box, _objectSpread(_objectSpread(_objectSpread({}, boxProps), a11yProps), {}, {
-      as: "select",
-      className: css(inputStyles),
-      data: data,
-      defaultValue: (defaultValue !== null && defaultValue !== void 0 ? defaultValue : placeholder) ? '' : undefined,
-      disabled: disabled,
-      name: name,
-      onBlur: onBlur,
-      onChange: onChange,
-      ref: forwardedRef,
-      required: required,
-      value: value,
-      width: "full",
-      children: [!value || placeholder ? /*#__PURE__*/jsx("option", {
-        value: "",
-        disabled: true,
-        children: placeholder
-      }) : null, optionsOrGroups.map(function (optionOrGroup) {
-        if ('options' in optionOrGroup) {
-          return /*#__PURE__*/jsx("optgroup", {
-            label: optionOrGroup.label,
-            children: optionOrGroup.options.map(function (option) {
-              return mapOptions(option);
-            })
-          }, optionOrGroup.label);
-        }
-
-        return mapOptions(optionOrGroup);
-      })]
-    }))]
-  });
-});
-Select.displayName = 'Select';
-
-var Indicator = function Indicator() {
-  return /*#__PURE__*/jsx(Box, {
-    position: "absolute",
-    top: 0,
-    bottom: 0,
-    right: 0,
-    display: "flex",
-    alignItems: "center",
-    padding: "medium",
-    className: css({
-      pointerEvents: 'none'
-    }),
-    children: /*#__PURE__*/jsx(ChevronDownIcon, {
-      size: "xxsmall",
-      tone: "placeholder"
-    })
-  });
-};
-
-function useSelectStyles(props) {
-  var _useInputStyles = useInputStyles(props),
-      _useInputStyles2 = _slicedToArray(_useInputStyles, 2),
-      boxProps = _useInputStyles2[0],
-      inputStyles = _useInputStyles2[1];
-
-  var theme = useTheme();
-  return [boxProps, _objectSpread(_objectSpread({}, inputStyles), {}, {
-    // Prevent text going underneath the chevron icon
-    paddingRight: theme.sizing.xxsmall + // size of chevron icon
-    theme.spacing.medium * 2 // paddingX value
-
-  })];
-}
-
-export { Select };