tabler-react-2 0.1.96 → 0.1.97

package/dist/input/input.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _spinner = require("../spinner");
 var _classnames = _interopRequireDefault(require("classnames"));
-var _excluded = ["type", "label", "placeholder", "value", "onChange", "onRawChange", "onInput", "icon", "iconPos", "loader", "separated", "prependedText", "appendedText", "appendedLinkText", "appendedLinkHref", "appendedLinkOnClick", "datalistItems", "variant", "size", "noMargin", "inputProps"];
+var _excluded = ["type", "label", "placeholder", "value", "onChange", "onRawChange", "onInput", "icon", "iconPos", "loader", "separated", "prependedText", "appendedText", "appendedLinkText", "appendedLinkHref", "appendedLinkOnClick", "datalistItems", "variant", "size", "noMargin", "inputProps", "helpText", "helpTextPlacement", "helpPrompt", "required", "hint", "labelDescription"];
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
@@ -49,6 +49,12 @@ var Input = exports.Input = function Input(_ref) {
     _ref$noMargin = _ref.noMargin,
     noMargin = _ref$noMargin === void 0 ? false : _ref$noMargin,
     inputProps = _ref.inputProps,
+    helpText = _ref.helpText,
+    helpTextPlacement = _ref.helpTextPlacement,
+    helpPrompt = _ref.helpPrompt,
+    required = _ref.required,
+    hint = _ref.hint,
+    labelDescription = _ref.labelDescription,
     props = _objectWithoutProperties(_ref, _excluded);
   // State for managing uncontrolled input value
   var _useState = (0, _react.useState)(controlledValue),
@@ -92,8 +98,16 @@ var Input = exports.Input = function Input(_ref) {
   return /*#__PURE__*/_react["default"].createElement("div", _extends({
     className: "".concat(noMargin ? "" : "mb-3")
   }, props), label && /*#__PURE__*/_react["default"].createElement("label", {
-    className: "form-label"
-  }, label), separated ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "form-label ".concat(required ? "required" : "")
+  }, label, helpText && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, " ", /*#__PURE__*/_react["default"].createElement("span", {
+    "class": "form-help",
+    "data-bs-toggle": "popover",
+    "data-bs-placement": helpTextPlacement || "top",
+    "data-bs-html": "true",
+    "data-bs-content": helpText
+  }, helpPrompt || "?")), labelDescription && /*#__PURE__*/_react["default"].createElement("span", {
+    className: "form-label-description"
+  }, labelDescription)), separated ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "row g-2"
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: "col"
@@ -145,7 +159,9 @@ var Input = exports.Input = function Input(_ref) {
       key: index,
       value: item
     });
