@k-int/stripes-kint-components 2.7.1 → 2.8.0

package/src/lib/IconSelect/IconSelect.js

@@ -1,149 +1,130 @@
-import { useRef, useState } from 'react';
+import { forwardRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
 
 import classnames from 'classnames';
 
 import { FormattedMessage } from 'react-intl';
 
 import {
-  Button,
-  Dropdown,
-  DropdownMenu,
   IconButton,
   Icon,
-  nativeChangeFieldValue as nativeChangeField,
-  Label,
 } from '@folio/stripes/components';
 
 import css from '../../../styles/IconSelect.css';
 
+import RichSelect, { useSelectedOption } from '../RichSelect';
+
 // A form component which acts as a "Select for states with corresponding icons"
-const IconSelect = ({
+const IconSelect = forwardRef(({
   ariaLabel,
   disabled = false,
   id,
-  input: formInput = {},
+  input,
   label,
   meta,
   notSet = {
-    icon: "ellipsis",
-    value: "",
+    icon: 'ellipsis',
+    value: '',
     label: <FormattedMessage id="stripes-kint-components.iconSelect.notSet" />
   },
   onChange,
   options: userOptions = [],
-  required = false
-}) => {
+  required = false,
+  value
+}, ref) => {
   // Options with notSet
   const options = [
     notSet,
     ...userOptions
   ];
 
-  // Refs
-  const hiddenInput = useRef(null);
-
-  const [value, setValue] = useState(meta.initial ?? '');
-  const findSelectedOptionByValue = (val) => {
-    return options.find(opt => opt.value === val);
-  };
-
-  const [selectedOption, setSelectedOption] = useState(findSelectedOptionByValue(meta.initial ?? ''));
-
-  const handleChange = (e) => {
-    // Actually set the value in the form
-    formInput.onChange(e);
-
-    // If the user has set up an onChange, this will ensure that that fires
-    if (onChange) {
-      onChange(e, e.target.value);
-    }
-  };
+  const [richSelectRef, selectedOption] = useSelectedOption();
+  useImperativeHandle(ref, () => ({
+    selectedOption
+  }));
 
-  const renderMenu = ({ onToggle }) => (
-    <DropdownMenu>
-      {options.map(opt => {
-        return (
-          <Button
-            autoFocus={selectedOption?.value === opt.value}
-            buttonStyle="dropdownItem"
-            id={`${id}-${formInput.name}-option-${opt.value}`}
-            marginBottom0
-            onClick={() => {
-              // Trigger change event
-              nativeChangeField(hiddenInput, false, opt.value);
-
-              // Set internal states
-              setValue(opt.value);
-              setSelectedOption(findSelectedOptionByValue(opt.value));
+  const { className: iconButtonClassName, ...buttonProps } = selectedOption?.buttonProps ?? {};
+  return (
+    <RichSelect
+      ref={richSelectRef}
+      ariaLabel={ariaLabel}
+      disabled={disabled}
+      id={id}
+      input={input}
+      label={label}
+      meta={meta}
+      onChange={onChange}
+      options={options}
+      renderOption={(opt) => {
+        if (opt.icon) {
+          return (
+            <Icon
+              icon={opt.icon}
+              {...opt.iconProps}
+            >
+              {opt.label ?? opt.value}
+            </Icon>
+          );
+        }
 
-              // Close the menu on select
-              onToggle();
-            }}
-          >
-            {opt.icon ?
-              <Icon
-                icon={opt.icon}
-                {...opt.iconProps}
-              >
-                {opt.label}
-              </Icon> : opt.label
-            }
-          </Button>
-        );
-      })}
-    </DropdownMenu>
+        return opt.label ?? opt.value;
+      }}
+      renderTrigger={({ onToggle, triggerRef, keyHandler, ariaProps, getTriggerProps }) => (
+        <IconButton
+          ref={triggerRef}
+          disabled={disabled}
+          icon={selectedOption?.icon ?? 'ellipsis'}
+          marginBottom0
+          onClick={onToggle}
+          onKeyDown={keyHandler}
+          type="button"
+          {...{
+            className: classnames(
+              css.buttonStyle,
+              iconButtonClassName
+            ),
+            ...buttonProps
+          }}
+          {...getTriggerProps()}
+          {...ariaProps}
+        />
+      )}
+      required={required}
+      value={value}
+    />
   );
+});
 
-  const { className: iconButtonClassName, ...buttonProps} = selectedOption?.buttonProps ?? {};
-  return (
-    <>
-      {(label || ariaLabel) ? (
-        <Label
-          htmlFor={id}
-          id={`${id}-label`}
-          required={required}
-          className={ariaLabel && 'sr-only'}
-        >
-          {ariaLabel || label}
-        </Label>)
-        : ''
-      }
-      <Dropdown
-        hasPadding
-        placement="bottom-start"
-        renderTrigger={({ onToggle, triggerRef, keyHandler, ariaProps, getTriggerProps }) => (
-          <IconButton
-            ref={triggerRef}
-            disabled={disabled}
-            icon={selectedOption?.icon ?? 'ellipsis'}
-            marginBottom0
-            onClick={onToggle}
-            onKeyDown={keyHandler}
-            type="button"
-            {...{
-              className: classnames(
-                css.buttonStyle,
-                iconButtonClassName
-              ),
-              ...buttonProps
-            }}
-            {...getTriggerProps()}
-            {...ariaProps}
-          />
-        )}
-        renderMenu={renderMenu}
-      />
-      <input
-        {...formInput}
-        ref={hiddenInput}
-        hidden
-        onChange={handleChange}
-        type="text"
-        value={value}
-      />
-    </>
-    
-  );
+IconSelect.propTypes = {
+  ariaLabel: PropTypes.string,
+  disabled: PropTypes.bool,
+  id: PropTypes.string,
+  input: PropTypes.object,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.node
+  ]),
+  meta: PropTypes.object,
+  notSet: PropTypes.shape({
+    icon: PropTypes.string,
+    value: PropTypes.string.isRequired,
+    label: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.node
+    ])
+  }),
+  onChange: PropTypes.func,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    icon: PropTypes.string,
+    value: PropTypes.string.isRequired,
+    label: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.node
+    ])
+  })),
+  required: PropTypes.bool,
+  value: PropTypes.string,
 };
 
 export default IconSelect;