-  }))));
+  }))), hint && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "form-hint"
+  }, hint));
 };
 Input.propTypes = {
   type: _propTypes["default"].string,

package/dist/provider/tabler.js

@@ -34,11 +34,11 @@ var TablerProvider = exports.TablerProvider = function TablerProvider(_ref3) {
     fallbackAnchor = _ref3$fallbackAnchor === void 0 ? true : _ref3$fallbackAnchor;
   (0, _react.useEffect)(function () {
     var script1 = document.createElement("script");
-    script1.src = "https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/js/tabler.min.js";
+    script1.src = "https://cdn.jsdelivr.net/npm/@tabler/core@1.2.0/dist/js/tabler.min.js";
     script1.async = true;
     var link = document.createElement("link");
     link.rel = "stylesheet";
-    link.href = "https://cdn.jsdelivr.net/npm/@tabler/core@1.0.0-beta17/dist/css/tabler.min.css";
+    link.href = "https://cdn.jsdelivr.net/npm/@tabler/core@1.2.0/dist/css/tabler.min.css";
     var script2 = document.createElement("script");
     script2.textContent = "window.USE_FALLBACK_ANCHOR = ".concat(fallbackAnchor, ";");
     document.head.appendChild(link);

package/docs/package.json

@@ -22,7 +22,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "^6.1.15",
-    "tabler-react-2": "^0.1.95"
+    "tabler-react-2": "^0.1.96"
   },
   "devDependencies": {},
   "keywords": [

package/docs/src/docs/components/enclosed-select-group.mdx

@@ -11,22 +11,16 @@ Enclosed Select Groups are used to mask radio and checkbox inputs in boxes with
 ## Signature
 
 export const ControlledEnclosedSelectGroup = (props) => {
-  const [selectValue, setSelectValue] = useState();
+  const [value, setValue] = useState(props.value);
   return (
     <>
       <EnclosedSelectGroup
-        multiple
-        direction="column"
-        value={selectValue}
-        onChange={(v) => {
-          console.log(v);
-          setSelectValue(v);
+        {...props}
+        value={value}
+        onChange={(d) => {
+          setValue(d);
+          props.onChange && props.onChange(d);
         }}
-        items={[
-          { value: "one", content: <b>One</b> },
-          { value: "two", content: "Two" },
-          { value: "three", content: "Three" },
-        ]}
       />
     </>
   );
@@ -95,11 +89,7 @@ The `multiple` prop can be used to allow multiple items to be selected.
       { value: "two", label: "Two" },
       { value: "three", label: "Three" },
     ]}
-    value={[
-      {
-        value: "one",
-      },
-    ]}
+    value={[{ value: "one" }]}
     onChange={console.log}
     multiple
   />
@@ -112,7 +102,11 @@ The `multiple` prop can be used to allow multiple items to be selected.
     { value: "two", label: "Two" },
     { value: "three", label: "Three" },
   ]}
-  value={[]}
+  value={[
+    {
+      value: "one",
+    },
+  ]}
   onChange={console.log}
   multiple
 />
@@ -129,9 +123,10 @@ The `direction` prop can be used to change the direction of the items.
       { value: "two", label: "Two" },
       { value: "three", label: "Three" },
     ]}
-    value={null}
+    value={[]}
     onChange={console.log}
     direction="column"
+    multiple
   />
 </Excerpt>
 
@@ -142,8 +137,9 @@ The `direction` prop can be used to change the direction of the items.
     { value: "two", label: "Two" },
     { value: "three", label: "Three" },
   ]}
-  value={null}
+  value={[]}
   onChange={console.log}
   direction="column"
+  multiple
 />
 ```

package/docs/src/docs/components/input.mdx

@@ -40,6 +40,12 @@ import { Input } from "tabler-react-2";
 | `variant`             | No       | [color](/utilities/colors) |           | The color variant of the button.                                                                                        |
 | `size`                | No       | [`sm`, `md`, `lg`]         | `md`      | The size of the button.                                                                                                 |
 | `inputProps`          | No       | Object                     |           | The props to be passed to the input.                                                                                    |
+| `helpText`            | No       | String                     |           | The help text to be shown below the label.                                                                              |
+| `helpTextPlacement`   | No       | String                     | `top`     | The placement of the help text.                                                                                         |
+| `helpPrompt`          | No       | String                     | `?`       | The prompt to be shown in the field's label.                                                                            |
+| `required`            | No       | Boolean                    |           | Whether the input is required.                                                                                          |
+| `hint`                | No       | String                     |           | The hint to be shown below the input.                                                                                   |
+| `labelDescription`    | No       | String                     |           | The description to be shown to the right of the label.                                                                  |
 
 ## Basic Usage
 
@@ -428,3 +434,23 @@ You can supply a list of items to the `datalistItems` prop to show a datalist. T
 ```
 
 This is different than a DropdownInput because the datalist is not exclusive, meaning the user can use a value that is not in the list.
+
+## Help Text
+
+You can supply a `helpText` prop to the `Input` component to show a help text below the label.
+
+<Excerpt>
+  <Input
+    label="Input"
+    placeholder="Type here..."
+    helpText="This is some help text"
+  />
+</Excerpt>
+
+```jsx
+<Input
+  label="Input"
+  placeholder="Type here..."
+  helpText="This is some help text"
+/>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabler-react-2",
-  "version": "0.1.96",
+  "version": "0.1.97",
   "description": "A react implementation of Tabler ui",
   "main": "dist/index.js",
   "scripts": {