package/src/lib/IconSelect/README.md

@@ -22,6 +22,9 @@ import { IconSelect } from '@k-int/stripes-kint-components'
   />
 ```
 
+## Usage with Ref
+IconSelect uses RichSelect under the hood, so it is possible for the implementer to pass in a RichSelect ref, from `useSelectedOption` into IconSelect and optain the currently selected icon object.
+
 
 ## Props
 Name | Type | Description | default | required
@@ -31,6 +34,7 @@ disabled | Boolean | Disables the iconButton | false | ✕ |
 id | String | A string id used for accessibility reasons | | ✓ |
 label | String/Node | A visible label for the element. If not present, an ariaLabel should be supplied. | | ✕ |
 notSet | Object | An object to use in place of the default "not set" option in the dropdown. | `{ icon: "ellipsis", value: "", label: "Not set" }`. | ✕ |
-onChange | Function | An onChange handler, which will be passed an event when an option is clicked. (Currently no `value` prop is accepted, so this component cannot be run as a controlled form component.) | | ✕ |
+onChange | Function | An onChange handler, which will be passed an event when an option is clicked. If this is being used in a form as a controlled component, the onChange will need to handle setting the form value, and currently the value will be set to the option selected momentarily before then being set to the value via the passed onChange. | | ✕ |
 options | Array\<Object> | An array of option objects, corresponding to the choices available in the dropdown menu. Object props available are: <ul><li>`buttonProps` - properties which will be applied to the iconButton which triggers the dropdown (This allows for colouring and styling individually per option)</li><li>`icon` - an icon for the option within the dropdown and also in the iconButton. If one is not supplied, an ellipsis icon will be used for the dropdown trigger</li><li>`iconProps` - properties to pass on to the icon within the dropdown</li><li>`label (Required)` - The label to display next to the icon in the dropdown for selection</li><li>`value (Required)` - The value to be set on selection</li></ul> | [] | ✕ |
-required | Boolean | A boolean used to set required styling on the label | false | ✕ |
+required | Boolean | A boolean used to set required styling on the label | false | ✕ |
+value | String | A value property to allow this component to be used as a controller form component | | ✕ |

package/src/lib/RichSelect/README.md

@@ -0,0 +1,56 @@
+# RichSelect
+A component designed to render a dropdown, for a Select-style pick between rich object choices.
+
+## Basic Usage
+```
+import { RichSelect } from '@k-int/stripes-kint-components'
+
+  <RichSelect
+    label="RichSelect"
+    options={[
+      {
+        value: "option1",
+        label: "Option 1",
+        someOtherProp: true
+      },
+      {
+        value: "option2",
+        label: "Option 2",
+        something: false
+      }
+    ]}
+  />
+```
+
+## Usage with Ref
+A hook is supplied, `useSelectedOption`, which will return `[ref, selectedOption]`. The object `selectedOption` will contain the full option object that is currently selected by RichSelect, thus avoiding the need to parse out form values and find the value within the options array provided manually for each RichSelect.
+
+
+```
+import { RichSelect, useSelectedOption } from '@k-int/stripes-kint-components'
+  const [ref, selectedOption] = useSelectedOption();
+  console.log("Selected option: %o", selectedOption);
+
+  return (
+    <RichSelect
+      ref={ref}
+      ...
+    />
+  );
+```
+
+## Props
+Name | Type | Description | default | required
+--- | --- | --- | --- | ---
+ariaLabel | String | A string aria-label. This is only supposed to be used when a label will not be present, so that screen readers will still have a label to understand what the button is for. | | ✕ |
+disabled | Boolean | Disables the default renderTrigger | false | ✕ |
+id | String | A string id used for accessibility reasons | | ✓ |
+label | String/Node | A visible label for the element. If not present, an ariaLabel should be supplied. | | ✕ |
+onChange | Function | An onChange handler, which will be passed an event when an option is clicked. If this is being used in a form as a controlled component, the onChange will need to handle setting the form value, and currently the value will be set to the option selected momentarily before then being set to the value via the passed onChange. | | ✕ |
+options | Array\<Object> | An array of option objects, corresponding to the choices available in the dropdown menu. These objects _must_ contain a `value` prop, and a `label` prop is highly recommended. Beyond this the option object can take any shape required. | [] | ✕ |
+placeholder | Node/String | A custom placeholder in the default trigger button when no value is selected | "Please select an option" | ✕ |
+renderMenu | Function | A function to replace the entire renderMenu for the dropdown. Provided props are all those provided by Stripes `Dropdown` component normally, as well as `selectedOption`, the object containing the currently selectedOption, and `changeField`, a function which takes a string value and natively sets the inner `input`, triggering the onChange and such. | | ✕ |
+renderOption | Function | A function which instead of replacing the entire renderMenu, simply replaces the rendered option button. The function takes a single prop containing the option to be rendered, and expects a node to be returned. | `(opt) => opt?.label ?? opt?.value` | ✕ |
+renderTrigger | Function | A function to replace the default render trigger provided by RichSelect. Takes all properties Stripes `Dropdown` provides to the renderTrigger prop, as well as `selectedOption`, the current selected option object. | | ✕ |
+required | Boolean | A boolean used to set required styling on the label | false | ✕ |
+value | String | A value property to allow this component to be used as a controller form component | | ✕ |

package/src/lib/RichSelect/RichSelect.js

@@ -0,0 +1,230 @@
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+
+import { FormattedMessage } from 'react-intl';
+
+import {
+  Button,
+  Dropdown,
+  DropdownMenu,
+  Icon,
+  // IconButton,
+  nativeChangeFieldValue as nativeChangeField,
+  Label,
+} from '@folio/stripes/components';
+
+import css from '../../../styles/RichSelect.css';
+
+const RichSelect = forwardRef(({
+  ariaLabel,
+  disabled = false,
+  dropdownProps = {},
+  id,
+  input: formInput = {},
+  label,
+  meta,
+  onChange,
+  options: userOptions = [],
+  placeholder,
+  renderMenu,
+  renderOption,
+  renderTrigger,
+  required = false,
+  value
+}, ref) => {
+  const hiddenInput = useRef(null);
+
+  const [internalValue, setInternalValue] = useState(meta?.initial ?? value ?? '');
+
+  const findSelectedOptionByValue = useCallback((val) => {
+    return userOptions.find(opt => opt.value === val);
+  }, [userOptions]);
+
+  const [selectedOption, setSelectedOption] = useState(findSelectedOptionByValue(meta?.initial ?? '') ?? {});
+
+  useEffect(() => {
+    // We treat non-undefined value/formInput values as valid values, whereas undefined is only relevant when prop has not been provided
+    if (value !== undefined && !(value === selectedOption?.value && value === internalValue)) {
+      setSelectedOption(findSelectedOptionByValue(value));
+      setInternalValue(value);
+    } else if (formInput?.value !== undefined && !(value === selectedOption?.value && value === internalValue)) {
+      setSelectedOption(findSelectedOptionByValue(formInput.value));
+      setInternalValue(formInput.value);
+    }
+  }, [formInput, value, internalValue, selectedOption, findSelectedOptionByValue]);
+
+  // Way to grab internal selectedOption state, thereby avoiding having to reparse options for it
+  useImperativeHandle(ref, () => ({
+    selectedOption
+  }));
+
+  const defaultRenderTrigger = ({ onToggle, triggerRef, keyHandler, open, ariaProps, getTriggerProps }) => {
+    return (
+      <Button
+        ref={triggerRef}
+        buttonClass={css.iconButtonText}
+        buttonStyle="none"
+        disabled={disabled}
+        marginBottom0
+        onClick={onToggle}
+        onKeyDown={keyHandler}
+        paddingSide0
+        type="button"
+        {...getTriggerProps()}
+        {...ariaProps}
+      >
+        <Icon
+          icon={open ? 'caret-up' : 'caret-down'}
+          iconPosition="end"
+        >
+          {
+            selectedOption?.label ??
+            selectedOption?.value ??
+            (internalValue || null) ??
+            placeholder ??
+            <FormattedMessage id="stripes-kint-components.richSelect.placeholder" />
+          }
+        </Icon>
+      </Button>
+      // Awaiting result of conversation about whether we want to allow labels on IconButtons
+      /* <IconButton
+        ref={triggerRef}
+        disabled={disabled}
+        icon={open ? 'caret-up' : 'caret-down'}
+        iconPosition="end"
+        marginBottom0
+        onClick={onToggle}
+        onKeyDown={keyHandler}
+        type="button"
+        {...getTriggerProps()}
+        {...ariaProps}
+      >
+        {
+          selectedOption?.label ??
+          selectedOption?.value ??
+          (internalValue ? internalValue : null) ??
+          placeholder ??
+          <FormattedMessage id="stripes-kint-components.richSelect.placeholder" />
+        }
+      </IconButton> */
+    );
+  };
+
+  const handleChange = (e) => {
+    // Actually set the value in the form (If formInput exists)
+    if (formInput?.onChange) {
+      formInput.onChange(e);
+    }
+
+    // If the user has set up an onChange, this will ensure that that fires
+    if (onChange) {
+      onChange(e, e.target.value);
+    }
+  };
+
+  const changeField = (val) => {
+    nativeChangeField(hiddenInput, false, val);
+  };
+
+  const defaultRenderOption = (opt) => (opt.label ?? opt.value);
+
+  const defaultRenderMenu = ({ onToggle }) => (
+    <DropdownMenu>
+      {userOptions.map(opt => {
+        return (
+          <Button
+            autoFocus={selectedOption?.value === opt.value}
+            buttonStyle="dropdownItem"
+            id={`${id}-${formInput.name}-option-${opt.value}`}
+            marginBottom0
+            onClick={() => {
+              // Trigger change event
+              changeField(opt.value);
+
+              // Close the menu on select
+              onToggle();
+            }}
+          >
+            {renderOption ? renderOption(opt) : defaultRenderOption(opt)}
+          </Button>
+        );
+      })}
+    </DropdownMenu>
+  );
+
+  return (
+    <>
+      {(label || ariaLabel) ? (
+        <Label
+          className={ariaLabel && 'sr-only'}
+          htmlFor={id}
+          id={`${id}-label`}
+          required={required}
+        >
+          {ariaLabel || label}
+        </Label>)
+        : ''
+      }
+      <Dropdown
+        hasPadding
+        placement="bottom-start"
+        renderMenu={(menuProps) => {
+          if (renderMenu) {
+            return renderMenu({ ...menuProps, selectedOption, changeField });
+          } else {
+            return defaultRenderMenu(menuProps);
+          }
+        }}
+        renderTrigger={(triggerProps) => {
+          if (renderTrigger) {
+            return renderTrigger({ ...triggerProps, selectedOption });
+          } else {
+            return defaultRenderTrigger(triggerProps);
+          }
+        }}
+        {...dropdownProps}
+      />
+      <input
+        {...formInput}
+        ref={hiddenInput}
+        hidden
+        onChange={handleChange}
+        type="text"
+        value={internalValue}
+      />
+    </>
+  );
+});
+
+RichSelect.propTypes = {
+  ariaLabel: PropTypes.string,
+  disabled: PropTypes.bool,
+  dropdownProps: PropTypes.object,
+  id: PropTypes.string,
+  input: PropTypes.object,
+  label: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.func,
+    PropTypes.node
+  ]),
+  meta: PropTypes.object,
+  onChange: PropTypes.func,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string.isRequired,
+    label: PropTypes.oneOfType([
+      PropTypes.string,
+      PropTypes.node
+    ])
+  })),
+  placeholder: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.node
+  ]),
+  renderMenu: PropTypes.func,
+  renderOption: PropTypes.func,
+  renderTrigger: PropTypes.func,
+  required: PropTypes.bool,
+  value: PropTypes.string,
+};
+
+export default RichSelect;

package/src/lib/RichSelect/index.js

@@ -0,0 +1,2 @@
+export { default } from './RichSelect';
+export { default as useSelectedOption } from './useSelectedOption';

package/src/lib/RichSelect/useSelectedOption.js

@@ -0,0 +1,14 @@
+import { useCallback, useState } from 'react';
+
+const useSelectedOption = () => {
+  const [selectedOption, setSelectedOption] = useState();
+  const ref = useCallback(node => {
+    if (node !== null && selectedOption?.value !== node.selectedOption?.value) {
+      setSelectedOption(node.selectedOption);
+    }
+  }, [selectedOption]);
+
+  return ([ref, selectedOption]);
+};
+
+export default useSelectedOption;

package/src/lib/hooks/useMutateRefdataCategory.js

@@ -22,7 +22,8 @@ const useMutateRefdataCategory = ({
   const deleteQueryObject = useMutation(
     ['stripes-kint-components', 'useMutateRefdataCategory', 'delete'],
     async (id) => ky.delete(
-      `${endpoint}/${id}`).json()
+      `${endpoint}/${id}`
+).json()
       .then(afterQueryCalls?.delete)
       .then(() => invalidateRefdata())
       .catch(catchQueryCalls?.delete),
@@ -37,8 +38,7 @@ const useMutateRefdataCategory = ({
           ...payload,
           values: []
         }
-      }
-    ).json()
+      }).json()
       .then(afterQueryCalls?.post)
       .then(() => invalidateRefdata())
       .catch(catchQueryCalls?.post),

package/styles/RichSelect.css

@@ -0,0 +1,7 @@
+@import '@folio/stripes-components/lib/variables.css';
+
+.iconButtonText {
+  font-weight: var(--text-weight-regular);
+  color: var(--color-icon);
+  border-radius: 0;
+}

package/translations/stripes-kint-components/ar.json

@@ -117,5 +117,6 @@
   "operator.isNot": "ليس",
   "operator.contains": "الحاويات",
   "operator.doesNotContain": "لا تحتوي",
-  "iconSelect.notSet": "غير محدد"
+  "iconSelect.notSet": "غير محدد",
+  "richSelect.placeholder": "يرجى اختيار خيار"
 }

package/translations/stripes-kint-components/cs_CZ.json

@@ -117,5 +117,6 @@
   "operator.isNot": "Ne",
   "operator.contains": "Obsahuje",
   "operator.doesNotContain": "Neobsahuje",
-  "iconSelect.notSet": "Není nastaveno"
+  "iconSelect.notSet": "Není nastaveno",
+  "richSelect.placeholder": "Vyberte možnost"
 }

package/translations/stripes-kint-components/de.json

@@ -117,5 +117,6 @@
   "operator.isNot": "nicht",
   "operator.contains": "Enthält",
   "operator.doesNotContain": "nicht enthalten",
-  "iconSelect.notSet": "Nicht gesetzt"
+  "iconSelect.notSet": "Nicht gesetzt",
+  "richSelect.placeholder": "Bitte wählen Sie eine Option"
 }

package/translations/stripes-kint-components/en.json

@@ -143,5 +143,6 @@
   "operator.contains": "Contains",
   "operator.doesNotContain": "Does not contain",
 
-  "iconSelect.notSet": "Not set"
+  "iconSelect.notSet": "Not set",
+  "richSelect.placeholder": "Please select an option"
 }

package/translations/stripes-kint-components/es.json

@@ -117,5 +117,6 @@
   "operator.isNot": "No",
   "operator.contains": "Contains",
   "operator.doesNotContain": "No contiene",
-  "iconSelect.notSet": "No está listo."
+  "iconSelect.notSet": "No está listo.",
+  "richSelect.placeholder": "Seleccione una opción"
 }

package/translations/stripes-kint-components/hi_IN.json

@@ -117,5 +117,6 @@
   "operator.isNot": "नहीं",
   "operator.contains": "शामिल",
   "operator.doesNotContain": "शामिल नहीं है",
-  "iconSelect.notSet": "सेट नहीं"
+  "iconSelect.notSet": "सेट नहीं",
+  "richSelect.placeholder": "विकल्प चुनिए"
 }

package/translations/stripes-kint-components/hu.json

@@ -117,5 +117,6 @@
   "operator.isNot": "Nem.",
   "operator.contains": "Kontakt",
   "operator.doesNotContain": "Nem tartalmaz",
-  "iconSelect.notSet": "Nem"
+  "iconSelect.notSet": "Nem",
+  "richSelect.placeholder": "Kérjük válasszon egy lehetőséget"
 }

package/translations/stripes-kint-components/it_IT.json

@@ -117,5 +117,6 @@
   "operator.isNot": "Non è",
   "operator.contains": "Contiene",
   "operator.doesNotContain": "Non contiene",
-  "iconSelect.notSet": "Non impostato"
+  "iconSelect.notSet": "Non impostato",
+  "richSelect.placeholder": "Seleziona un'opzione"
 }